HTML

<table> テーブル

詳細を開く 詳細を閉じる

HTMLコード

テーブル : <table>

<table>
表(テーブル:table)
<tr>
行(横列)
<td>
セル
<th>
セルの中でも、特に「見出しのセル」

別ウィンドウで表示

<table>
	<tr>
		<th>ヘッダ1</th>
		<th>ヘッダ2</th>
		<th>ヘッダ3</th>
	</tr>
	<tr>
		<td>データA1</td>
		<td>データA2</td>
		<td>データA3</td>
	</tr>
	<tr>
		<td>データB1</td>
		<td>データB2</td>
		<td>データB3</td>
	</tr>
</table>

CSSを使った実用的な例

詳細は以下の「CSSコード」で解説。


別ウィンドウで表示

<style>
	table {
		border-collapse:	collapse;
	}
	td, th {
		padding:	10px;
		border:	2px solid dimgray;
	}
	th {
		background:	cornsilk;
	}
</style>

<table>
	<tr>
		<th>ヘッダ1</th>
		<th>ヘッダ2</th>
		<th>ヘッダ3</th>
	</tr>
	<tr>
		<td>データA1</td>
		<td>データA2</td>
		<td>データA3</td>
	</tr>
	<tr>
		<td>データB1</td>
		<td>データB2</td>
		<td>データB3</td>
	</tr>
</table>

セルの連結 : colspan/rowspan

  • <td><th>colspan属性rowspan属性を設定することで、 セルを連結することができます。
  • colspan属性は、行方向(横方向)に連結し、rowspan属性は、列方向(縦方向)に連結します。
  • colspan属性rowspan属性の両方を設定することも可能です。

別ウィンドウで表示

<style>
	table {
		border-collapse:	collapse;
	}
	td, th {
		padding:	10px;
		border:	2px solid dimgray;
	}
</style>

<table>
	<tr>
		<th>a1</th>
		<th>a2</th>
		<th>a3</th>
		<th>a4</th>
	</tr>
	<tr>
		<td colspan="2">colspan</td>
		<td>b3</td>
		<td rowspan="2">rowspan</td>
	</tr>
	<tr>
		<td>c1</td>
		<td  colspan="2" rowspan="2">
			colspan<br>rowspan
		</td>
	</tr>
	<tr>
		<td>d1</td>
		<td>d4</td>
	</tr>
</table>

テーブルのタイトル : <caption>

  • テーブルのタイトルや説明は、<caption>を使って表します。
  • <caption>は、<table>の子要素です。
  • HTML上の<caption>の位置を変えても、出力される位置は変わりません(デフォルトでは表の上)。 テーブルの下に表示するには、下のコードのようにCSSの「caption-side」プロパティを使います。

別ウィンドウで表示

<table>
	<tr>
		<th>ヘッダ1</th>
		<th>ヘッダ2</th>
		<th>ヘッダ3</th>
	</tr>
	<tr>
		<td>データA1</td>
		<td>データA2</td>
		<td>データA3</td>
	</tr>
	<tr>
		<td>データB1</td>
		<td>データB2</td>
		<td>データB3</td>
	</tr>
	<caption>サンプルのテーブル</caption>
</table>

[CSS] タイトルをテーブルの下に表示する : caption-side


別ウィンドウで表示
/* CSSファイル */
caption {
	caption-side:	bottom;
}

[HTML4以降] テーブルのヘッダ/本体/フッタ : <thead>/<tbody>/<tfoot>

  • <thead>/<tbody>/<tfoot>は、<table>の子要素です。
<thead>
テーブルのヘッダ部。通常<th>のセルを含みます。
<tbody>
テーブルのボディ部(本体・データ部)。通常<td>のセルを含みます。
<tfoot>
テーブルのフッタ部。通常<td>のセルを含みます。

別ウィンドウで表示

<table>
	<thead>
		<tr>
			<th>h1</th>
			<th>h2</th>
			<th>h3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>da1</td>
			<td>da2</td>
			<td>da3</td>
		</tr>
		<tr>
			<td>db1</td>
			<td>db2</td>
			<td>db3</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>f1</td>
			<td>f2</td>
			<td>f3</td>
		</tr>
	</tfoot>
</table>

CSSコード

CSSなし


別ウィンドウで表示

<style>
	td, th {
		padding:	10px;
		border:	2px solid dimgray;
	}
</style>

<table>
	<tr>
		<th>ヘッダ1</th>
		<th>ヘッダ2</th>
		<th>ヘッダ3</th>
	</tr>
	<tr>
		<td>データA1</td>
		<td>データA2</td>
		<td>データA3</td>
	</tr>
	<tr>
		<td>データB1</td>
		<td></td>
		<td>データB3</td>
	</tr>
	<caption>サンプル表</caption>
</table>

罫線を一重線にする : border-collapse

  • デフォルトではテーブルの罫線(ボーダー)はセル毎に描画されるので、二重線になります。
  • 一重線に変更するには、「border-collapse: collapse;」を指定します。

別ウィンドウで表示
/* CSSファイル */
table {
	border-collapse:	collapse;
}

罫線(二重線)の間隔を指定する : border-spacing

  • テーブルのセルの罫線(ボーダー)が一重線(border-collapse: collapse;)の場合は使えません。
  • 第一引数(例では5px)が左右の間隔、第二引数(例では20px)が上下の間隔になります。

別ウィンドウで表示
/* CSSファイル */
table {
	border-spacing:	5px 20px;
}

空のセルの罫線を表示しない : empty-cells


別ウィンドウで表示
/* CSSファイル */
table {
	empty-cells:	hide;
}
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ