HTML-CSS入門講座

濱屋太郎

Lesson-7

Lesson-7
テーブルを活用しましょう

目次

7.1 はじめに

7.1.1 概要

  • テーブル関連の要素(タグ)やプロパティを使用すると色々な形態の表組を作成することができます。本レッスンでは、テーブルの作成方法と合わせて実際のテーブル活用例を通してテーブルを使用法を学びます。

7.2 テーブルの構成

7.2.1 テーブルの構成

テーブルの構造とテーブル作成で使用するタグは、以下の通りです。

テーブルの構造

(1) table要素

表全体を作成します。

(2) caption要素

表題を作成します。

(3) tr要素

「Table Row(行)」の略です。表の行を1つ作成します。

(4) th要素

「Table Header(見出し)」の略です。表の見出しとなるセルを1つ作成します。

(5) td要素

「Table Data(データ)」に略です。表のデータとなるセルを1つ作成します。

7.3 基本形

7.3.1 ソースコード

HTML


<table>
	<caption>商品在庫</caption>
	<tr><th>商品名</th><th>単価</th><th>個数</th></tr>
	<tr><td>りんご</td><td>80</td><td>10</td></tr>
	<tr><td>みかん</td><td>40</td><td>20</td></tr>
	<tr><td>いちご</td><td>50</td><td>80</td></tr>
</table>

7.3.2 表示結果

商品在庫
商品名単価個数
りんご8010
みかん4020
いちご5080

7.4 基本形(CSSを設定)

7.4.1 ソースコード

HTML


<table>
    <caption>商品在庫</caption>
	<tr><th>商品名</th><th>単価</th><th>個数</th></tr>
	<tr><td>りんご</td><td>80</td><td>10</td></tr>
	<tr><td>みかん</td><td>40</td><td>20</td></tr>
	<tr><td>いちご</td><td>50</td><td>80</td></tr>
</table>

CSS


table {
    border-collapse: collapse;
}
table caption {
    padding: 5px 0;
}
table th {
    width: 150px;
    padding: 5px 0;
    background-color: #eee;
    text-align: center;
    border: 1px #ccc solid;
}
table td {
    width: 150px;
    padding: 5px 0;
    text-align: center;
    border: 1px #ccc solid;
}

テーブル関連のプロパティは、以下の意味を持ちます。

(1) border-collapseプロパティ

隣接するセルのボーダーの表示型式を指定します。

collapse
隣接するセルのボーダーを重ねて表示します。
separate
隣接するセルのボーダーを間隔をあけて表示します。

(2) border-spacingプロパティ

border-collapseプロパティに separateが指定されている時に隣接するセルのボーダー間の間隔を指定することができます。

7.4.2 表示結果

商品在庫
商品名単価個数
りんご8010
みかん4020
いちご5080

7.5 関連事項

7.5.1 関連タグ

(1) caption要素

表の概要を記述します。captionタグはtableタグの直下に書く必要があります。

(2) colgroup要素

列のグループを定義します。colgroupタグはtableタグの直下(または、captionタグの直下)に書く必要があります。
colgroupタグに指定できるスタイルは background/border/width/visibilityプロパティです。

(3) thead要素

表のヘッダグループを定義します。省略可能ですが指定するとよりテーブル構造を明確化できます。

(4) tbody要素

表のボディグループを定義します。省略可能ですが指定するとよりテーブル構造を明確化できます。

(5) tfoot要素

表のフッタグループを定義します。省略可能ですが指定するとよりテーブル構造を明確化できます。

7.5.2 注意事項

  • thタグは縦に並べても良く表の中に点在していても大丈夫です。
  • セルを横方向つなげる時はthタグまたはtdタグに colspan属性で「colspan="つなげたい数"」を指定します。
  • セルを縦方向つなげる時はthタグまたはtdタグに rowspan属性で「rowspan="つなげたい数"」を指定します。
  • セル内の余白を設定する時はthタグまたはtdタグのCSSで paddingプロパティを指定します。
  • セル内に画像を表示させる時はthタグまたはtdタグ内に imgタグを記述します。

7.6 テーブルサンプル(都道府県別集計)

7.6.1 ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルサンプル(都道府県別集計)</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
div {
	padding: 20px 0;
	width: 500px;
	margin: 0 auto;
}
table {
	width: 100%;
	border-collapse: collapse;
}
table tr:nth-child(odd) {
	background-color: #eee;
}
table tr:nth-child(1) {
	background-color: #666;
	color: #fff;
}
table th {
	width: calc(100% / 5);
	padding: 5px 0px 5px 0px;
	text-align: center;
	border: 1px #ccc solid;
}
table td {
	padding: 5px 10px 5px 10px;
	text-align: right;
	border: 1px #ccc solid;
}
table tr td:nth-child(1) {
	text-align: center;
}
</style>
</head>
<body>
<div>
	<table>
		<caption>都道府県別統計</caption>
		<tr><th>都道府県</th><th>集計1</th><th>集計2</th><th>集計3</th><th>集計4</th></tr>
		<tr><td>青森県</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>岩手県</td><td>11</td><td>22</td><td>33</td><td>44</td></tr>
		<tr><td>宮城県</td><td>111</td><td>222</td><td>333</td><td>444</td></tr>
		<tr><td>秋田県</td><td>1111</td><td>2222</td><td>3333</td><td>4444</td></tr>
		<tr><td>山形県</td><td>11111</td><td>22222</td><td>33333</td><td>44444</td></tr>
		<tr><td>福島県</td><td>111111</td><td>222222</td><td>333333</td><td>444444</td></tr>
	</table>
</div>
</body>
</html>

7.6.2 表示形式

7.7 テーブルサンプル(タイル風の表)

7.7.1 ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルサンプル(タイル風の表)</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
div {
	padding: 20px 0;
	width: 500px;
	margin: 0 auto;
}
table {
	width: 100%;
	border-collapse: separate;
}
table th {
	width: calc(100% / 5);
	padding: 5px 0px 5px 0px;
	background-color: #984c2b;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	border: 1px #ccc solid;
}
table td {
	padding: 5px 0px 5px 0px;
	background-color: #ffe282;
	text-align: center;
	border-radius: 5px;
	border: 1px #ccc solid;
}
</style>
</head>
<body>
<div>
	<table>
		<tr><th>見出し 1</th><td>データ 1-1</td><td>データ 1-2</td><td>データ 1-3</td><td>データ 1-4</td></tr>
		<tr><th>見出し 2</th><td>データ 2-1</td><td>データ 2-2</td><td>データ 2-3</td><td>データ 2-4</td></tr>
		<tr><th>見出し 3</th><td>データ 3-1</td><td>データ 3-2</td><td>データ 3-3</td><td>データ 3-4</td></tr>
		<tr><th>見出し 4</th><td>データ 4-1</td><td>データ 4-2</td><td>データ 4-3</td><td>データ 4-4</td></tr>
	</table>
</div>
</body>
</html>

7.7.2 表示形式

7.8 テーブルサンプル(料金表)

7.8.1 ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルサンプル(料金表)</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
div {
	padding: 20px 0;
	width: 450px;
	margin: 0 auto;
}
table {
	width: 100%;
	border-collapse: collapse;
}
table caption {
	font-size: 26px;
	font-weight: bold;
}
table tr:nth-child(2) {
	font-size: 30px;
	font-weight: bold;
}
table tr:nth-child(4) {
	border-bottom: 1px #ccc solid;
}
table th {
	width: calc(100% / 3);
	color: #fff;
	font-size: 22px;
	padding: 10px 0px 10px 0px;
	text-align: center;
	border: 1px #ccc solid;
}
table th:nth-child(1) {
	background-color: #868686;
}
table th:nth-child(2) {
	background-color: #d41818;
}
table th:nth-child(3) {
	background-color: #2a7196;
}
table td {
	padding: 10px 0px 10px 0px;
	text-align: center;
	border-left: 1px #ccc solid;
	border-right: 1px #ccc solid;
}
table td a {
	background-color: #25b327;
	text-decoration: none;
	color: white;
	padding:5px 20px;
	border-radius: 30px;
	font-weight: bold;
}
</style>
</head>
<body>
<div>
	<table>
		<caption>料金プラン</caption>
		<tr><th>無料プラン</th><th>初級プラン</th><th>上級プラン</th></tr>
		<tr><td>\0</td><td>\4,000</td><td>\8,000</td></tr>
		<tr><td><a href="#">申し込み</a></td><td><a href="#">申し込み</a></td><td><a href="#">申し込み</a></td></tr>
		<tr><td>保障なし</td><td>保障1ヶ月</td><td>保障3ヶ月</td></tr>
	</table>
</div>
</body>
</html>

7.8.2 表示形式

7.9 テーブルサンプル(プロフィール)

7.9.1 ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルサンプル(プロフィール)</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
div {
	padding: 20px 0;
	width: 730px;
	margin: 0 auto;
}
table {
	width: 100%;
	border-collapse: collapse;
	border: 2px #aaa solid;
}
table th {
	width: 80px;
	padding: 5px 0;
	background-color: #c8dfff;
	text-align: center;
	border: 1px #aaa solid;
}
table td {
	width: 100px;
	padding: 5px 0;
	text-align: center;
	border: 1px #aaa solid;
}
table .left {
	padding-left: 10px;
	text-align: left;
}
</style>
</head>
<body>
<div>
	<table>
		<tr><th>氏名</th><td>山田 太郎</td><th>年齢</th><td>25歳</td><th>出身地</th><td>沖縄県</td><th>血液型</th><td>A型</td></tr>
		<tr><th>住所</th><td>111-2222</td><td colspan="6" class="left">東京都千代田区1丁目1番地</td></tr>
		<tr><th>メール</th><td colspan="3" class="left">aaaaa@aaaa.com</td><th>URL</th><td colspan="3" class="left">https://www.aaaa.com</td></tr>
		<tr><th rowspan="4">スキル</th><td colspan="2">Photoshop</td><td>★★☆</td><td colspan="4" class="left">独自で作業を進められる</td></tr>
		<tr><td colspan="2">Illustrator</td><td>★★☆</td><td colspan="4" class="left">独自で作業を進められる</td></tr>
		<tr><td colspan="2">HTML/CSS</td><td>★☆☆</td><td colspan="4" class="left">確認しながら作業を進められる</td></tr>
		<tr><td colspan="2">WordPress</td><td>★★★</td><td colspan="4" class="left">指導できる</td></tr>
	</table>
</div>
</body>
</html>

7.9.2 表示形式

7.10 テーブルサンプル(オセロ)

7.10.1 ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルサンプル(オセロ)</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body > div {
	padding: 20px 0;
	width: 431px;
	margin: 0 auto;
}
table {
	border-collapse: collapse;
	background-color: #26b569;
	border: 4px #000 solid;
}
table td {
	width: 50px;
	height: 50px;
	vertical-align: middle;
	border: 1px #000 solid;
}
table div.w {
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #fff;
}
table div.b {
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #000;
}
</style>
</head>
<body>
<div>
	<table>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div class="b"></div></td><td><div class="w"></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div class="w"></div></td><td><div class="b"></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
		<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
	</table>
</div>
</body>
</html>

7.10.2 表示形式