Tables & Layout

Semantic Table Structure

• <thead>, <tbody>, <tfoot>: Semantic grouping for headers, body rows, and footers. Improves screen reader navigation, enables CSS targeting, and aids print layouts.
• <th> with scope: Use scope="col" for column headers, scope="row" for row headers — explicitly associates headers with data for accessibility.

Example: Sales Report with Merged Cells

Sales report table

<table>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col" colspan="3">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>$50K</td>
      <td>$60K</td>
      <td>$55K</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td>$65K</td>
      <td>$70K</td>
      <td>$68K</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td colspan="3">$368K</td>
    </tr>
  </tfoot>
</table>

Caption vs Deprecated summary

The summary attribute on <table> is deprecated. Use instead:

• <caption> for a visible table title
• <figure> + <figcaption> for detailed descriptions
• aria-describedby for programmatic descriptions