Markup CityISSUE #19 of 39

tables · rows · cells · headers

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysTables show tabular data with <table>, rows <tr>, header cells <th>, and data cells <td>.

Use a <table> for genuine grid data — never for page layout (that's CSS's job). Rows are <tr>; header cells <th> (bold, used by screen readers as column labels); data cells <td>.

Group with <thead>, <tbody>, <tfoot>, and add a <caption> for a title. Span cells with colspan/rowspan when data needs to merge.

Power-ups you unlock

<table> → <tr> rows → <th>/<td> cells
<th> = header cell (screen readers use it as a label)
Group with <thead>/<tbody>/<tfoot>, label with <caption>
colspan/rowspan merge cells — never use tables for layout

The Unclosed Tag attacks — common mistakes

Using tables to lay out a page (use CSS grid/flex)
All <td> and no <th> — screen readers lose the column labels
Mismatched colspan counts → cells overflow the grid

Boss battleAdd a third row to the table, then make one cell span two columns with colspan="2".

Example code

<!doctype html>
<html><head><meta charset="utf-8">
<style>table{border-collapse:collapse}th,td{border:1px solid #888;padding:6px 12px}</style>
</head>
<body>
  <table>
    <caption>scores</caption>
    <thead><tr><th>player</th><th>points</th></tr></thead>
    <tbody>
      <tr><td>alice</td><td>42</td></tr>
      <tr><td>bob</td><td>37</td></tr>
    </tbody>
  </table>
</body></html>

▶ Open the interactive comic issue

‹ Page Titles · What The Tab Says Lists · Ul · Ol · Dl ›