![見出し画像](https://assets.st-note.com/production/uploads/images/22316840/rectangle_large_type_2_ea6dabc17bf36eb5ae3ad09802a736b3.jpeg?width=1200)
継続は力なり#37
テーブルを構築する要素の続き
セルを凍結させる
「colspan属性」は、そのセルから右側に向かって、指定した数のセルを凍結する
同様に、「rowsapn属性」は、そのセルから下方向に向かって、指定した数のセルを連結する
これに関しては文章で説明してもわかりにくいので、具体的なサンプルのソースコードで確認する
実際には「連結する」というよりも、colspan属性またはrowspan属性を指定したセルが、指定された分だけ拡張されて大きくなると言った方が正しい
セルが拡張される事によって表示される場所がなくなったセルのタグは、ソースコードから取り除く必要がある
例として、以下のHTMLのソースコードにおいて、上のテーブルではセル2とセル3の要素が取り除いている
同様に、下のテーブルではセル6とセル9の要素が取り除かれている
例
HTML
<table border="1">
<tr><th colspan="3">セル1</th></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
<tr><tb>セル7</td><tb>セル8</tb><td>セル9</td></tr>
</table>
<table border="1">
<tr><th>セル1</th><th>セル2</th><th rowspan="3">セル3</th></tr>
<tr><td>セル4</td><td>セル5</td></tr>
<tr><td>セル7</td><td>セル8</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; /*緑*/
}