表組み（table）とは？
表組みとは、行（横）と列（縦）を使用して情報の整理を行い、表示させる為の構造です。
料金表や比較表など、ユーザーが一目で分かりやすい形式に表示させる出来ます。
表組みの各要素
表組みには、セットで使用する要素が存在します。
役割を含めて載せていきます。
table
表全体を包む要素です。
「これは表組みですよ！」とブラウザや検索エンジンに伝えてくれます。
<table>…</table>
tr（Table Row）
行（横）を表す要素です。
tableの直下、またはこの後に載せている thead / tbody / tfootの直下に記述します。
<tr>…</tr>
th（Table Header）
見出しセルを表す要素です。
この後に載せている「scope属性」を組合せでアクセシビリティが向上します。
<th>これは見出しセルを表す要素</th>
td（Table Data）
データセルを表す要素です。
1000円や100Gなど、表組みに載せたい情報を記述する部分です。
<td>これはデータセルを表す要素</td>
表組みの組合せ例
<table>
<tr>
<th>これは見出しセルを表す要素</th>
<th>これは見出しセルを表す要素</th>
</tr>
<tr>
<td>これはデータセルを表す要素</td>
<td>これはデータセルを表す要素</td>
</tr>
</table>
scope属性でアクセシビリティ向上
th要素に「scope属性」を組合せすることで、ウェブアクセシビリティが向上します。
列・行の2種類が存在します。
col（列の見出し）
列の見出しをスクリーンリーダーに伝えるには「col」を指定します。
<th scope = “col” >これは列の見出しを伝える指定方法</th>
row（行の見出し）
行の見出しをスクリーンリーダーに伝えるには「row」を指定します。
<th scope = “row” >これは行の見出しを伝える指定方法</th>
caption要素でアクセシビリティ向上
table要素の直下に「caption要素」を記述することで、ブラウザや検索エンジンに表の内容を一言で説明することが出来、アクセシビリティ・SEO共に向上します。
<table>
<caption>アクセシビリティ・SEO向上。</caption>
</table>
意味分けでアクセシビリティ向上
これまでの表組みに関する要素で問題なく記述することが出来ますが、さらにアクセシビリティ向上やSEO対策、CSSの操作向上を目指すのであれば以下の意味分けが最適です。
thead（表の見出し）
表見出しの意味分けをする際に使用します。
<thead>…</thead>
tbody（表のメインデータ）
表メインデータの意味分けをする際に使用します。
<tbody>…</tbody>
tfoot（表の合計・補足）
表合計・補足の意味分けをする際に使用します。
<tfoot>…</tfoot>
意味分けを記述した表組みの組合せ例
<table>
<thead>
<tr>
<th>これは見出しセルを表す要素</th>
<th>これは見出しセルを表す要素</th>
</tr>
<thead>
<tbody>
<tr>
<td>これはデータセルを表す要素</td>
<td>これはデータセルを表す要素</td>
</tr>
<tbody>
<tfoot>
<tr>
<td>これはデータセルを表す要素</td>
<td>これはデータセルを表す要素</td>
</tr>
</tfoot>
</table>
セルを結合させる属性
縦・横にセルを結合させることが出来る属性を載せています。
共通して入力する数字は “何セル分結合するのか？” となっています。
また組み合わせる要素は「td」となります。
colspan（横に結合）
横にセルを結合させる時に使用します。
例題は横に2セル分を結合しています。
<td colspan = “2”>横に2セル分結合</td>
rowspan（縦に結合）
縦にセルを結合させる時に使用します。
例題は縦に2セル分を結合しています。
<td rowspan = “2”>縦に2セル分結合</td>
表組みのNG
表組みをする際に、NGな記述方法が存在します。
以下にNG例を載せています。
tr直下に th / td 以外の記述
ブロック要素などの<div>や<p>などをtr直下に記述することはNGです。
必ず、th / td を記述してあげましょう。
見出しにtdの記述
thの代わりにtdを見出しとして記述することはNGです。
必ず、th を記述してあげましょう。
コメント