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

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

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

table
テーブル(表組)を設定するブロックレベル要素です。
デフォルトでは枠線表示がありません。
視覚系ブラウザによってはセル間にある程度の間隔を設けています。

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

td
テーブルのデータセルを設定する要素です。
テーブルはセルの集まり構成されているので、最低1個以上のセルがなければなりません。

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

th
ヘッダセルを設定する要素です。
必ずしも使用しなければならないというものではなく、任意に利用します。

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

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

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

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  }