継続は力なり＃３７

2020年4月6日 13:47

テーブルを構築する要素の続き

セルを凍結させる

「colspan属性」は、そのセルから右側に向かって、指定した数のセルを凍結する
同様に、「rowsapn属性」は、そのセルから下方向に向かって、指定した数のセルを連結する
これに関しては文章で説明してもわかりにくいので、具体的なサンプルのソースコードで確認する
実際には「連結する」というよりも、colspan属性またはrowspan属性を指定したセルが、指定された分だけ拡張されて大きくなると言った方が正しい
セルが拡張される事によって表示される場所がなくなったセルのタグは、ソースコードから取り除く必要がある
例として、以下のHTMLのソースコードにおいて、上のテーブルではセル２とセル３の要素が取り除いている
同様に、下のテーブルではセル６とセル９の要素が取り除かれている

例

HTML

<table border="1">
<tr><th colspan="3">セル１</th></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
<tr><tb>セル７</td><tb>セル８</tb><td>セル９</td></tr>
</table>
 
<table border="1">
<tr><th>セル１</th><th>セル２</th><th rowspan="3">セル３</th></tr>
<tr><td>セル４</td><td>セル５</td></tr>
<tr><td>セル７</td><td>セル８</td></tr>
</table>

テーブルにキャプションをつける

テーブルには、キャプション（タイトル）をつけることができる
キャプションは「caption要素」としてマークアップし、<table>〜</table>の範囲内の先頭に入れる

表の横列をグループ化する

tr要素はテーブル内の　ヘッダー / データ本体 / フッター　のいずれかとしてグループ化することができる
その際に使用するのは、「thead要素」・「tbody要素」・「tfoot要素」
これらの要素を使用する場合、HTML4の仕様では　thead要素・tfoot要素・tbody要素の順で配置する必要があった
（表のデータが極端に多い場合に、全てのデータを読み終える前の段階で、ヘッダーとフッターの位置を固定した状態で先に表示させ、その間の表の本体部分はスクロールして読み込んだ分だけ見られるようにするための仕様）
この仕様はHTML5で何度か微調整され、HTML5.2では　thead要素・tbody要素・tfoot要素の順でしか配置できない仕様となっている

例

HTML

<table border="1">
<caption>キャプション</caption>
<thead>
<tr><th>セル01</th><th>セル02</th><th>セル03</th></tr>
</thead>
<tbody id="tb1">
<tr><td>セル04</td><td>セル05</td><td>セル06</tb></tr>
<tr><tb>セル07</td><td>セル08</td><td>セル09</td></tr>
</tbody>
<tbody id="tb2">
<tr><td>セル10</td><td>セル11</td><td>セル12</td></tr>
<tr><td>セル13</td><td>セル14</td><td>セル15</td></tr>
</tbody>
<tfoot>
<tr><td>セル16</td><td>セル17</td><td>セル18</td></tr>
</tfoot>
</table>

CSS

thead th, tfoot td {
   color: #fff;
   background: #bbb;   /*グレー*/
}
tbody#tb1 tb {
   color: #fff;
   background: #fc0;   /*黄色*/
}
tbody#tb2 td {
   color: #fff;
   background: #390;   /*緑*/
}