Tables - Intelligence Community Design System

Show navigation section

Introduction

Use HTML table elements only for tabular data.

For ambiguous data or when there are multiple columns, thescope attribute can be included in the<th> and set torow orcol to denote that a header applies to the entire row or column, respectively.

Use a<caption> element to describe, in text, what the table shows. Some apps and services may auto-generate a summary description of data. You can hide this using CSS if you don't want it visible to sighted users.

The HTML example for a table with header cells in the top row and first column:

<table>
  <caption>
    Example table with four columns and three rows
  </caption>
  <tr>
    <th>Table</th>
    <th scope="col">Column Header A</th>
    <th scope="col">Column Header B</th>
    <th scope="col">Column Header C</th>
  </tr>
  <tr>
    <th scope="row">Row Header 1</th>
    <td>data cell A1</td>
    <td>data cell A2</td>
    <td>data cell A3</td>
  </tr>
  <tr>
    <th scope="row">Row Header 2</th>
    <td>data cell B1</td>
    <td>data cell B2</td>
    <td>data cell B3</td>
  </tr>
</table>

Example

Example table with four columns and three rows
Table	Column Header A	Column Header B	Column Header C
Row Header 1	data cell A1	data cell A2	data cell A3
Row Header 2	data cell B1	data cell B2	data cell B3

When it goes wrong

If no table HTML elements were used, then there would be no structure or definition of the table available to assistive technologies.

Even missing table headers in a<table> means assistive technologies can't associate data cells with the headers. Visual cues aren't enough to make a table inclusive.

Historically, tables were incorrectly used for layouts, which would give assistive technology users a confusing experience. Don't use tables for any layout needs.

Many screen readers will summarise the size of the table when it arrives at one, so our table example would say “Table with 4 columns and 3 rows”.

Last reviewed 18 April 2024 .