テーブル要素の簡単リスト|HTMLタグ

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

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

テーブルのタグ

セルの結合

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

テーブルの基本構成

CSSで扱える属性
width(横幅)
数値
height(高さ)
数値
boder(線幅,線種,色)
ボーダーに関する書き方はこちら
border-collapse(線の表示方法)
collapse重なり部分を結合
separate重なり部分を離す
border-spacing(線と線の間)
数値
table-layout(線と線の間)
auto表を読み終わってから表示
fixedセルを読み終わる度に表示
empty-cells(空セルの線を表示するか)
show表示する
hide表示しない
caption-side(<caption>をどこに表示するか)
top表の上
right表の右
bottom表の下
left表の左
empty-cells(指定した箇所を詰めて表示)
collapse行・列をつめる

<table>

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

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

<tr>

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

<th>

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

<td>

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

<caption>

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

表のサンプル
見出しA 見出しB 見出しC
セル1 セル2 セル3
<table>
<tr><th>見出しA</th><th>見出しB</th><th>見出しC</th></tr>
<tr><td>セル1</td><td>セル2</td><td>セル3</td></tr>
</table>

複雑なテーブルの作成

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

colspan=”★”(横に結合)

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

colspanのサンプル
見出しA 見出しB 見出しC 見出しD
セル1 セル2 セル3
セル1 セル2 セル3 セル4
<table>
<caption>colspanのサンプル</caption>
<tr><th>見出しA</th><th>見出しB</th><th>見出しC</th><th>見出しD</th></tr>
<tr><td colspan="2">セル1</td><td>セル2</td><td>セル3</td></tr>
<tr><td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td></tr>
</table>

rowspan=”★”(縦に結合)

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

rowspanのサンプル
見出しA 見出しB 見出しC
セル1 セル2 セル3
セル1 セル2
セル1 セル2
<table>
<caption>rowspanのサンプル</caption>
<tr><th>見出しA</th><th>見出しB</th><th>見出しC</th></tr>
<tr><td rowspan="3">セル1</td><td>セル2</td><td>セル3</td></tr>
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル1</td><td>セル2</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;
}

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

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