Complete HTML — Part6-list, table, caption

3 min readAug 1, 2024

In this article, we will discuss the list, table, and caption in detail.

Lists are a way to group a set of related items in a specific order or no particular order. HTML provides different types of lists:

Unordered List (`<ul>`)

An unordered list is a collection of items where the order does not matter. Each item in the list is marked with a bullet point.

Example:

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

Ordered List (`<ol>`)

An ordered list is a collection of items where the order does matter. Each item in the list is marked with a number.

Example:

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

Definition List (`<dl>`)

A definition list is used for terms and their descriptions.

Example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Tables in HTML

Tables are used to display data in a structured format, using rows and columns.

Basic Table Structure

Example:

<table border="1">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>

Table Elements

<table>: Defines the table.
<tr>: Defines a table row.
<th>: Defines a header cell in a table (bold and centered).
<td>: Defines a standard cell in a table.

Table Caption

A caption is a brief explanation or title for the table. The <caption> tag is used directly after the <table> tag.

Get Amit Dhiman’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

<table border="1">
  <caption>Employee Information</caption>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>

Advanced Table Features

Table with `thead`, `tbody`, and `tfoot`

These tags help to group header, body, and footer content in tables for better structure.

Example:

<table border="1">
  <caption>Monthly Sales</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$1200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$2200</td>
    </tr>
  </tfoot>
</table>

Merging Cells (`colspan` and `rowspan`)

To merge multiple cells, use the colspan (for columns) and rowspan (for rows) attributes.

Example:

<table border="1">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th rowspan="2">Age</th> <!-- Merged vertically -->
  </tr>
  <tr>
    <td colspan="2">Full Name</td> <!-- Merged horizontally -->
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
</table>

Scenarios and Use Cases

Simple List for Navigation:

Example: Navigation menus often use unordered lists.

<ul>   
  <li><a href="home.html">Home</a></li>  
  <li><a href="about.html">About</a></li>   
  <li><a href="contact.html">Contact</a></li> 
</ul>

Nested Lists:

Example: Creating a nested list to show subcategories.

<ul>   
  <li>Fruits     
    <ul>       
       <li>Apples</li>       
        <li>Bananas</li>     
    </ul>   
  </li>   
<li>Vegetables     
  <ul>       
    <li>Carrots</li>       
    <li>Broccoli</li>     
   </ul>   
</li> 
</ul>

Table for Data Representation:

Example: Displaying a list of products with their details.

<table border="1">   
  <caption>Product List</caption>   
  <thead>     
    <tr>       
       <th>Product Name</th>       
       <th>Price</th>       
        <th>Quantity</th>     
    </tr>   
  </thead>   
  <tbody>     
      <tr>       
         <td>Product A</td>       
         <td>$10</td>       
         <td>50</td>     
      </tr>     
      <tr>       
         <td>Product B</td>       
         <td>$20</td>       
         <td>30</td>     
      </tr>   
  </tbody>   
  <tfoot>     
    <tr>       
      <td colspan="2">Total</td>       
      <td>80</td>     
    </tr>   
  </tfoot> 
  </table>

Accessible Tables:

Example: Using the <scope> attribute to improve accessibility.

<table border="1">   
  <caption>Accessible Table</caption>   
  <thead>     
     <tr>       
        <th scope="col">Header 1</th>       
        <th scope="col">Header 2</th>     
    </tr>   
  </thead>   
  <tbody>     
    <tr>       
      <th scope="row">Row 1</th>       
      <td>Data 1</td>     
    </tr>     
    <tr>       
      <th scope="row">Row 2</th>       
      <td>Data 2</td>     
    </tr>   
  </tbody> 
</table>

By understanding and utilizing lists and tables properly, you can structure content effectively and semantically, making your HTML documents more readable and accessible.