Data Tables Pattern

Core Attributes

Tables should not be used for layout. For data, they are excellent if semantic.

1. <caption>: A clear title for the table.
2. <th>: Table headers.
3. scope: Explicitly associates headers with rows or columns.

Example

<table>
  <caption>Employee Schedule</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
      <th scope="col">Shift</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Sarah</th>
      <td>Manager</td>
      <td>Morning</td>
    </tr>
  </tbody>
</table>

Using th scope="row" allows a screen reader to announce "Name: Sarah, Role: Manager" as the user navigates across the row.