■ テーブルモジュール要素サンプル

caption

テーブルのキャプションを設定する要素です。

一般的な視覚系ブラウザでは、中央揃えで表示されます。

table

テーブル（表組）を設定するブロックレベル要素です。

デフォルトでは枠線表示がありません。

視覚系ブラウザによってはセル間にある程度の間隔を設けています。

非視覚系ブラウザでは、テーブルの表現が苦手のためにレイアウトに用いるべきではないとされています。レイアウトに用いる場合には、表現の順序などを考慮した設計が望まれます。

td

テーブルのデータセルを設定する要素です。

テーブルはセルの集まり構成されているので、最低１個以上のセルがなければなりません。

データセルには他のブロックレベル要素を配置することが可能です。

th

ヘッダセルを設定する要素です。

必ずしも使用しなければならないというものではなく、任意に利用します。

一般的な視覚系ブラウザでは、文字が強調されセンタリングされて表示します。

tr

テーブルの横列を設定する要素です。

テーブルでは、最低限１つ以上の横列の設定をしなくてはなりません。

colgroup

表の縦列をグループ化する要素です。

縦の列の横幅や位置などを設定する場合に便利な要素で、span属性を用いることで、複数の列を同時に設定できます。

col

colgroup要素の中で用い、縦列をおのおの違う設定をする場合に使われます。

colgroup要素では、それぞれの楯列を違う設定にできないために利用するものです。

thead

テーブルのヘッダ部を指定してグループ化する要素です。

必須ではないので、任意に設定することができます。

tbpdy

テーブルの本体部分を指定してグループ化する要素です。

特にこの要素を記述しない場合は、一般的にブラウザ側で補完する場合があります。

tfoot

テーブルのフッター部を指定してグループ化する要素です。

この要素も必須ではないので、任意に設定することができます。

---

ここでは、簡単なテーブルを上記要素のすべてを使って表示しています。XHTMLと CSSは下段に掲載しています。

テーブルのサンプル

要素名	機能	属性
主だった要素を記載しました。
table	テーブルの設定	cellpadding, cellspacing, summary, border, width
tr	横列の設定	align, width
th	ヘッダセルの設定	align, valign
td	データセルの設定	align, valign
cartion	キャプション	-

---

HTML：サンプル
<table cellspacing="0" cellpadding="3" summary="テーブル要素を使ったサンプル">
<caption>テーブルのサンプル</caption>
<colgroup>
<col width="15%" id="first" />
<col width="25%" id="second" />
<col id="third" />
</colgroup>
<thead>
<tr><th abbr="Element">要素名</th><th abbr="function">機能</td>
    <th abbr="Attribute">属性</th></tr>
</thead>
<tfoot>
<tr><td colspan="3">主だった要素を記載しました。</td></tr>
</tfoot>
<tbody>
<tr><td>table</td><td>テーブルの設定</td>
    <td>cellpadding, cellspacing, summary, border, width</td></tr>
<tr><td>tr</td><td>横列の設定</td><td>align, width</td></tr>
<tr><td>th</td><td>ヘッダセルの設定</td><td>align, valign</td></tr>
<tr><td>td</td><td>データセルの設定</td><td>align, valign</td></tr>
<tr><td>cartion</td><td>キャプション</td><td>-</td></tr>
</tbody>
</table>

CSSサンプル
thead    { background-color: #03f; color: #fff }
tbody td { background-color: #ccf; border-bottom: 1px solid #fff }
tfoot { background-color: #009; color: #fff }
#first   { padding-left: 1em; padding-right: 1em }
#second  { font-size: 90% }
#third   { font-family: monospace; padding-right: 1em  }

---