Tables

Tables present data in rows and columns: timetables, price lists, sports results, comparison charts. HTML tables have a clear structure of rows, header cells and data cells — and using them correctly lets screen readers announce which header each value belongs to.

Basic table structure

<table> wraps the whole table.
<tr> ("table row") holds one row.
<th> ("table header") is a heading cell — bold and centred by default.
<td> ("table data") is an ordinary cell.

Every row should have the same number of cells (unless cells span several columns — next lesson).

Adding borders and spacing with CSS

Unstyled tables have no borders. A few lines of CSS make them readable:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #b9c2d4; padding: 6px 12px; text-align: left; }
  th { background: #f4f6fa; }
  tr:nth-child(even) td { background: #fafbfd; }
</style>
<table>
  <tr><th>Item</th><th>Price</th><th>In stock</th></tr>
  <tr><td>Espresso</td><td>€1.20</td><td>Yes</td></tr>
  <tr><td>Cappuccino</td><td>€2.50</td><td>Yes</td></tr>
  <tr><td>Pastel de nata</td><td>€1.40</td><td>No</td></tr>
</table>

Result

border-collapse: collapse merges neighbouring borders into single lines. Alternating row colours ("zebra stripes") help eyes follow long rows.

Row headers and scope

Headers aren't only along the top. When the first column labels each row, make those cells <th> too, and use scope to say which direction each header applies to:

A screen reader on the "1 TB" cell can now announce "Pro, Storage, 1 TB". scope="col" means the header labels its column; scope="row" labels its row.

Captions

<caption> must be the first thing inside the table. It acts as the table's title and is announced by screen readers — the equivalent of alt text for a table.

Tables are for data, not layout

In the early web, tables were used to arrange whole page layouts into columns. That makes pages hard to use with screen readers, hard to make responsive, and hard to maintain. Use CSS (Flexbox and Grid, lesson 25) for layout, and tables only for genuinely tabular data — information you'd put in a spreadsheet.

Wide tables on small screens

Tables with many columns don't fit on phones. The simplest robust fix is to let the table scroll sideways inside a wrapper:

<style>
  .table-scroll { overflow-x: auto; max-width: 280px; border: 1px dashed #ccc; }
  .table-scroll table { border-collapse: collapse; min-width: 500px; }
  .table-scroll th, .table-scroll td { border: 1px solid #b9c2d4; padding: 6px 10px; white-space: nowrap; }
</style>
<section class="table-scroll" aria-label="Train timetable" tabindex="0">
  <table>
    <tr><th>Train</th><th>Departs</th><th>Arrives</th><th>Platform</th><th>Status</th></tr>
    <tr><td>IC 520</td><td>09:15</td><td>12:02</td><td>4</td><td>On time</td></tr>
  </table>
</section>

Result

Labelling the <section> with aria-label makes it a named region for screen readers, and tabindex="0" lets keyboard users focus it and scroll with the arrow keys.

Try it yourself

Add a row for Sunday, and a caption:

PreviousLists NextAdvanced Tables