Français

<table>

Presenting data in rows and columns, not for layout

— 2 min read

  • HTML
  • accessibility
  • semantics
  • tables

<table> — The data table

The <table> element represents tabular data — information organized in rows and columns with relationships between them. It is not a layout tool.

When to use it

You want to present a price comparison, a calendar, statistics, a schedule. The data has a grid structure where each cell has meaning relative to its row and column headers. If you just want to align elements visually, use CSS Grid or Flexbox.

What you gain

Accessibility: screen readers navigate cell by cell and announce associated headers. Without <table>, the user hears a flat list with no structure. With a <div> styled as a grid, no header/cell relationship is conveyed.

Code example

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Europe</th>
      <td>12 000</td>
      <td>14 500</td>
    </tr>
    <tr>
      <th scope="row">Asia</th>
      <td>9 800</td>
      <td>11 200</td>
    </tr>
  </tbody>
</table>

Further reading