HTML

Lesson 09

Tables for tabular data

Use table markup for data grids so headers and cells keep their relationships.

Good Code

metrics-table.html
<table>
  <!-- Caption and scopes preserve header-cell relationships. -->
  <caption>Pull request review times</caption>
  <thead>
    <tr>
      <th scope="col">Team</th>
      <th scope="col">Median time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Frontend</th>
      <td>1.2 days</td>
    </tr>
  </tbody>
</table>

Bad Code

metrics-table.html
<div class="table">
  <!-- CSS can make divs look tabular but cannot create table semantics. -->
  <div class="row header">
    <div>Team</div>
    <div>Median time</div>
  </div>
  <div class="row">
    <div>Frontend</div>
    <div>1.2 days</div>
  </div>
</div>

Review Notes

What to review

Good Code

The good version preserves the relationship between headers and values, and gives the table a caption that explains the data.

Bad Code

The bad version may look like a table, but the data relationships only exist in CSS and visual position.

Takeaways

  • When content is rows and columns of data, prefer table, caption, th, and scope.