表のオプション

表題を指定する

【構文】 <caption>表題</caption>

captionタグは、tableタグとtrタグの間に記述し、表題を指定します。デフォルトは中央揃えとなります。

表の行グループを指定する

【構文】

<thead>表のヘッダー部分</thead>
<tbody>表のデータ部分</tbody>
<tfoot>表のフッター部分</tfoot>

theadは表のヘッダー部分の行(trタグ)をグループ化します。tbodyは表のデータ部分の行をグループ化します。tfootは表のフッター部分の行をグループ化します。主にCSSでデザインするときに使用されます。

表の列グループを指定する

【構文】<colgroup id=”識別名”></colgroup>

colgroupタグは、tableタグとtrタグの間に記述し、列グループを定義します。列グループを定義することにより、列ごとにCSSでデザインをすることができます。

見出しの方向を指定

【構文】

<th scope=”col”>…</th>
<th scope=”row”>…</th>

見出しセルthにscope属性をしていすると、その見出しセルが列方向(col)なのか、行方向(row)なのかを指定できます。これがあることで見た目の変化はありませんが、読み上げブラウザで読み上げる順番が考慮されます。

See the Pen
3-3
by Koji Seto (@yseseto)
on CodePen.