Tables

The title of a table, which screen readers read with it. It must be the first child of the table.

<table>
  <caption>Packages and their layer</caption>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Styled by elements/tables.css, with no class: the secondary color, above the table.

One column, or several with span, inside a colgroup. Use it to set the width, background or border of a whole column.

<table>
  <colgroup><col><col style="background: var(--luz-brand-subtle)"></colgroup>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

LUZ adds no style to the col: only width, background, border and visibility apply to columns, and the right values depend on each table.

Groups the columns of a table so you can size or color them together. It goes after the caption and before the rows.

<table>
  <colgroup><col><col style="background: var(--luz-brand-subtle)"></colgroup>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

LUZ adds no style to the colgroup: only width, background, border and visibility apply to columns, and the right values depend on each table.

Data in rows and columns that people compare, never page layout. A bare table is enough; add .luz-table and wrap it in .luz-table-wrap for scrolling and stacking.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Styled by elements/tables.css, with no class, at the full width of its container. Add .luz-table and wrap it in .luz-table-wrap to let a wide table scroll; under 480px of width the table stacks into cards with data-label on each cell, and the header row stays available to screen readers.

Holds the main rows of a table, between the heading rows and the footer rows.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

No rule of its own: its rows and cells take the look of the table, from elements/tables.css.

One cell of data in a table row.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Styled by elements/tables.css, with no class: a divider under each row, and the row under the pointer takes a surface.

Rows at the bottom of a table that sum up the columns, such as totals.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>2</td></tr>
  </tfoot>
</table>

No rule of its own: its rows and cells take the look of the table, from elements/tables.css.

A cell that labels a row or a column. Set scope="col" or scope="row" so screen readers know which cells it labels.

<table>
  <thead>
    <tr><th scope="col">Package</th><th scope="col">Layer</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">tokens</th><td>1</td></tr>
    <tr><th scope="row">core</th><td>2</td></tr>
  </tbody>
</table>

Styled by elements/tables.css, with no class: a strong surface and small text, with a line under it in forced colors.

The rows at the top of a table that hold the column headings.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

No rule of its own: its rows and cells take the look of the table, from elements/tables.css.

One row of a table, holding td and th cells.

<table>
  <thead>
    <tr><th>Package</th><th>Layer</th></tr>
  </thead>
  <tbody>
    <tr><td>tokens</td><td>1</td></tr>
    <tr><td>core</td><td>2</td></tr>
  </tbody>
</table>

Styled by elements/tables.css, with no class: the row under the pointer takes a surface, and the last row has no divider.