HTML <table> element

The <table> element represents tabular data. It is used when information is best understood as rows and columns, with cells that gain meaning from their position in that grid.

Good examples include timetables, price comparisons, measurements, results, specifications, financial figures, schedules, and any data where the row and column relationship matters.

A table is not a general layout tool. In the early web, tables were often used to arrange page design, but that is not their real purpose. CSS layout is the proper tool for page layout. Tables are for data that is genuinely tabular.

A simple table usually contains rows written with <tr>. Inside those rows are cells, usually <th> for header cells and <td> for ordinary data cells.

Optional parts have a defined order: a <caption> first, then any <colgroup> elements, a <thead>, the body rows, and finally a <tfoot>. Body rows can be grouped in one or more <tbody> elements. The example below uses explicit header and body groups.

Use <th> for headings and scope="col" or scope="row" to identify the direction they label. A caption names the table; it does not replace cell headings. For complicated header relationships, cells can refer to header IDs with headers. Borders, spacing, and colours belong in CSS.

Attributes: GLOBALS.

Typical layout:
<table>
  <caption>Workshop prices</caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Flex</th>
      <td>€6</td>
    </tr>
  </tbody>
</table>

Visual representation: