テーブル

Revised: Jul./2nd/2004

HTML でのテーブル

HTML での典型的なテーブルは次のような格好をしています。

<table>
<!-- 0行目 -->
<tr>
    <th>ヘッダ</th><th>1列目</th><th>2列目</th><th>3列目</th>
</tr>
<!-- 1行目 -->
<tr>
    <th>1行目</th><td>(1,1)</td><td>(1,2)</td><td>(1,3)</td>
</tr>
<!-- 2行目 -->
<tr>
    <th>2行目</th><td>(2,1)</td><td>(2,2)</td><td>(2,3)</td>
</tr>
</table>

より複雑な場合は、キャプション、ヘッダ、フッタ、列、列グループなどの要素が追加されます。

<table>
    <caption>複雑なテーブルのサンプル</caption>
    <!-- 列グループ -->
    <colgroup>
        <col span="1" class="tHeaddings" />
        <col span="3" class="tData" />
    </colgroup>
    <!-- テーブルヘッダ -->
    <thead>
        <tr><th>ヘッダ</th><th>1列目</th><th>2列目</th><th>3列目</th></tr>
    </thead>
    <!-- テーブルフッタ -->
    <tfoot>
        <tr><th>フッタ</th><td>合計1</td><td>合計2</td><td>合計3</td></tr>
    </tfoot>
    <!-- テーブル本体 -->
    <tbody>
        <tr><th>1行目</th><td>(1,1)</td><td>(1,2)</td><td>(1,3)</td></tr>
        <tr><th>2行目</th><td>(2,1)</td><td>(2,2)</td><td>(2,3)</td></tr>
    </tbody>
</table>

テーブルの CSS 表現

CSS の 'display' プロパティでは、テーブルの構造を表現するために、次の値が定義されています。

table (HTMLではtable)

ブロックレベルの表を定義。

inline-table (HTMLではtable)

インラインレベル表を定義。

table-row (HTMLでは tr)

セルの行であることを指定。

table-row-group (HTMLでは tbody)

一つ以上の行をグループ化することを指定。

table-header-group (HTMLでは thead)

'table-row-group'と同じ役割を果たす。他のすべての行及び行グループより前で、あらゆるキャプションより後に表示される。印刷時に、表が複数ページにわたる場合は、各ページにヘッダ行を繰り返すかもしれない。

table-footer-group (HTMLでは tfoot)

'table-row-group'と同じ役割を果たす。他のすべての行及び行グループより後で、あらゆる下部のキャプションより前に表示される。印刷時に、表が複数ページにわたる場合は、各ページにフッタ行を繰り返すかもしれない。

table-column ( HTMLでは col)

セルの列を記述することを指定。

table-column-group (HTMLでは colgroup)

要素が一つ以上の列をグループ化することを指定。

table-cell (HTMLでは td, th)

要素が表セルを表示することを指定。

table-caption (HTMLでは caption)

表のキャプションを指定する。

W3C の CSS 仕様書に含まれる HTML 4 のデフォルトスタイルシートでは、次のように定義されています。

table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }

1. caption-side
2. table-layout
3. border-collapse
4. border-spacing
5. empty-cells
6. テーブルに関する特記事項
   1. border-style
   2. vertical-align

caption-side

プロパティ 'caption-sid' は、'display: table-caption' の要素に指定可能です。テーブルキャプションの、テーブルに対する位置を指定します。

'caption-sid' は子要素に継承されます。デフォルトの値は、top です。inherit は、親要素の値を明示的に継承する指定です。

キャプションは、テーブルボックスとは別のボックスを生成し、テーブルのマージンとキャプションのマージンは、お互いに別のボックスであるように相殺します。

キャプションが上下の何れかにある場合は、キャプションボックスの幅は、テーブルボックスの幅に依存します。ボックス内で、'vertical-align' の top/middle/bottom の何れかによって、垂直方向の位置を揃えることができます。

table-layout

プロパティ 'table-layout' は、プロパティ 'display' の値が table か inline-table である要素に指定可能です。テーブルの、レンダリング方法を指定します。

'table-layout' は子要素に継承されません。デフォルトの値は、auto です。inherit は、親要素の値を明示的に継承する指定です。

auto

テーブルの幅を決定するに当たって、全てのセルの内容の最小幅に依存して決定する。テーブルが 'width' を持つ場合、計算値と 'width' の何れか大きいほうが採用される。

fixed

テーブルの幅を決定するに当たって、一行目のセルの内容に応じて、各列幅とテーブルの幅を決定する。後続の行で、列幅に収まらないもののレンダリング方法は、'overflow' で指定可能。

border-collapse

プロパティ 'border-collapse' は、プロパティ 'display' の値が table か inline-table である要素に指定可能です。テーブルのボーダーが、隣接セルと分離しているか、一致しているかを指定します。

'border-collapse' は子要素に継承されます。デフォルトの値は、隣接ボーダーが一つの線となる collapse です。inherit は、親要素の値を明示的に継承する指定です。

collapse であるレンダリングモデルを、ボーダーつぶしモデル (collapsing border model) と呼び、separate を、ボーダー分離モデル (separated borders model) と呼びます。

border-spacing

プロパティ 'border-spacing' は、プロパティ 'display' の値が table か inline-table である要素に指定可能です。分離モデルの隣接セルのボーダー間の距離を指定します。

'border-spacing' は子要素に継承されます。デフォルトの値は 0 です。inherit は、親要素の値を明示的に継承する指定です。負の値は不正です。

値が一つ指定される場合は、上下左右の距離を指定します。値が二つ指定される場合は、一つ目が左右の距離で、二つ目が上下の距離です。

empty-cells

プロパティ 'empty-cells' は、'display: table-cell である要素に指定可能です。分離モデルで、空のセルの周囲のボーダーを表示するかどうかを指定します。

'border-spacing' は子要素に継承されます。デフォルトの値は show です。inherit は、親要素の値を明示的に継承する指定です。

hidden の場合、内容を持たないセルと、'visibility: hidden' のセルについては、周囲のボーダーを表示しません。

テーブルに関する特記事項

既存のプロパティでも、テーブルに適用する場合は、意味が異なったり、注意が必要なものがあります。

border-style

'border-style' の指定値は、テーブルの 'border-collapse' の値によって意味が異なることがあります。

hidden

分離モデル (separate) ではボーダーが表示されないだけだが、つぶしモデル (collapse) では隣接する他のボーダーも非表示にする。

inset

分離モデルではボックスが押し込まれているように見える。つぶしモデルでは groove と等価。

outset

分離モデルではボックスが隆起しているように見える。つぶしモデルでは ridge と等価。

つぶしモデルでは、隣接ボックスのボーダー間で、指定値の競合が発生します。このとき、hidden が最も優先され、none が最低の優先順位になります。その他の値の場合、 'border-width' が大きいほうが優先されます。同じ太さの場合は、住専順位の高い順で、 'double' > 'solid' > 'dashed' > 'dotted' > 'ridge' > 'outset' > 'groove' > 'inset' となります。

vertical-align

インラインボックスの行ボックス内での垂直方向配置を与えるのが 'vertical-align' です。

テーブルのセルに与える場合、各セルが持つ、基底線／上線／中央線／下線に対して、垂直方向の位置が行方向にそろえられます。

baseline

セルの基底線が他のセルの基底線と同じ高さに揃えられる。

top

セルボックスの上線をセルがまたがる最初の行の上線に揃える。

bottom

セルボックスの下線をセルがまたがる最後の行の下線に揃える。

middle

セルの中央線をセルがまたがる行の中央線に揃える。

sub, super, text-top, text-bottom

セルに適用する場合は baseline と等価。

セルの基底線 (baseline) とは、セルの最初の行ボックスの基底線のことです。セルがテキストを含まない場合は、当該オブジェクトの基底線となり、セルがなにも内容に持たない場合は、セルボックスの下線に一致します。