HTML for Beginners 03 — Creating Lists and Tables

Welcome back to another HTML tutorial. In this tutorial, we will be exploring HTML lists and tables, two important aspects of web design.

Lists

Lists are an essential part of HTML, and there are three main types: unordered lists, ordered lists, and nested lists.

1.1 Unordered Lists are used to mark up a list of items where the order of the items doesn’t matter. An example of an unordered list is a shopping list. To create an unordered list, we use the <ul> tag, and for each item in the list, we use the <li> tag. Here's an example:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Hummus</li>
</ul>

1.2 Ordered Lists are used to mark up a list of items where the order of the items does matter. An example of an ordered list is a set of instructions. To create an ordered list, we use the <ol> tag, and again, for each item in the list, we use the <li> tag. Here's an example:

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

1.3 Nested Lists: It’s perfectly fine to nest one list inside another. For example, you might want to have some sub-bullets sitting below a top-level bullet. Here’s an example of a nested list:

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <ul>
    <li>Go straight across the first two roundabouts</li>
    <li>Turn left at the third roundabout</li>
    <li>The school is on your right, 300 meters up the road</li>
  </ul>
</ol>

Tables

Tables are a way of presenting information in rows and columns. You can use tables to display various content, such as data, images, and text.

2.1 Creating Tables: To create a table in HTML, we use the <table> tag. Each row of the table is represented by a <tr> tag, and each cell (column) in a row is represented by a <td> tag. Here's an example of a simple table:

<table>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

2.2 Table Headers: You can also add header cells to the table by using the <th> tag instead of the <td> tag. Here's an example:

<table>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

Summary

In summary, by using the <ul>, <ol>, <li>, <table>, <tr>, <td>, <th> tags, we can create various types of lists and tables. As always, practice is key, so make sure to try creating your lists and tables and experimenting with different styles and layouts.

In the next tutorial, we’ll cover HTML forms and semantic elements, so stay tuned for that!