<table> 表（テーブル）を作成する

<table>タグの説明

<table>は、セルで構成された表（テーブル）を作成する祭に使用します。テーブルは、行と列の組み合わせによって構成された「セル」を扱うワークシートのことです。エクセルなどの表計算ソフト（Spreadsheet）でお馴染みの、マトリックス状のインターフェイスを持っています。

<table>は様々な場面で用いられますが、独自の階層構造を持っているため、マークアップの腕を鍛えるには最適の材料と言えます。また、「その情報にテーブルを使うことは適切か否か」を考えることも、正しい文章構造を理解する上で重要な観点となります。

テーブルの作成は、以下の流れで行います。

1. まず<table>で表の作成を開始
2. 必要であれば<caption>を配置
3. <tr>で表の行（横軸）を定義
4. 見出しのセルが必要な場合は<th>を配置
5. <td>でセルとデータを作成
6. 必要に応じて<thead>を配置
7. 必要に応じて<tbody>を配置
8. 必要に応じて<tfoot>を配置
9. 列をグループ化する場合<colgroup>を配置
10. 列に対して一括で属性を指定する場合<col>を配置

<table>タグの特徴

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• CSSのdisplayは、既定値でtableが適用されます。
• 視覚的な効果としてセルにボーダー（枠線）が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
• 同一のページ内に複数使うことができます。この要素自体を入れ子にすることはできませんが、<td>の中に配置することは許可されているので、入れ子状のテーブルを組むことも可能です。

<table>に指定できる主な属性

width（非推奨）

テーブル全体の幅を指定します。スタイルシートを使って下さい。

height（非推奨）

テーブル全体の高さを指定します。スタイルシートを使って下さい。

align（非推奨）

テーブルの表示位置を指定します。スタイルシートを使って下さい。

border（非推奨）

ボーダー（枠線）の太さを指定します。0を指定すると枠線が非表示になります。

bordercolor（非推奨）

ボーダー（枠線）の色を指定します。スタイルシートを使って下さい。

bgcolor（非推奨）

背景色を指定します。スタイルシートを使って下さい。

background（非推奨）

背景画像を指定します。スタイルシートを使って下さい。

cellspacing（非推奨）

セルとセルの間隔を指定します。スタイルシートを使って下さい。

cellpadding（非推奨）

セルの中の間隔を指定します。スタイルシートを使って下さい。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<table>の使い方とサンプル

<table>の最も基本的な構造は以下のようになります。最初のうちはシンプルな表を作成して慣れていきましょう。

<table>
	<tr>
		<th>項目１</th>
		<th>項目２</th>
	</tr>
	<tr>
		<td>セルA1</td>
		<td>セルB1</td>
	</tr>
	<tr>
		<td>セルA2</td>
		<td>セルB2</td>
	</tr>
</table>

テーブルに<caption>を設置した例です。表の幅やキャプションの配置は、内容が整ってからCSSで調整します。

<table>
	<caption>表のキャプション</caption>
	<tr>
		<th>項目１</th>
		<th>項目２</th>
	</tr>
	<tr>
		<td>セルA1</td>
		<td>セルB1</td>
	</tr>
	<tr>
		<td>セルA2</td>
		<td>セルB2</td>
	</tr>
</table>

<thead>、<tbody>、<tfoot>を使って構造を明確にすることもできます。

<table class="table_sample">
	<caption>表のキャプション</caption>
	<thead>
		<tr>
			<th>項目１</th>
			<th>項目２</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>セルA1</td>
			<td>セルB1</td>
		</tr>
		<tr>
			<td>セルA2</td>
			<td>セルB2</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="2">フッターセル</td>
		</tr>
	</tfoot>
</table>

表が完成したら、CSS（スタイルシート）を使って見栄えを調整しましょう。

.table_sample {
	width: 100%;
	margin-top: 1rem;
	border-collapse: collapse;
	border-top: 1px solid #ccc;
	font-size: .875rem;
	text-align: left;
	word-wrap: break-word;
}
.table_sample th,
.table_sample td {
	padding: 0.5em;
	border-bottom: 1px solid #ccc;
}
.table_sample th {
	background-color: #eeeeee;
	font-weight: bold;
	vertical-align: middle;
}
.table_sample td:first-child {
	width: 25%;
	background-color: #f5f5f5;
}

セル同士の結合に関しては、<th>や<td>のcolspan属性とrowspan属性を、列のグループ化に関しては、<colgroup>と<col>を参照して下さい。