table タグエレメント

　table タグエレメントは、表を作成する HTML タグエレメントです。
　表の作成には主に、table タグエレメントと <tr>, <td>, <th> エレメントを使います。

<table>
	<tr><td>キリン</td><td>首が長い</td></tr>
	<tr><td>ゾウ</td><td>鼻が長い</td></tr>
	<tr><td>ライオン</td><td>百獣の王</td></tr>
</table>

　表にはヘッダーとデータ部分、フッターを加えることで一覧をカテゴリーごとに分けることができます。そのためには、<thead>, <tbody>, <tfoot> を利用します。

　その表に <caption> エレメントによって見出しを加えることができます。

　<colgroup>, <col> によって表の列ごとにスタイルや操作を変更することができます。

<tr>、<td>, <th>

　<table> 内で一行ごとに　<tr> を定義します。
　その中に <td> または <th> を項目やデータを入れるセルとして作成します。これらのタグは行方向（横方向）に並びます。 また これらのタグは <tr> の子エレメントとして作成しなければ行列のある表として成り立ちません。

　詳しくは、<tr> はtr タグエレメントを、<td>、<th> はtd, th タグエレメントを参照してください。

<colgroup>,<col>

　colgroup, col タグエレメントは、table エレメントの列ごとにスタイルシートを反映させることができる HTML タグエレメントです。 列ごとに JavaScript による操作も行えるようにすることができます。
　必ず、<caption> の後、<tr>、<th>、<thead>、<tfoot>、<tbody>の前に編集しなければなりません。

　詳しくは colgroup, col タグエレメント を参照してください。

<table>
	<colgroup>
		<col span="1" style="width:5em;background-color: #0cc4f7">
		<col span="1" style="background-color: #e8faff">
	</colgroup>
	<tr><th>項目名</th><th>概要</th></tr>
	<tr><td>example</td><td>例えばを意味</td></tr>
	<tr><td>本題</td><td>本題の説明は必要</td></tr>
	<tr><td>その他</td><td>他のはなし</td></tr>
</table>

<caption>

　<caption> エレメントは、表の見出しや説明文を作成するための HTML タグエレメントです。詳しくはcaption タグエレメントを参照してください。

<table>
	<caption class="example">項目名一覧</caption>
	<tr><th>項目名</th><th>概要</th><tr>
...
</table>

<thead>, <tbody>, <tfoot>

　<table> を、ヘッダ、フッタ、ボディとして明確に分けることができます。
　<thead> や <tfoot> を使用すると必ず <tbody> も使用しなければなりません。
　詳しくはthead, tbody, tfoot タグエレメントを参照してください。

<table>
	<thead>
		<tr><th>項目名</th><th>概要</th></tr>
	</thead>
	<tbody>
		<tr><td>example</td><td>例えばを意味</td></tr>
		<tr><td>本題</td><td>本題の説明は必要</td></tr>
		<tr><td>その他</td><td>他のはなし</td></tr>
	</tbody>
	<tfoot>
		<tr><th colspan="2">この一覧は例です</th></tr>
	</tfoot>
</table>

JavaScript

　<table> の定義に関しては HTMLTableElement を参照してください。

関連（Related）