HTML table elements

Definition

A table represents data with more than one dimension. Captions name the dataset; header and data cells express relationships.

Practical syntax

<table>
  <caption>
    Course availability
  </caption>
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Seats</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML basics</th>
      <td>12</td>
    </tr>
  </tbody>
</table>

Accessibility

Use th and scope for straightforward row and column headers. More complex tables may require id and headers, but simplifying the data often helps every reader.

The caption identifies the table’s subject and can distinguish several data sets on one page. thead, tbody, and tfoot group rows for structure and styling; they do not replace header cells. Keep header wording concise and include measurement units where values would otherwise be ambiguous.

Choosing a table

Use a table when readers compare values across rows and columns. Do not use one solely to align a form or construct a page layout. If the information is really a sequence, definition list, or set of independent cards, choose that simpler structure.

Before adding complex spanning headers, ask whether the data can be divided into two smaller tables. Simpler relationships improve scanning on every screen, not only with assistive technology.

Responsive presentation

Preserve table semantics at narrow widths. A bounded horizontal scroll container may be appropriate for genuinely wide data, but give it a visible boundary, keyboard access when required, and a cue that more columns are available. Avoid making the entire page scroll horizontally.

Transforming rows into cards can work only if each value retains its header. Repeated visible labels may be necessary; CSS-generated labels alone are not a reliable semantic replacement.

Sorting and interactive tables

A sortable header needs a real button inside the th. Communicate current sort direction with visible text or aria-sort, keep focus on the activated control, and update the row order without discarding header relationships.

For large dynamic data sets, pagination, filtering, loading, empty, and error states all need names and status communication. Native table markup is still the starting point; application grid roles add a substantially different keyboard contract.

Common misuse

Do not use tables for page layout. Avoid empty cells used only for spacing. Do not convert a table into disconnected cards unless each card repeats the headers needed to understand every value.

Verification checklist

• Read the caption and headers without the data and confirm the subject is clear.
• Navigate cells with a screen reader and verify row and column context.
• Test 320 CSS pixels and 200% zoom without page-level horizontal overflow.
• Check empty, long, localized, and high-precision values.
• Verify sorting with keyboard input and announce the active direction.
• Disable CSS and confirm the comparison relationships remain understandable.