Creating Lists and Tables in HTML

Photo by Suzi Kim on Unsplash

You ever wonder about this?

creating lists and tables in html

introduction to html lists

hey there!

If you're new to HTML, you'll find lists are one of the easiest and most useful structures to learn. You ever wonder about this? there are two main types: ordered and unordered lists.

Ordered lists are great for numbering steps in a recipe or ranking your favorite movies, while unordered lists are perfect for bulleting items in a grocery list or features in a product description.

How to Create an Unordered List

Creating an unordered list in HTML is simple. Honestly, You start with the <ul> tag, which stands for "unordered list".

You ever wonder about this? each item within the list is wrapped in an <li> tag, which stands for "list item".

Here's a quick example:

Source: based on community trends from Reddit and YouTube

Copyable Code Example

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>


This code will display a simple bullet list of fruits. Adjust the items as needed for your own project!

How to Create an Ordered List
Ordered lists are just as easy! Instead of <ul>, you'll use the <ol> tag, which stands for "ordered list". The items inside are listed with <li>, just like in unordered lists. Here’s how it looks:


<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>


With that code, your items will appear numbered, which is perfect for any sequence or step-by-step instructions.

Introduction to HTML Tables
Moving on to tables, which are a bit trickier but still very manageable. Tables are fantastic for organizing data like schedules, statistics, or any information that benefits from a grid layout.

How to Create a Simple Table
To start a table, you'll use the <table> tag. Inside, you can define rows with <tr> (table row) and cells within those rows using <td> (table data). Let’s create a table for a small coffee shop menu:


<table>
  <tr>
    <td>Espresso</td>
    <td>$2</td>
  </tr>
  <tr>
    <td>Cappuccino</td>
    <td>$3</td>
  </tr>
</table>


This simple table lists coffee types and their prices. Each row represents a different coffee type.

Conclusion
That’s a wrap on the basics of creating lists and tables in HTML! Whether you’re bulleting your daily to-do’s or organizing data into a neat table, these elements are fundamental to building clear and structured web pages. Keep experimenting with these structures, and you'll get the hang of it in no time. Happy coding!