Purpose and content model
A table expresses relationships across rows and columns. Table is the container, tr is a row, th is a header cell, and td is a data cell. Caption names the dataset. Thead, tbody, and tfoot group header, body, and footer rows. Colgroup and col describe column groups for the limited column-related operations and styling that the table model supports.
A table is not a page-layout tool. Its content follows a defined order: a caption when present, column groups, a header group, body rows or body groups, and a footer group. Browser parsers can insert a tbody or move invalid content out of a table. A DOM that differs from the source may therefore indicate invalid table structure rather than a browser defect.
Simple tables benefit from explicit scope on headers. More complex multi-level tables may need carefully designed header groups or headers attributes referring to header IDs. Before building an elaborate association scheme, consider splitting the dataset into simpler tables. A table that is hard to explain in words is often hard to navigate with assistive technology.
Syntax and working example
<table>
<caption>Weekly workshop schedule</caption>
<thead><tr><th scope="col">Day</th><th scope="col">Topic</th></tr></thead>
<tbody><tr><th scope="row">Monday</th><td>Links</td></tr>
<tr><th scope="row">Tuesday</th><td>Forms</td></tr></tbody>
</table>Supported attributes and behavior
Th supports scope, abbr, colspan, rowspan, and headers where applicable. Td supports colspan, rowspan, and headers. Scope values include row, col, rowgroup, and colgroup. Headers is a space-separated list of IDs of associated th elements. Col and colgroup use span; a colgroup with explicit col children should not simultaneously use span to describe a different grouping. Table, caption, row groups, and tr primarily use globals. Historical cellpadding, cellspacing, align, bgcolor, and similar presentational attributes should be replaced with CSS.
Another practical pattern
<table>
<caption>Quarterly sales by product</caption>
<thead><tr><th id="product" rowspan="2">Product</th><th id="q1" colspan="2">Quarter 1</th></tr>
<tr><th id="units">Units</th><th id="revenue">Revenue</th></tr></thead>
<tbody><tr><th id="book" headers="product">Book</th><td headers="book q1 units">80</td><td headers="book q1 revenue">800</td></tr></tbody>
</table>Accessibility and browser notes
Captions and header associations help readers understand a cell without seeing its position. A scrollable wrapper can preserve table semantics on small screens, but it needs discoverable keyboard scrolling when necessary. Do not shrink text until the table fits at the expense of readability. Keep unit labels and totals explicit.
Common mistakes
A bold td is still a data cell. Col styling does not behave like styling a normal parent around every cell. Mismatched spans can produce a confusing grid. Do not use empty headers where a meaningful label is available, or replace every row with display:block without checking the accessibility consequences.
Verify your implementation
Navigate the table cell by cell with a screen reader and confirm the announced headers. Validate each row's effective column count, including spans. Test narrow widths, large text, print output, and long cell values. Compare totals against source data rather than assuming valid markup establishes numerical accuracy.
Standard status and sources
Standard; browser availability must be checked independently of specification status.