6. Lists and tables in HTML

HTML lists and tables are essential tools for organizing information on a website. They allow you to present data in a structured, easy-to-understand way, which can significantly improve the user experience. This chapter of our e-book will cover these two elements in detail to help you become an efficient Front End developer.

Lists in HTML

In HTML, we have three main types of lists: ordered lists, unordered lists, and defining lists.

Ordered Lists

Ordered lists are used when the order of items is important. They are created using the <ol> tag. Each list item is placed within a <li> tag. See the example below:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Unordered Lists

Unordered lists are used when the order of items does not matter. They are created using the <ul> tag. As with ordered lists, each item is placed within a <li> tag. See the example:

<ul>
  <li>Item</li>
  <li>Other item</li>
  <li>One more item</li>
</ul>

Definition Lists

Definition lists are used to list terms and their definitions. They are created using the tags <dl>, <dt> (for term) and <dd> (for definition). See the example:

<dl>
  <dt>HTML</dt>
  <dd>Markup language used to structure content on the web.</dd>
  <dt>CSS</dt>
  <dd>Style language used to describe the presentation of a document written in HTML.</dd>
</dl>

Tables in HTML

Tables are used to present data in rows and columns. They are created using various tags, including <table> (to create the table), <tr> (to create a line), <td> (to create a cell) and <th> (to create a table header).

See an example of how to create a table in HTML:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
</table>

In addition to these basic tags, there are several other tags and attributes that you can use to control the appearance and behavior of your tables. For example, you can use the <caption> To add a title to your table, the <colgroup> to specify properties for multiple columns at once, and the 'colspan' attribute to make a cell span multiple columns.

We hope this chapter has given you a good understanding of how to use lists and tables in HTML. Remember that practice is the key to becoming an efficient Front End developer, so be sure to try out what you've learned on your own projects. In the next chapter, we'll explore CSS, the language we use to style our websites and make them visually appealing.

Next page of the Free Ebook:

42Forms and inputs in HTML

4 minutes