Tables

Overview

Tables display data in rows and columns, like a spreadsheet. The <table> element contains rows (<tr>), which contain header cells (<th>) and data cells (<td>). Tables should be used for genuine tabular data, not for page layout, which is a common historical misuse.

Syntax / Usage

Group header rows in <thead> and body rows in <tbody>. Header cells use <th> so browsers and screen readers know they label the data.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ada</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <td>Grace</td>
      <td>Manager</td>
    </tr>
  </tbody>
</table>

Examples

A pricing table with a caption for context:

<table>
  <caption>Monthly plans</caption>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Free</td><td>$0</td></tr>
    <tr><td>Pro</td><td>$12</td></tr>
  </tbody>
</table>

Merging cells with colspan:

<tr>
  <td colspan="2">Total</td>
</tr>

Common Mistakes

• Using tables for page layout instead of CSS
• Using <td> for header cells instead of <th>, hurting accessibility
• Forgetting <tr> rows, placing cells directly inside <table>
• Mismatched colspan/rowspan values that break the grid alignment
• Omitting a <caption> or headers, leaving the data hard to interpret

See Also

html-elements-and-tags html-semantic-elements html-accessibility-basics