Table

Default

A caption, a head row of mono labels on the strong hairline, body rows on the subtle one. Everything else is the browser's own table layout, which is better at sizing columns than any set of widths we could write.

<div class="cf-table__scroll" tabindex="0" role="region" aria-labelledby="tbl-versatz">
  <table class="cf-table">
    <caption id="tbl-versatz">Typischer Versatz und was er kostet</caption>
    <thead>
      <tr>
        <th scope="col">Betriebsart</th>
        <th scope="col">Versatz</th>
        <th scope="col">Geeignet für</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Batch</td><td>1–24 h</td><td>Berichte, Abrechnung, Trends</td></tr>
    </tbody>
  </table>
</div>

Row headers and numeric columns

When the first cell of a row names what the rest of the row is about, it is a header — <th scope="row">, not a <td>. It is drawn in the body face at body size rather than as a mono label: a row header is the row's subject, which is content, and the mono face in this system marks the things that are not prose.

Any column of figures takes .cf-table__num on the head cell and on every body cell in it. That right-aligns the column so the digits stack, which is the whole reason the table sets tabular figures in the first place.

<tr>
  <th scope="row">Presse 04</th>
  <td>OPC UA</td>
  <td class="cf-table__num">1.284</td>
</tr>

When it is wider than its column

A table is the one block in this system that legitimately outgrows the measure, so it gets a scroll box rather than permission to widen the page. The demo below is capped at 22 rem to force the state at any window size — click it or tab to it, then use the arrow keys.

What stops it compressing instead of overflowing is that the column labels do not wrap. Without that floor a narrow table simply wraps every cell to three lines, stays inside its box, and the scroll it is wrapped in never engages — the mechanism would be present and permanently unused.

The cost is honest and worth stating: the box is a tab stop even on a wide screen where it does not scroll, so a keyboard user lands once on something that does nothing. The alternative is a script that measures overflow on load and on resize and adds the attribute conditionally, and this system does not spend a shipping script on a convenience. One redundant tab stop beats one unreachable column.

There is no card-per-row transformation at small widths. Turning rows into stacked cards breaks the one thing a table is for — comparing a column down the page — and a display: block table drops the row and column semantics that scope was there to provide. The narrow answer is the same table, scrolled.

On a dark surface

No modifier. Every colour in the component is a semantic token, so the table inverts by being put somewhere inverted — data-theme="inverse", the footer, or the consent dialog, which rebinds the same four rungs itself.

The first real consumer is the cookie inventory the site owes under TDDDG § 25 and Art. 13 DSGVO — the list of what is stored, by whom, why and for how long. → Consent · The inventory

Anatomy

.cf-prose table is the same component under another name: an article's tables are written as bare elements, so every selector above names .cf-prose alongside .cf-table rather than being declared a second time. There is one drawing, and it cannot drift. → Article & Prose

Accessibility

• Every header cell carries an explicit scope. It is what tells assistive technology whether the cell heads a column or a row, and a table where the association has to be guessed from position is a table read out as a list of unlabelled values.
• A <caption> on every table, and it is the first child of <table> — that placement is required, not stylistic.
• The scroll box is focusable, has role="region", and takes its name from the caption. SC 2.1.1, level A.
• <thead> and <tbody> add no accessibility semantics of their own — they are here for printing and for the head rule. scope is what does the work.
• No headers/id pairing anywhere. It exists for tables with several header levels, and a table that needs it is a table that should have been split. If two header rows seem necessary, the answer is two tables.
• Nothing is conveyed by colour or by weight alone: the head is a different face and sits on a heavier rule, and the row header is distinguished by size and weight as well as position.
• Contrast, measured in the browser against CF-Grau — the dark end of the page wash, so these are the floors and every one of them improves as the wash lightens: body ink and mono head 13.5:1, caption --text-secondary 5.9:1. On the inverse surface the same three are 21:1, 21:1 and 10.5:1. The row rule is a separator rather than a UI contour: the structure is carried by the markup, not by the hairline, so it is not load-bearing for the 3:1 floor.
• No layout tables. If it is not data, it is a grid.

Rules