Tables

lesson 3-2 · ~7 min · 8/30

Tables

Working engineers ship tables constantly — admin dashboards, pricing pages, and reports are all rows and columns — and a screen reader can only read a data grid sensibly when it is marked up as a real table. Tables are for tabular data: rows and columns where the grid itself has meaning, like prices or scores. (They were once abused for page layout. Flexbox and grid replaced that, as you will see in units 6 and 7.)

<table>
  <thead>
    <tr><th>Plan</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Plus</td><td>$8/mo</td></tr>
    <tr><td>Premium</td><td>$20/mo</td></tr>
  </tbody>
</table>

tr is a table row.
th is a header cell. It renders bold and, more importantly, screen readers announce it as the header for its column.
td is a data cell.
thead and tbody group the header row apart from the data rows.

Quiz

Which element marks a header cell inside a row?

Code exercise · javascript

Real apps generate table rows from arrays constantly. Write row(cells, isHeader): wrap each entry in <th> when isHeader is true (otherwise <td>), then wrap the whole thing in <tr>.

Build the plans table live. Inside the <table>, add: 1) a thead with one row of two header cells, Plan and Price, 2) a tbody with two rows: Plus / $8 per month and Premium / $20 per month. Remember: cells live inside tr rows, and header cells are th.

Problem

Every cell in a table, header or data, must live directly inside which element?