Table

A plain <table> is a log-style table: a solid head, hairline rows and room for chips. Three attributes on cells cover the usual needs.

Basic

<table>
  <caption>atlas build, 2 October</caption>
  <thead><tr><th>Entry</th><th>Kind</th><th>Record</th><th>Time</th></tr></thead>
  <tbody>
    <tr><td data-mono>00001</td><td><mark data-tone="soft">page</mark></td><td>Rendered <code>guide/index.md</code></td><td data-mono data-muted>14 ms</td></tr>
    <tr data-state="bad"><td data-mono>00002</td><td><mark data-tone="stop">missing</mark></td><td>Link not found: <code>/guide/old</code></td><td data-mono data-muted>—</td></tr>
    <tr><td data-mono>00003</td><td><mark data-tone="earth">result</mark></td><td>182 built, 0 failed</td><td data-mono data-muted>1.94 s</td></tr>
  </tbody>
</table>

The <caption> sits above the table as an uppercase label.

Notes

• td[data-mono] sets a cell in the mono face, td[data-muted] greys it, and tr[data-state="bad"] tints a whole row.
• A <mark> in a cell takes a fixed width so a column of chips lines up.
• The head is a solid dark bar, --s72-solid with its -fg text.
• Under 560px cells stay on one line and the table scrolls sideways inside its own frame, so the page never does. The caption stays pinned to the left while the rows slide past it.
• Add data-sort for sortable column heads; see Table sort.