HTML tables

The Citead team, updated

In short. HTML tables use structural markup to identify headers and data cells, with scope or headers attributes expressing their relationships.

Definition: HTML tables represent data whose meaning depends on relationships between rows and columns. The <table> element contains cells, with <th> identifying header cells and <td> identifying data cells.

Key facts

  • The WHATWG HTML Standard, updated 16 October 2026, defines a table as a grid whose cells cover it completely without overlap.
  • W3C's Tables with One Header explains that scope="col" associates column headers with their data cells when the data is ambiguous.
  • W3C's multi-level headers tutorial uses unique header identifiers and a cell's headers attribute to express complex associations.
  • W3C's Caption & Summary tutorial explains that most screen readers announce captions, helping users identify a table and its subject.

How does a simple table express relationships?

The HTML Standard's table elements give each part a meaning. A <tr> represents a row. Header cells use <th>; data cells use <td>. A <thead> groups rows containing column labels and any accompanying non-header cells, while <tbody> groups rows containing the body of data.

W3C's ambiguous-data example shows why explicit associations matter: a person's last name, first name and city can resemble one another. This shortened version retains the tutorial's header row and first data row:

<table>
  <caption>Teddy bear collectors:</caption>
  <tr>
    <th scope="col">Last Name</th>
    <th scope="col">First Name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Imari</td>
    <td>Henry</td>
  </tr>
</table>

Here, scope="col" establishes that “Henry” belongs to “City”. For a header labelling a row, scope="row" expresses the horizontal relationship. The standard also defines rowgroup and colgroup values for headers applying to groups of rows or columns.

When does a cell need the headers attribute?

W3C's multi-level tables guidance covers structures where a simple horizontal or vertical association is insufficient. Its examples include column headings that change partway through a table and data cells associated with several header levels.

Each header receives a document-wide unique id. Each data cell lists the applicable identifiers in its headers attribute, separated by spaces. The HTML Standard requires those references to identify <th> elements in the same table.

The W3C tutorial's supplier-contact example associates “James Phillips” with the company header co1 and the “Contact” header c1 through headers="co1 c1". The same tutorial recommends considering smaller tables when a complex structure can be split into simpler ones.

How can a website check its tables?

An inspection based on W3C's Tables Tutorial checks that labels use <th>, values use <td>, and header associations match the data. Screen readers use these relationships to announce headers while reading individual cells. For page layout, the same tutorial recommends CSS, the language used to control visual presentation.

The tutorial also warns that conversion between document formats often loses table markup. A table imported into a website therefore needs its structural markup checked after conversion. Many content management systems provide header-cell controls without requiring manual code editing.

W3C's caption guidance adds a context check. A <caption> belongs directly inside <table> and provides a short heading for its content. Complex tables may also need a summary explaining their organization, such as which columns contain particular information. When both are present, the summary should add information beyond the caption. The tutorial shows an explanatory summary inside <caption>, making it available to visual readers as well.

FAQ

Can bold text serve as a table header?

Use <th> for a header cell. W3C's Tables Tutorial requires structural markup to distinguish headers from data cells and explains that visual cues alone are insufficient.

Does every simple table need scope attributes?

W3C's single-header tutorial accepts small, straightforward tables with unambiguous data using <th> alone. It calls for scope when data is ambiguous or the table is larger.

What should a table caption say?

Give the table a short heading describing its contents. W3C's caption example uses “Concerts” for a table containing dates, events and venues.

Sources

  1. WHATWG, "HTML Standard: Tabular data", updated 16 October 2026
  2. W3C WAI, "Tables with One Header", updated 27 July 2019
  3. W3C WAI, "Tables with Multi-Level Headers", updated 27 July 2019
  4. W3C WAI, "Caption & Summary", updated 27 July 2019
  5. W3C WAI, "Tables Tutorial", updated 16 February 2023

Check how a page reads to answer engines. Open the GEO score analyzer

Test a page and see what to fix first

The analysis usually takes less than 10 seconds and needs no account.

400,000+ pages scored in the public benchmark