How to Create Tables in HTML with Complete Examples

Basic Table Structure

A simple table needs four main tags:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>28</td>
  </tr>
</table>

• <table> → the container for the whole table
• <tr> → table row
• <th> → table header cell (usually bold and centered)
• <td> → table data cell

Adding Thead, Tbody, and Tfoot

For bigger tables, it’s better to group the sections:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Keyboard</td>
      <td>$29</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$15</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$44</td>
    </tr>
  </tfoot>
</table>

• <thead> → header section
• <tbody> → main content
• <tfoot> → footer section (great for totals)

Merging Cells with Colspan and Rowspan

Colspan merges columns:

1<td colspan="2">This cell spans two columns</td>

Rowspan merges rows:

1<td rowspan="2">This cell spans two rows</td>

Example:

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Email</td>
    <td>Phone</td>
  </tr>
</table>

Making Tables More Accessible

To make tables easier to understand (especially for screen readers), you can add:

<table>
  <caption>
    Monthly Sales Report
  </caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$3000</td>
    </tr>
  </tbody>
</table>

• <caption> → gives the table a title
• scope=“col” or scope=“row” → helps screen readers understand headers

Quick Tips

• Use tables only for real tabular data, not for page layout.
• Always add headers with <th> so the table is clearer.
• Use <thead>, <tbody>, and <tfoot> for better structure.
• Add a <caption> when the table needs a title.
• Don’t forget scope for better accessibility.

With these tags, you can build clean and well-structured tables that are easy to read and friendly for everyone.