Forms and Tables

Data Table Scope

Headers Describe Cells

A small table gains a caption, header cells, and body rows so each data cell has a clear meaning.

Program

Use table markup when data is genuinely tabular. Captions and header scope describe how cells relate to each other.

data_table_scope.html
Visuals: captured from real browser rendering
<table>
  <caption>Weekly checks</caption>
  <thead>
    <tr><th scope="col">Item</th><th scope="col">Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Backup</td><td>Pass</td></tr>
    <tr><td>Deploy</td><td>Ready</td></tr>
  </tbody>
</table>

  1. Create the table container.

    An empty table area appears.
    The table element starts a tabular data region.

  2. Add a table caption.

    The table displays the caption Weekly checks.
    The caption names the whole table.

  3. Add scoped column headers.

    The table has Item and Status column headers.
    scope="col" marks each header as a column header.

  4. Add the Backup row.

    The table shows the Backup row under the scoped headers.
    Body cells now line up with the header meanings.

  5. Add the Deploy row.

    The table shows Backup and Deploy rows with their statuses.
    The second row completes the small data set.
caption A caption names the table for readers before they inspect rows and columns.
scope The scope attribute tells which cells a header describes.