DATA

Tables

Present tabular data with headers that explain each column.

After this lessonBuild accessible thead/tbody table structure.

How it works

HTML tables are for data with row-and-column relationships. Use th cells for headers and separate the header and body with thead and tbody.

Do not use tables as a general page-layout system. On small screens, wrap wide tables in a horizontally scrollable container.

REAL WORK

Display inventory, OEE or supplier comparison results with clear column headers.

SYNTAX

The pattern

<table>
  <thead><tr><th>SKU</th><th>Qty</th></tr></thead>
  <tbody><tr><td>A-01</td><td>12</td></tr></tbody>
</table>

Example

<table>
  <thead><tr><th>Line</th><th>OEE</th></tr></thead>
  <tbody><tr><td>L1</td><td>82%</td></tr><tr><td>L2</td><td>91%</td></tr></tbody>
</table>

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<table>
  <thead><tr><th>Line</th><th>OEE</th></tr></thead>
  <tbody><tr><td>L1</td><td>82%</td></tr><tr><td>L2</td><td>91%</td></tr></tbody>
</table>

QUICK CHECK

Which element defines a table header cell?

Progress is stored only in this browser. No account required.