HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは！
今日も頑張ろう

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

目次

L7.1 はじめに

L7.1.1 概要

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

L7.2 テーブルの構成

L7.2.1 テーブルの構成

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

テーブルの構造

L7.2.2 table 要素（テーブルの定義）

<table>（テーブルの定義情報）</table>

テーブルの範囲を指定します。

L7.2.3 caption 要素（主題の定義）

<caption>（主題の定義情報）</caption>

表のキャプション（主題）を指定します。

L7.2.4 tr 要素（1 行範囲の定義）

<tr>1 行範囲の定義情報</tr>

Table Row の略であり 1 行の範囲を指定します。

L7.2.5 th 要素（見出し項目の定義）

<th>見出し項目の定義情報</th>

Table Header の略であり見出し項目を指定します。

セルを横方向つなげる時は、colspan 属性で「colspan="つなげたい数"」を指定します。セルを縦方向つなげる時は、rowspan 属性で「rowspan="つなげたい数"」を指定します。

L7.2.6 td 要素（データ項目の定義）

<td>データ項目の定義情報</td>

Table Data の略でありデータ項目を指定します。

セルを横方向つなげる時は、colspan 属性で「colspan="つなげたい数"」を指定します。セルを縦方向つなげる時は、rowspan 属性で「rowspan="つなげたい数"」を指定します。

L7.2.7 colgroup 要素（列グループの定義）

<colgroup>列グループの定義情報</colgroup>

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

L7.2.8 thead 要素（表のヘッダーグループの定義）

<thead>表のヘッダーグループの定義情報</thead>

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

L7.2.9 tbody 要素（表のボディグループの定義）

<tbody>表のボディグループの定義情報</tbody>

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

L7.2.10 tfoot 要素（表のフッタグループの定義）

<tfoot>表のフッタグループの定義情報</tfoot>

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

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

L7.4 基本形（CSS を設定）

L7.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;
}

7.4.2 表示結果

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

L7.4.3 border-collapse プロパティ（隣接セルの表示方法）

border-collapse: 隣接セルの表示方法;

テーブルの隣接するセルの表示方法を指定します。

隣接セルの表示方法は、以下の値で指定します。

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

L7.4.4 border-spacing プロパティ（隣接セルのボーダー間の間隔）

border-spacing: 隣接セルのボーダー間の間隔;

テーブルの隣接するセルのボーダー間の間隔を指定します。本プロパティは、border-collapse プロパティに「separate」が指定されている時に有効になります。border-spacing の初期値は、仕様としては、0 ですが、主要なブラウザの初期値は、1px に設定されているようです。

隣接セルのボーダー間の間隔は、複数指定でき指定した個数により対象位置が異なります。

1つ指定
「上下左右」のすべての指定になります。。
2つ指定
「左右」と「上下」の順で指定します。

L7.5 注意事項

L7.5.1 1 HTML の記述

  • th タグは縦に並べても良く表の中に点在していても大丈夫です。
  • セル内の余白を設定する時は、th タグまたは、td タグのスタイルで padding プロパティを指定します。
  • セル内に画像を表示させる時は、th タグまたは、td タグ内に img タグを記述します。

L7.6 テーブルサンプル

L7.6.1 テーブルサンプル（都道府県別集計）

集計表のサンプルです。行の区別がしやすいうように行単位で背景色の変更しています。

(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 {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 20px 0;
	width: 500px;
	margin: 0 auto;
	border: #fff 1px solid;
}
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 class="container">
		<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>

(2) 表示形式

L7.6.2 テーブルサンプル（タイル風の表）

セルがタイル風になったサンプルです。セル間に隙間を作ってタイル風にしています。

(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 {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 20px 0;
	width: 500px;
	margin: 0 auto;
	border: #fff 1px solid;
}
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 class="container">
		<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>

(2) 表示形式

L7.6.3 テーブルサンプル（料金表）

料金プランの比較表のサンプルです。料金が目立つようにすると同時に申し込みボタンが配置されています。

(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 {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 20px 0;
	width: 450px;
	margin: 0 auto;
	border: #fff 1px solid;
}
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 class="container">
		<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>

(2) 表示形式

L7.6.4 テーブルサンプル（プロフィール）

プロフィール表のサンプルです。複数個所への表題の配置とセルの結合を行っています。

(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 {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 20px 0;
	width: 730px;
	margin: 0 auto;
	border: #fff 1px solid;
}
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 class="container">
		<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">東京都千代田区１丁目１番地</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>

(2) 表示形式

L7.6.5 テーブルサンプル（オセロ盤）

オセロ盤のサンプルです。クラス名の付与を行うことでコマの配置が行えます。

(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 {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 20px 0;
	width: 431px;
	margin: 0 auto;
	border: #fff 1px solid;
}
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 class="container">
		<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>

(2) 表示形式

ロケット本体
PAGE
TOP
ロケット炎