<table>

<table> represents data with relationships across rows and columns. Use it for a price comparison, schedule, or report. Use Grid for page layout: putting unrelated content in table cells gives readers misleading relationships.

A complete data table

This table names the data and associates each count with both its workshop and the “Places booked” column. The borders are optional presentation; the relationships come from the HTML.

<table>
  <caption>
    Workshop registrations
  </caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Places booked</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML basics</th>
      <td class="amount">12</td>
    </tr>
    <tr>
      <th scope="row">CSS layout</th>
      <td class="amount">8</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td class="amount">20</td>
    </tr>
  </tfoot>
</table>

/* Presentation: these styles make the table easier to read. */
table {
  border-collapse: collapse;
}
caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
th,
td {
  border: 1px solid #94a3b8;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Structure and accessibility

Write children in this order: optional caption, column groups, optional thead, body rows or tbody groups, then optional tfoot. Rows contain th or td cells. Do not mix direct rows with explicit body groups.

<thead> groups rows; it does not turn ordinary <td> cells into headers. Use <th scope="col"> and <th scope="row"> in a simple table. For genuinely complex spanning headers, explicit id/headers associations may be needed. Simplifying the table is often easier to read.

Adapt the example

Add a new workshop row and update the total. CSS does not calculate totals. In a wide table, allow horizontal scrolling inside a labeled wrapper rather than shrinking the text or letting the whole page overflow. Keep header information available when scrolling.

Avoid obsolete border, cellpadding, cellspacing, and summary attributes. Use CSS for appearance and a caption or nearby explanation for context.

Sources and browser support

MDN: table describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.