HTML-CSS 入門講座

HTML-CSS 入門講座

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

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

目次

L7.1 はじめに

L7.1.1 概要

  • テーブル関連の要素（タグ）やプロパティを使用すると色々な形態のテーブル構造を作成することができます。本レッスンでは、テーブルの作成方法と合わせて実際のテーブル活用例を通してテーブルを使用法を学びます。
  • display プロパティを使用することでテーブル関連の要素（タグ）を使用しなくてもテーブル構造を作成することもできます。本方法を使用することで CSS で自由なレイアウト設定を行うことができますので合わせて理解しましょう。

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 プロパティです。

colgroup 要素内に col 要素が包含する場合は、col 要素で個々の列の定義を行います。

span 属性を使用することで定義する列数を指定することができます。省略時の列数は、1 です。colgroup 要素内に col 要素が包含する場合は、この属性は無視されます。

colgroup 要素や col 要素を使用しないで :nth-child(n) セレクターを使用することで個々の列のスタイルを定義することもできます。。

L7.2.8 col 要素（列の定義）

<col>列の定義情報</col>

通常は、colgroup 要素内に col 要素を包含する型式で記述し列の定義をします。colgroup タグに指定できるスタイルは、background/border/width/visibility プロパティです。

span 属性を使用することで定義する列数を指定することができます。省略時の列数は、1 です。

colgroup 要素や col 要素を使用しないで :nth-child(n) セレクターを使用することで個々の列のスタイルを定義することもできます。。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

L7.2.14 table-layout プロパティ（セル幅の決定方法）

table-layout: セル幅の決定方法;

テーブル全体のセル幅の決定方法を指定します。

セル幅の決定方法は、以下の値で指定します。初期値は、auto です。

auto
セル幅を自動でレイアウトします。auto を指定するとテーブル全体を読み込んでから各セルのコンテンツ幅を考慮して各セルの幅が決定されます。
fixed
セル幅を固定でレイアウトにします。fixed を指定するとテーブルの最初の行を読み込んだ時点で各セルのコンテンツ幅が決定されます。必要に応じてセルの幅を指定しますがセル幅が指定されていないセルは均等に割り当てられます。

table-layout プロパティの使用例は、以下の通りです。

使用例（HTML）


<table class="l7-table-layout">
	<tr>
		<td>12345</td>
		<td>1234567890</td>
		<td>123456789012345</td>
		<td>12345678901234567890</td>
	</tr>
</table>

使用例（CSS）


table.l7-table-layout {
	width: 100%;
	border-collapse: collapse;
	table-layout: セル幅の決定方法;
}
table.l7-table-layout td {
	padding: 5px 0;
	text-align: center;
	border: 1px #ccc solid;
}
  1. table-layout: auto;
    12345 1234567890 123456789012345 12345678901234567890
  2. table-layout: fixed;
    12345 1234567890 123456789012345 12345678901234567890

L7.2.15 vertical-align プロパティ（垂直方向位置指定）

vertical-align: 垂直方向位置;

インラインブロック、表セルボックスの垂直方向位置を指定します。

  • インライン要素、インラインブロック要素（img 要素など）の垂直配置位置を指定します。例えば、行内にテキストと画像を表示する場合に画像の垂直位置を指定します。
  • 表のセル内の垂直方向の配置位置を指定します。
  • 本プロパティは、ブロック要素には適用されませんので注意してください。

垂直方向位置は、以下の値で指定します。初期値は、baseline です。

baseline
要素の下端をフォントのベースラインに揃えます。
top
要素の上端を行の上端に揃えます。
middle
要素を行の中央に揃えます。
bottom
要素の下端を行の下端に揃えます。

vertical-align プロパティの使用例は、以下の通りです。

使用例（HTML）


<table class="l7-vertical-align">
	<tr>
		<td>12345<br>12345<br>12345</td>
		<td style="vertical-align: baseline;">baseline</td>
		<td style="vertical-align: top;">top</td>
		<td style="vertical-align: middle;">middle</td>
		<td style="vertical-align: bottom;">bottom</td>
	</tr>
</table>

使用例（CSS）


table.l7-vertical-align {
    border-collapse: collapse;
}
table.l7-vertical-align td {
    width: 150px;
    padding: 5px 0;
    text-align: center;
    border: 1px #ccc solid;
}
12345
12345
12345		 baseline top middle bottom

L7.2.16 注意事項

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

L7.3 HTML/CSS 記述例

L7.3.1 HTML の記述

(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>

(2) 表示結果

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

L7.3.2 CSS の記述

(1) ソースコード

HTML


<table class="l7-sample-01">
	<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.l7-sample-01 {
    border-collapse: collapse;
}
table.l7-sample-01 caption {
    padding: 5px 0;
}
table.l7-sample-01 th {
    width: 150px;
    padding: 5px 0;
    background-color: #eee;
    text-align: center;
    border: 1px #ccc solid;
}
table.l7-sample-01 td {
    width: 150px;
    padding: 5px 0;
    text-align: center;
    border: 1px #ccc solid;
}

(2) 表示結果

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

L7.3.3 テーブル構造の明確化

(1) ソースコード

HTML


<table class="l7-sample-02">
	<caption>商品在庫</caption>
	<colgroup>
		<col class="name"></col>
		<col class="item" span="2"></col>
		<col class="total"></col>
	</colgroup>
	<thead>
		<tr><th>商品名</th><th>単価</th><th>個数</th><th>金額</th></tr>
	</thead>
	<tbody>
		<tr><td>りんご</td><td>80</td><td>10</td><td>800</td></tr>
		<tr><td>みかん</td><td>40</td><td>20</td><td>800</td></tr>
		<tr><td>いちご</td><td>50</td><td>80</td><td>4000</td></tr>
	</tbody>
	<tfoot>
		<tr><td colspan="3">合計</td><td>5600</td></tr>
	</tfoot>
</table>

CSS


table.l7-sample-02 {
    border-collapse: collapse;
}
table.l7-sample-02 caption {
    padding: 5px 0;
}
table.l7-sample-02 .name {
	background: palegoldenrod;
}
table.l7-sample-02 .item {
	background: pink;
}
table.l7-sample-02 .total {
	background: aquamarine;
}
table.l7-sample-02 thead th {
    width: 150px;
    padding: 5px 0;
    text-align: center;
    border: 1px #ccc solid;
    background-color: #eee;
}
table.l7-sample-02 tbody td {
    width: 150px;
    padding: 5px 0;
    text-align: center;
    border: 1px #ccc solid;
}
table.l7-sample-02 tfoot td {
    width: 150px;
    padding: 5px 0;
	font-weight: bold;
    text-align: center;
    border: 1px #ccc solid;
    background-color: #eee;
}

(2) 表示結果

商品在庫
商品名単価個数金額
りんご8010800
みかん4020800
いちご50804000
合計5600

L7.4 display を用いたテーブル構造

L7.4.1 概要

display プロパティを用いることで table 関連要素と同等の構造を定義することができます。本テーブル構造を使用することで下記のように柔軟な表示型式を指定することができます。

  • コンテンツの属性を明確にすることができます。
  • vertical-align プロパティを使用することで上下中央や下揃えが指定できます。
  • table-layout プロパティを使用することでセルを均等幅にすることができます。
  • 特定のセルだけに幅を指定することで固定幅と可変幅のセルを定義することができます。
  • セルの高さを揃えることができます。（揃えることしかできません）

L7.4.2 display プロパティ


display: table;						/* table */
display: table-caption;				/* caption */
display: table-row;					/* tr */
display: table-cell;				/* th, td */
display: table-header-group;		/* thead */
display: table-row-group;			/* tbody */
display: table-footer-group;		/* tfoot */
display: table-column-group;		/* colgroup */
display: table-column;				/* col */

包含関係になった要素に対して display プロパティを指定してテーブル構造を定義します。

display プロパティを使用して div/p/ul/ol/li などの要素を table 関連要素の属性に設定します。

table
table 要素の属性設定
table-caption
caption 要素の属性設定
table-row
tr 要素の属性設定
table-cell
th, td 要素の属性設定
table-header-group
thead 要素の属性設定
table-row-group
tbody 要素の属性設定
table-footrer-group
tfoot 要素の属性設定
table-column-group
colgroup 要素の属性設定
table-column
col 要素の属性設定

L7.4.3 記述例

(1) ソースコード

HTML


<div class="l7-sample-03">
	<p>商品在庫</p>
	<div class="header">
		<ul>
			<li>商品名</li>
			<li>単価</li>
			<li>個数</li>
		</ul>
	</div>
	<ul>
		<li>りんご</li>
		<li>80</li>
		<li>10</li>
	</ul>
	<ul>
		<li>みかん</li>
		<li>40</li>
		<li>20</li>
	</ul>
	<ul>
		<li>いちご</li>
		<li>50</li>
		<li>80</li>
	</ul>
</div>

CSS


div.l7-sample-03 {
	display: table;
    border-collapse: collapse;
}
div.l7-sample-03 p {
	display: table-caption;
    padding: 5px 0;
    text-align: center;
}
div.l7-sample-03 div.header ul {
	font-weight: bold;
    background-color: #eee;
}
div.l7-sample-03 ul {
	margin: 0;
}
div.l7-sample-03 ul li {
	display: table-cell;
    width: 150px;
    padding: 5px 0;
    text-align: center;
    border: 1px #ccc solid;
}

(2) 表示結果

商品在庫

  • 商品名
  • 単価
  • 個数
  • りんご
  • 80
  • 10
  • みかん
  • 40
  • 20
  • いちご
  • 50
  • 80

L7.5 テーブルサンプル

L7.5.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: "ヒラギノ角ゴ 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.5.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: "ヒラギノ角ゴ 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.5.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: "ヒラギノ角ゴ 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.5.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: "ヒラギノ角ゴ 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.5.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: "ヒラギノ角ゴ 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
ロケット炎