【HTML】table要素について

こんにちは。駆け出しエンジニアの竹前です。

ここでは、HTMLのtable要素を使った表作成について説明します。

HTMLについて勉強している方の参考になれば幸いです。

tableとは

table要素は、テーブルを作成する際に使用します。

テーブルとは、行(横方向)と列(縦方向)からできる表のことです。

テーブルの構造

テーブルは、以下の要素で構成されます。

• table要素：テーブルを作成するための要素です。
• caption要素：表にタイトルを付けるための要素です。
• tr要素：行を定義するための要素です。
• th要素：テーブルの見出しを定義するための要素です。
• td要素：テーブルのセルを定義するための要素です。

これらの要素で表を作成すると、以下のようになります。

<table>
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>

テーブル作成に使われる属性

テーブルに外枠を入れる

table要素は、デフォルトの状態ではテーブルに外枠が入りません。

HTMLだけでテーブルに外枠を入れるには、table要素にborder属性を指定します。

border属性の値は、0と1のみであり、0だと外枠なし、1だと外枠が入ります。

<table border="0">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>
<br>
<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td>データ2</td>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>

テーブルのセルを結合する

テーブルのセルを横方向に結合するには、td要素にcolspan属性を指定します。

colspan属性の値に、結合したいセルの数を設定します。

セルの結合は、colspan属性を指定したセルと、行の右方向のセルで行われます。

<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td colspan="2">データ2</td>
	</tr>
	<tr>
		<td>データ3</td>
		<td>データ4</td>
		<td>データ5</td>
	</tr>
</table>

また、セルを縦方向に結合するには、td要素にrowspan属性を指定します。

セルの結合は、rowspan属性を指定したセルと、列の下方向のセルで行われます。

<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td rowspan="2">データ2</td>
	</tr>
	<tr>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
	</tr>
</table>

colspan属性とrowspan属性は同時に指定することも可能です。

<table border="1">
	<caption>サンプル</caption>
	<tr>
		<th>見出し1</th>
		<th>見出し2</th>
		<th>見出し3</th>
	</tr>
	<tr>
		<td>データ1</td>
		<td colspan="2" rowspan="2">データ2</td>
	</tr>
	<tr>
		<td>データ3</td>
	</tr>
	<tr>
		<td>データ4</td>
		<td>データ5</td>
		<td>データ6</td>
	</tr>
</table>