Tables

Lists are good for reading items one at a time. When every item has the same kinds of information, such as a time and topic, rows and columns make comparison easier. Use an HTML table for this tabular data.

Rows contain cells

table wraps the table, tr is a table row, th is a header cell and td is a data cell:

<table>
  <caption>Saturday schedule</caption>
  <thead>
    <tr><th scope="col">Time</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><td>10:00</td><td>Free reading</td></tr>
    <tr><td>14:00</td><td>Discussion</td></tr>
  </tbody>
</table>

Place cells in the same column order in every row. thead groups header rows, tbody groups data rows and caption names the whole table. Write caption once at the beginning of table.

Headers convey relationships

th is a header, not just bold text. scope="col" associates it with its column. A header naming a data row can use scope="row". These relationships help assistive technology describe data. Adding strong inside td does not give that cell header semantics.

Spanning cells

colspan="2" makes one cell occupy two columns; rowspan="2" makes it occupy two rows. Recheck the occupied grid positions after merging cells to avoid misalignment. Begin with simple tables and merge only when the data calls for it.

The second Lab example adds tfoot, a group for summary rows, with a note spanning two columns. A native table may have no visible grid borders; that does not mean it failed to render. CSS will later add borders and spacing. Use tables for data, not to lay out an entire page in columns.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <h1>Reading day</h1>
  <table>
    <caption>Saturday schedule</caption>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Topic</th></tr>
    </thead>
    <tbody>
      <tr><td>10:00</td><td>Free reading</td></tr>
      <tr><td>14:00</td><td>Discussion</td></tr>
    </tbody>
  </table>
</body>
</html>