HTML: Lists and Tables

Continuing from the last article where we discussed multimedia in HTML, in this article, we'll delve into two fundamental elements that enhance information presentation: lists and tables. These versatile HTML components enable us to organize data in structured formats, making content easily readable and visually appealing.

Lists

Unordered Lists: We use the element <ul> to create unordered lists. The element <li> represents each list item, and items are typically displayed with bullet points. Unordered lists are ideal for representing items without any specific order or priority.

Ordered Lists: We use the element <ol> to create ordered lists. As with unordered lists, each item is represented by the element <li> but ordered lists display items with numerical or alphabetical indicators based on the list's specified order.

Here's an example:

Replace the <body> element of the index.html file from a previous article with the code below.
Preview it in the browser.

<body>
    <h3>My Favorite Fruits:</h3>
    <ul>
      <li>Oranges</li>
      <li>Bananas</li>
      <li>Pineapples</li>
    </ul>
    <h3>My To-Do List:</h3>
    <ol>
      <li>Go for a morning jog</li>
      <li>Prepare a healthy breakfast</li>
      <li>Study</li>
    </ol>
  </body>

The code example presented in the article demonstrates two sets of lists. The first set represents unordered lists, while the second set represents ordered lists.

Tables

HTML tables provide a dynamic way to arrange and display data in rows and columns, making them ideal for presenting structured information on web pages. Whether you're organizing statistical data or creating a product comparison chart, tables offer a versatile and visually appealing solution.

Replace the <body> element of the index.html file with the code below.
Preview it in the browser.

<body>
  <table>
    <thead>
      <tr>
        <th colspan="2">Students</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Student A</td>
        <td>21</td>
      </tr>
      <tr>
        <td>Student B</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
</body>

Even though I intended to address styling later when we delve into CSS, a table cannot truly look like one without a few basic styles, as you might have noticed. For now, let's add the following code inside the <head> element, save it and then view the table in the browser once more to observe the improvements.

<style>
  :is(table, th, td) {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 10px;
  }
</style>

Key elements and attributes:

<table>: This element is used to create a table in HTML. It acts as the container for all the table-related elements.
<thead>: This element represents the table's header section. It is used to group and contain the table's header rows, often displaying column titles or header information.
<tbody>: This element represents the table's body section. It is used to group and contain the main content of the table, typically rows of data.
<tr>: This element represents a table row. It is used to define a row of cells within the table.
<th>: This element is used to define table header cells within the <thead> section. It represents header cells, and the content inside the element is usually bold and centered by default.
<td>: This element defines standard table cells within the <tbody> section. It represents regular data cells, and the content inside the element is usually displayed as regular text.
colspan: This attribute is used to specify the number of columns a table cell should span horizontally. In the provided example, <th colspan="2">Students</th> indicates that the cell should span two columns, merging the two header cells to create a single header for the "Students" column.

In summary, lists allow us to organize and present information in a structured manner, while tables provide a powerful way to display data in rows and columns. By leveraging these HTML elements, we enhance the visual appeal and organization of web content.

Previous: Multimedia Next: Container and Structural Elements