基本的な表組みはtable要素,tr要素,td要素そして見出しにはth要素で構成されます。20年以上前は表組み(テーブル)を利用してコンテンツのレイアウトを請け負っていた時期もありましたが、HTML5ではテーブルをレイアウトのために利用することを認めていません。レイアウトにはCSSを使うことをお薦めします。

table要素

その範囲がtable=表であることをあらわします。表を構成する各要素の最初と最後に配置します

tr要素

trはtable row (rowとは行)なので行をあらわします。横一列分の最初と最後に配置します。

td要素

tdはtable dataの略で表に含まれる個々のセルをあらわします。セルに入るデータをこの要素の中に記述します。

th要素

thのhはヘッダー・セル つまり、行や列の見出しをあらわします。見出しに指定されたテキストは太字でセンタリングされて表示されます。

 

<table border=”1″>
<tr><td>1行目1列</td><td>1行目2列</td><td>1行目3列</td></tr>
<tr><td>2行目1列</td><td>2行目2列</td><td>2行目3列</td></tr>
<tr><td>3行目1列</td><td>3行目2列</td><td>3行目3列</td></tr>
</table>

下のようになります。

1行目1列 1行目2列 1行目3列
2行目1列 2行目2列 2行目3列
3行目1列 3行目2列 3行目3列

<table border=”1″>
<tr><th>1行目太字</th><th>1行目太字</th><th>1行目太字</th></tr>
<tr><td>2行目1列</td><td>2行目2列</td><td>2行目3列</td></tr>
<tr><td>3行目1列</td><td>3行目2列</td><td>3行目3列</td></tr>
</table>

下のようになります。

1行目太字 1行目太字 1行目太字
2行目1列 2行目2列 2行目3列
3行目1列 3行目2列 3行目3列