Lists & data / Comparable rows
Table
Align values in columns so a reader can compare items without remembering them.
Basic usage
| Table | Statements |
|---|---|
| {$}cache_data | 13 |
| {$}items | 7 |
| {$}posts | 3 |
HTML
<div class="table-wrap">
<table class="sortable" data-dd-sortable>
<caption class="sr-only">WordPress catalog: three tables and their statement counts</caption>
<thead><tr><th scope="col" data-dd-sort="text">Table</th><th scope="col" class="num" data-dd-sort="number">Statements</th></tr></thead>
<tbody><tr><td class="mono">{$}cache_data</td><td class="num">13</td></tr>
<tr><td class="mono">{$}items</td><td class="num">7</td></tr>
<tr><td class="mono">{$}posts</td><td class="num">3</td></tr></tbody>
</table>
</div>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.table-wrap | Contains wide tables in a horizontally scrollable region. |
.num / .tight | Right-aligned numbers, or a column sized to its content. |
data-dd-sortable | Enables sorting when the optional behavior script is present. |
th[data-dd-sort="number"] | Numeric sorting. Use text for text columns. |
data-dd-value | An explicit sorting value, independent of the displayed cell. |
Usage notes
Give the table a caption or a nearby heading. Mark column headers with scope. With the optional script, activate a heading by click, Enter, or Space to sort.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.