HTML

The HTML table element is used to create tables consisting of rows and columns, and allows you to set attributes to control the appearance of the table.

table 要素

　table要素は、表形式のデータを表示するために使用されます。この要素は、表の行や列を定義するために使用されるいくつかの別々の要素と共に使用されます。

　table要素は、<table> というタグで表されます。次に、行を定義するために使用される <tr> タグと、列を定義するために使用される <td> タグを使用して、テーブルの各行と列を作成します。

　例えば、以下のような単純なテーブルを作成することができます。

<table>
	<tr>
		<td>名前</td>
		<td>年齢</td>
		<td>国籍</td>
	</tr>
	<tr>
		<td>山田 太郎</td>
		<td>32</td>
		<td>日本</td>
	</tr>
	<tr>
		<td>Jane Doe</td>
		<td>25</td>
		<td>アメリカ</td>
	</tr>
</table>

　このテーブルには、３つの列（名前、年齢、国籍）と２つの行があります。最初の行は列の見出しを定義しており、それ以降の行にはデータが含まれています。

　このテーブルは、ブラウザによって自動的にレンダリングされ、見出しとデータが整然と並べられ、テーブルのグリッド線によって区切られています。

　テーブルのデザインを変更するには、CSSを使用することができます。例えば、以下のようにして、テーブルの背景色を変更できます。

<style>
	table {
		background-color: darkgray;
	}
	
	td {
		padding: 5px;
		border: 1px solid lightgray;
	}
</style>



<table>
	<tr>
		<td>名前</td>
		<td>年齢</td>
		<td>国籍</td>
	</tr>
	<tr>
		<td>山田 太郎</td>
		<td>32</td>
		<td>日本</td>
	</tr>
	<tr>
		<td>Jane Doe</td>
		<td>25</td>
		<td>アメリカ</td>
	</tr>
</table>

　ここでは、CSSを使用して、テーブル全体の背景色を設定し、テーブルの各セルにパディングとボーダーを追加しました。

table要素の概要

カテゴリー

フロー・コンテンツ

コンテンツ･モデル

次の順に要素を入れること。

1. 1個の caption要素（オプション）
2. 0個以上の colgroup要素
3. 1個の thead要素（オプション）
4. 1個の tfoot要素、（オプション）
5. 0個以上の tbody要素、または、1個以上の tr要素
6. 1個の tfoot要素（オプション）

※ tfoot要素は table要素の中で1つしか入れてはいけません。

利用可能な場所

フロー・コンテンツが期待される場所

開始タグ

必須

終了タグ

必須

要素固有の属性

summary

テーブルの内容の説明文を指定します

標準的なスタイル

table {
	display: table;
	border-spacing: 2px;
	border-collapse: separate;
	border-color: gray;
	border-style: outset;
}