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

テーブル要素とは

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

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

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

lt;table>
<tr><th>列1</th><th>列2</th><th>列3</th></tr>
<tr><td>列1行1</td><td>列2行1</td><td>列3行1</td></tr>
<tr><td>列1行2</td><td>列2行2</td><td>列3行2</td></tr>
<tr><td>列1行3</td><td>列2行3</td><td>列3行3</td></tr>
</table>

実行結果

テーブル項目の結合

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

lt;table>
<tr><th>列1</th><th>列2</th><th>列3</th></tr>
<tr><td colspan="2">列1・2行1</td><td>列3行1</td></tr>
<tr><td rowspan="3">列1行2~4</td><td>列2行2</td><td>列3行2</td></tr>
<tr><td>列2行3</td><td>列3行3</td></tr>
<tr><td>列2行4</td><td>列3行4</td></tr>
</table>

実行結果

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

B!

見出し要素(h1~h6)の使い方

リスト要素のマークアップ

HTMLの記事

HTMLとは

HTML文書の記述ルールと作法

セクションとアウトライン

リスト要素のマークアップ

コンテンツモデルとコンテキスト

body要素内をマークアップする流れ

HTMLの記事一覧HOME