HTMLタグの”table要素”に関する簡易リストです。スタイルシートでのレイアウトがメインになる前はこのテーブル要素を駆使してデザインされていました。しかし柔軟性に乏しく、そしてソースがとても読みにくいものになります。
スタイルシートによるレイアウトがメジャーになったからといってテーブルをまったく使わないかというと、そうでもありません。

HTMLタグのテーブル要素に関するリスト

テーブルのタグ

• <table>（テーブルボディ）
• <tr></tr>（行）
• <th></th>（見出し）
• <td></td>（セル）
• <caption>（テーブルタイトル）

セルの結合

• colspan=”★”（横のセルを結合）
• rowspan=”★”（縦のセルを結合）

テーブルに適応させたスタイルシート

テーブルの基本構成

<table>

表を作成する。この<table></table>の中に行とセルを入れることで複雑な表を作ることができる。

テーブルは全てを読み込んだ後に表示させるので、複雑なテーブルはページ表示が遅くなる。

<tr>

行を作成する。この<tr></tr>の中にセルを入れることで横長のセルの並びが作られる。

<th>

表の見出し。この<th></th>の中に表示されたテキストはセンタリングされ、太文字で表示される。扱い方は<td>と同じ。

<td>

セルを作成する。この<td></td>の中に表示させたいテキストや画像を記述する。いくつも作ることができる。

<caption>

テーブルのタイトル。<table></table>の初めにテーブルのタイトルを記述。

<table>
<tr><th>見出しA</th><th>見出しB</th><th>見出しC</th></tr>
<tr><td>セル１</td><td>セル２</td><td>セル３</td></tr>
</table>

複雑なテーブルの作成

ただ単に表を作るだけではわかりやすい表は作れない。碁盤目のような表ではなく、セル同士をを結合することで複雑なテーブルを作る。

colspan=”★”（横に結合）

横並びのセルを指定数だけ結合させる。要素はタグの中に書き込む。感覚的にはセルの結合というより足りないセルを増やす感じかもしれない。

<table>
<caption>colspanのサンプル</caption>
<tr><th>見出しA</th><th>見出しB</th><th>見出しC</th><th>見出しD</th></tr>
<tr><td colspan="2">セル１</td><td>セル２</td><td>セル３</td></tr>
<tr><td>セル１</td><td>セル２</td><td>セル３</td><td>セル４</td></tr>
</table>

rowspan=”★”（縦に結合）

縦並びのセルを指定数だけ結合させる。要素はタグの中に書き込む。感覚的にはセルの結合というより足りないセルを増やす感じかもしれない。

<table>
<caption>rowspanのサンプル</caption>
<tr><th>見出しA</th><th>見出しB</th><th>見出しC</th></tr>
<tr><td rowspan="3">セル１</td><td>セル２</td><td>セル３</td></tr>
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル１</td><td>セル２</td></tr>
</table>

今回使用したテーブルへ反映させたCSS

ちなみにここでのテーブルに使ったスタイルシートのプロパティは以下の通りです。
セルの結合のみタグ内に書き込んでいます。

/*サンプルテーブルのスタイルシート*/
table.normal{
	margin: 0 0 1em;
	line-height: 1.6;
	border: 2px solid #666;
	border-spacing: 5px;
}
table.normal tr, table.normal th, table.normal td{
	padding: 0.2em 1em;
	font-size: 120%;
	border: 1px solid #666;
}
table.normal caption{
	font-weight: bold;
	font-size: 140%;
	color: #fff;
	background: #666;
}

テーブル要素を使うことのメリット

テーブル要素でサイズを定義した場合、そうそう形が崩れません。楽天などではテーブル組みで作られているようです。・・・が読み込みに時間がかかります。
これは私情ですが『楽天が大嫌い』なのでお勧めはしません。