HTML Tables

HTML tables are used to organize and display data in rows and columns. While they were once used for page layout (which is no longer recommended), tables remain essential for presenting structured data like schedules, pricing, comparison charts, and reports.

Basic Table Structure

A table is built with a hierarchical structure of elements:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

• <table> — the container element
• <tr> — table row, defines a row of cells
• <th> — table header cell, bold and centered by default
• <td> — table data cell, regular weight and left-aligned

Table Sections: <thead>, <tbody>, <tfoot>

Tables can be divided into three semantic sections:

• <thead> — groups the header rows (typically the first row with column headings)
• <tbody> — groups the main body of data rows
• <tfoot> — groups footer rows (summaries, totals)

Using these sections improves accessibility and allows browsers to support scrolling the body while keeping headers fixed.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>$10.00</td>
      <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$50.00</td>
    </tr>
  </tfoot>
</table>

Merging Cells: colspan and rowspan

• colspan — merges cells horizontally across multiple columns
• rowspan — merges cells vertically across multiple rows

<td colspan="2">This cell spans two columns</td>
<td rowspan="3">This cell spans three rows</td>

The <caption> Element

A <caption> provides a title or description for the table, displayed above it:

<table>
  <caption>Monthly Sales Report — Q1 2026</caption>
  ...
</table>

The <caption> element should be the first child of <table>.

Table Styling with CSS

Modern tables benefit from CSS for visual polish:

table {
  width: 100%;
  border-collapse: collapse;
}
 
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
 
th {
  background-color: #f4f4f4;
  font-weight: bold;
}
 
tr:nth-child(even) {
  background-color: #f9f9f9;
}
 
tr:hover {
  background-color: #f0f0f0;
}

• border-collapse: collapse merges adjacent borders into single lines
• :nth-child(even) creates zebra striping for better readability
• :hover highlights rows on mouseover