Table

A data table styled in place: header rule, row lines, optional stripes, hover, and cell borders, with numeric columns that line up.

Example

View Code 
<table class="table" data-striped>
    <caption>Summits</caption>
    <thead>
        <tr><th scope="col">Peak</th><th scope="col" data-numeric>Height (m)</th></tr>
    </thead>
    <tbody>
        <tr><td>Ben Nevis</td><td data-numeric>1,345</td></tr>
        <tr><td>Snowdon</td><td data-numeric>1,085</td></tr>
        <tr><td>Scafell Pike</td><td data-numeric>978</td></tr>
    </tbody>
</table>

When to use it

Rows and columns of data: prices, results, comparisons. If the content is a list of things with a picture each, that is a grid of cards, not a table.

How it works

The class goes on the table. Cells get padding from data-size and a line beneath each row; the header row gets a stronger rule. data-striped tints every other row, data-hover the row under the pointer, data-grid draws every cell. Mark a column of numbers with data-numeric on its cells and header: they align to the end with tabular figures, so the digits line up. A table that is wider than its container goes inside a scroller, which scrolls it sideways while the table itself stays a table.

<div class="scroller" role="region" aria-label="Quarterly results" tabindex="0">
    <table class="table" data-size="sm" data-grid>
        <caption>Quarterly results</caption>
        <thead><tr><th scope="col">Region</th><th scope="col" data-numeric>Q1</th><th scope="col" data-numeric>Q2</th></tr></thead>
        <tbody><tr><th scope="row">North</th><td data-numeric>120</td><td data-numeric>132</td></tr></tbody>
    </table>
</div>

Accessibility

A table needs a name: a caption, or aria-label or aria-labelledby on the element. Header cells carry scope. Yeti never turns a table into stacked cards at narrow widths, because that breaks the relationships a screen reader depends on; use a scroller and keep the table a table.

Attributes

Attribute Type Values Default Description
data-size enum sm, md, lg md Cell padding and text size; sm is the compact table.
data-striped boolean Tint every other body row.
data-hover boolean Tint the row under the pointer.
data-grid boolean Borders around every cell instead of lines between rows.

Markers

Attributes that descendants carry, not the root.

Attribute Type Values On Description
data-numeric boolean td, th A cell of numbers: end-aligned with tabular figures.

Children

  • > caption: 0 to 1. The table's title.
  • > thead: 0 to 1. The header row.
  • > tbody: at least 1. The rows.
  • [data-numeric]: any number. A cell (or header cell) of numbers: end-aligned with tabular figures.

Tokens

Token Description
--yeti-table-stripe Fill of even rows with data-striped.
--yeti-table-border Row and cell borders.
--yeti-color-border-strong The rule under the header.
--yeti-text-md Text size when data-size is absent.
--yeti-space-sm The space step when data-size is absent; a cell's inline padding follows it.
--yeti-weight-strong Weight of the caption and of header cells.
--yeti-border-width Width of the row rules, and of every cell border with data-grid.
--yeti-color-surface-sunken Background of a row under the pointer with data-hover.
Internal tokens (may change between minor versions) - `--_yeti-size-text` - `--_yeti-size-space`

Accessibility

  • Give the table a caption, or aria-label / aria-labelledby. Header cells carry scope="col" or scope="row". A table wider than its container goes inside a scroller with tabindex="0" and a label; the table itself never changes shape, so it stays a table for assistive tech.

Browser support

  • Used without guards: logical properties, font-variant-numeric
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.