HTML Tables: Rows, Cells and When to Use Them

A table shows data in rows and columns. Use one when the information really is a grid, such as prices, timetables or comparisons.

index.html

HTML

<table>
  <tr>
    <td>Paperback</td>
    <td>$9</td>
  </tr>
  <tr>
    <td>Hardback</td>
    <td>$16</td>
  </tr>
</table>

table wraps the whole table.
tr is a table row.
td is a table data cell.

Each row has the same number of cells, so the columns line up.

Tables are for data, not layout

Years ago, people built whole page layouts with tables. Do not do this. A table is for data. Page layout belongs to CSS, which adapts to screen sizes. Tables used for layout are hard to read with a screen reader and hard to make responsive.

Reading order

A screen reader reads a table row by row, left to right. Keep your data in a sensible order so it still makes sense when read aloud.

warning

Using a table for side by side content

If you want two columns of text, use CSS. Use a table only when each cell is a piece of data in a grid.

In the next lesson you will add headings that tell people what each column means. Continue with Table Headers and Captions.