一覧とデータ / 比較できる行
Table
値を列で揃え、項目を覚えておかなくても比較できるようにします。
基本的な使い方
| Table | SQL文 |
|---|---|
| {$}cache_data | 13 |
| {$}items | 7 |
| {$}posts | 3 |
HTML
<div class="table-wrap">
<table class="sortable" data-dd-sortable>
<caption class="sr-only">WordPressカタログ：3つのテーブルとSQL文の件数</caption>
<thead><tr><th scope="col" data-dd-sort="text">Table</th><th scope="col" class="num" data-dd-sort="number">SQL文</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>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.table-wrap | 幅広い表を、横にスクロールできる領域に収めます。 |
.num / .tight | 右揃えの数値、または内容に合わせた列幅。 |
data-dd-sortable | 任意のスクリプトがある場合に並べ替えを有効にします。 |
th[data-dd-sort="number"] | 数値として並べ替えます。文字列の列にはtextを指定します。 |
data-dd-value | 表示内容とは別に、並べ替え用の値を指定します。 |
使い方の注意
表にはキャプションか近くの見出しを付けます。列見出しにはscopeを指定します。スクリプト使用時は、見出しのクリック・Enter・Spaceで並べ替えできます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。