前回ではtable要素が“表”、tr要素が“行”、td要素が“セル(データ)”、th要素が“見出し”をあらわすと解説しました。
今回は行のグループ化とセルの連結を解説します。
 

行をグループ化したい

thead要素、tbody要素、tfoot要素を使って表組みの横方向の並び(行)をヘッダ、ボディ(本体)、フッターという構造にグループ分けします。

<table border=”1″>
<thead>
<tr><th>店舗</th><th>住所</th><th>営業時間</th></tr>
</thead>
<tbody>
<tr><td>甲店</td><td>池袋</td><td>10時~8時</td></tr>
<tr><td>乙店</td><td>新宿</td><td>10時~8時</td></tr>
<tr><td>丙店</td><td>渋谷</td><td>10時~8時</td></tr>
</tbody>
<tfoot>
<tr><td colspan=”3″>2018年1月現在</td></tr>
</tfoot>
</table>
 

下のようになります。
 

店舗 住所 営業時間
甲店 池袋 10時~8時
乙店 新宿 10時~8時
丙店 渋谷 10時~8時
2018年1月現在

 

セルを連結したい

セルを縦方向や横方向に連結してい場合は「rowspan=””」「 colspan=””」を使います。


 
th要素、td要素にrowspan要素を指定するとそのセルから指定された数だけ縦方向に連結され1つのセルとして表示されます。また、colspan要素だと横方向に連結されます。