テーブル要素のマークアップ

テーブル要素とは

行と列で切り分けられた２次元の表をテーブルといいます。 テーブル要素の基本的なマークアップについて学びましょう。

テーブル要素のマークアップ

全体をtable要素で、各行をtr要素で囲みます。 後は列の数だけtd要素を記入します。 題名行はtd要素ではなくth要素を使います。

lt;table>
<tr><th>列１</th><th>列２</th><th>列３</th></tr>
<tr><td>列１行１</td><td>列２行１</td><td>列３行１</td></tr>
<tr><td>列１行２</td><td>列２行２</td><td>列３行２</td></tr>
<tr><td>列１行３</td><td>列２行３</td><td>列３行３</td></tr>
</table>

実行結果

テーブル項目の結合

列や行を結合したい場合、列ならcolspan属性、行ならrowspan属性を使います。 結合元セルにspanを設定し、結合先のtd(th)要素は削除します。 下表のようにcolspanであれば右のtd要素を、rowspanであれば下のtd要素を結合分だけ削除します。

lt;table>
<tr><th>列１</th><th>列２</th><th>列３</th></tr>
<tr><td colspan="2">列１・２行１</td><td>列３行１</td></tr>
<tr><td rowspan="3">列１行２～４</td><td>列２行２</td><td>列３行２</td></tr>
<tr><td>列２行３</td><td>列３行３</td></tr>
<tr><td>列２行４</td><td>列３行４</td></tr>
</table>

実行結果

結合セルが分かりやすいよう、項目にボーダーを設定しました。列や行が結合しているのが見てとれます。