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

HTML

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

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

テーブルのタグ

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

セルの結合

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

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

テーブルの基本構成

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行・列をつめる

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
セル１	セル２	セル３

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

複雑なテーブルの作成

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

colspan=”★”（横に結合）

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

colspanのサンプル
見出しA	見出しB	見出しC	見出しD
セル１		セル２	セル３
セル１	セル２	セル３	セル４

<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=”★”（縦に結合）

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

rowspanのサンプル
見出しA	見出しB	見出しC
セル１	セル２	セル３
	セル１	セル２
	セル１	セル２

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