テーブル（表）を作成しよう（table要素）

今回は、HTMLでテーブルを作成する方法を解説します。

CSSでテーブルの見た目を整える方法も解説します。

テーブル（表）の作り方

index.htmlを以下のように書き換えてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>テーブル要素</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<table class="price">
		<tr>
			<th>料金</th><td>500円</td><td>1,200円</td>
		</tr>
		<tr>
			<th>サービスの利用</th><td>◯</td><td>◯</td>
		</tr>
		<tr>
			<th>サポート</th><td>×</td><td>◯</td>
		</tr>
	</table>
</body>
</html>

保存してブラウザを確認すると、テーブルが表示されます。

テーブル（表）はtableタグ、行はtrタグ、セルはtdタグ、見出しのセルはthタグで作成します。

セルを結合していない場合は、各行に入るセルの数は同じにしてください。結合の方法は後ほど解説します。

このままでは見づらいのでCSSで枠線を追加します。

style.cssの中身を全て削除し、次のコードを書いてください。

style.css

@charset "utf-8";

.price td,
.price th {
    padding: 6px;
    border: 1px solid #ccc;
}

これで各セルに枠線と余白が入りました。

各セルの間に隙間が入っているので、隙間をなくしてみます。

style.css

@charset "utf-8";

.price {
    border-collapse: collapse;
}
.price td,
.price th {
    padding: 6px;
    border: 1px solid #ccc;
}

テーブルにborder-collapse: collapse;を指定すると、セル同士の隙間がなくなります。

border-collapseの初期値はseparateで、separateの場合は隙間ができます。

thead、tbody、tfoot

次に、見出しの行を定義するthead、テーブルの最後に総括の行を定義するtfootを使ってみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>テーブル要素</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<table class="price">
		<thead>
			<tr>
				<th></th>
				<th>プランA</th>
				<th>プランB</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>月額料金</th>
				<td>10,000円</td>
				<td>20,000円</td>
			</tr>
			<tr>
				<th>入会金</th>
				<td>10,000円</td>
				<td>10,000円</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>初期費用総額</th>
				<td>20,000円</td>
				<td>30,000円</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

theadやtfootがある場合、それ以外はtbodyで囲む必要があります。theadやtfootがない場合は、tbodyは省略できます。

見出しと総括が分かりやすいように、CSSを追加してみます。

style.css

@charset "utf-8";

.price {
    border-collapse: collapse;
}
.price thead {
    background-color: #eee;
}
.price tfoot {
    background-color: #eee;
}
.price td,
.price th {
    padding: 6px;
    border: 1px solid #ccc;
}

これで分かりやすくなりました。

セルの結合

エクセルのように、セルを結合することができます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>テーブル要素</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<table class="price">
		<thead>
			<tr>
				<th></th>
				<th>プランA</th>
				<th>プランB</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>月額料金</th>
				<td>10,000円</td>
				<td>20,000円</td>
			</tr>
			<tr>
				<th>入会金</th>
				<td colspan="2">10,000円</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>初期費用総額</th>
				<td>20,000円</td>
				<td>30,000円</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

colspanで横方向にセルを結合できます。colspan="2"でセル2つ分結合しています。

<td colspan="2">10,000円</td>でセル2つ分になるので、この行のtdを1つ減らします。

テキストが左寄りで見づらいので、テーブルのテキストを中央寄せにします。

style.css

.price {
    border-collapse: collapse;
    text-align: center;
}

これで見やすくなりました。

次に、縦方向の結合をしていきます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>テーブル要素</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<table class="price">
		<thead>
			<tr>
				<th></th>
				<th>プランA</th>
				<th>プランB</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>月額料金</th>
				<td rowspan="2">10,000円</td>
				<td>20,000円</td>
			</tr>
			<tr>
				<th>入会金</th>
				<td>10,000円</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>初期費用総額</th>
				<td>20,000円</td>
				<td>30,000円</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

rowspanで縦方向の結合ができます。rowspan="2"を指定した次の行は、セルが1つ少なくなります。

<tbody>
	<tr>
		<th>月額料金</th>
		<td rowspan="2">10,000円</td>
		<td>20,000円</td>
	</tr>
	<tr>
		<th>入会金</th>
		<!-- ここにあったセルが上のセルと結合されている -->
		<td>10,000円</td>
	</tr>
</tbody>

rowspan="3"の場合は、下の行2つでセルの数を減らします。

<tbody>
	<tr>
		<th>月額料金</th>
		<td rowspan="3">10,000円</td>
		<td>20,000円</td>
	</tr>
	<tr>
		<th>入会金</th>
		<!-- ここにあったセルが上のセルと結合されている -->
		<td>10,000円</td>
	</tr>
	<tr>
		<th>事務手数料</th>
		<!-- ここにあったセルが上のセルと結合されている -->
		<td>10,000円</td>
	</tr>
</tbody>