この文書の情報
Katsu <katsu@ea.mbn.or.jp>最終改訂日：2007年07月21日
表の整形およびアルゴリズム，表のキャプション，セルボーダーの制禦など，表について。
CSS表モデルはHTML 4の表モデルを基にされており，表，キャプション（題名），行，行グループ，列，列グループ，セルから構成します。CSSでは文書言語に表にかかわる要素が揃っている必要はありません。XML応用のごとく表専用の要素が定義済みではない場合，何らかの要素を表として対応づける必要があります。それは以下にしめす'display'プロパティの値で指定し，任意要素に表の整形規則をわりあてます：
table（table） |
その要素をブロックレヴェルの表として定義する。 |
|---|---|
inline-table（table） |
その要素をインラインレヴェルの表として定義する。 |
table-row（tr） |
その要素を表の行にする。 |
table-row-group（tbody） |
その要素をひとつ以上の行をまとめる行グループにする。 |
table-header-group（thead） |
'table-row-group' に類似。視覚整形の際にはあらゆる他の行より先に，上側のキャプションより後に表示される。印刷をおこなうUAは，複数頁をまたいでいる表において，各頁のあたまにヘッダ行を繰返してよい。 |
table-footer-group（tfoot） |
'table-row-group' に類似。視覚整形の際にはあらゆる他の行より後に，下側のキャプションより先に表示される。印刷をおこなうUAは，複数頁をまたいでいる表において，各頁のおわりにフッタ行を繰返してよい。 |
table-column（col） |
その要素を表の列にする。 |
table-column-group（colgroup） |
その要素をひとつ以上の列をまとめる列グループにする。 |
table-cell（td，th） |
その要素を表のセルとして表現する。 |
table-caption（caption） |
その要素を表のキャプション（題名）にする。 |
'display'プロパティの値として 'table-column' あるいは 'table-column-group' に設定された要素はレンダリングされません（つまり 'display: none' のごとく扱われます）が，対応する列や列グループにスタイルを設定するのに役立ちます。（see 列を操作する）
CSS2.0適合では，HTML文書の著者が宣言した 'display' のこれら値は，無視されるかもしれません。
表のセルは行に属しているという見方と，列に属しているという見方ができます。しかしソース文書上では，セルは列ではなく，行の子孫に成っています。つまり，列ではなく行を明示する構造なのですが，プロパティを設定して列単位で操作可能な部分もあります。
以下にしめすプロパティでは，列要素（col要素）や列グループ要素（colgroup要素）にも適用可能です：
列要素に他のプロパティを指定しても，その列区分にあるセルのスタイルには影響を及ぼしません。なぜなら，セルは列の子孫ではなく，値が継承され得ないからです。たとえば列に'text-align'プロパティを適用しても，セル内の行揃えに影響しません。フォントなどでも同様です。
各セルの背景を決定する際には，表要素が六つの階層に分かれて，層を成していると考えます。
ある階層に属する要素の背景は，上位階層の背景が透明な場合にだけ，可視になります。その階層順は，最下層が表ボックスであり，列グループ，列，行グループ，行の順に重ねられ，最上層はセルに成っています。（see 表の階層と透過性； PNG）
| 値 | top | bottom | left | right | inherit |
|---|---|
| 初期値 | top |
| 適用要素 | 表のキャプション要素（caption要素） |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，表に対するキャプション（題名）の相対位置を指定します。
各値は以下のような意味を持ちます：
top, bottomキャプションを表ボックスの上側（top）あるいは下側（bottom）に配置する。
これらは恰も表要素に先行・後行するブロックレヴェル要素のごとく整形されます（しかし表要素からキャプション要素へは継承が行われる）。幅を算出する際もブロックレヴェルとして扱われ，表要素が参照する包含ブロックの幅に対して解決されます。
表要素は匿名ボックスを生成し，表ボックス自身とキャプションを其処に収めます； 匿名ボックスは両者が収る最小寸法になる。表を再配置する際には，キャプションが常に表から離れないよう，表ボックスだけではなく匿名ボックスごと移動されます。
上側/下側のキャプションと表ボックスの間では，垂直マージンが相殺し合います。（表と題名の図； PNG）
CSS2.0では異る幅と水平整列の振舞いで説明されていますが，CSS2.1ではそうではありません。CSS2.0での振舞いは，CSS3で使用されるこのプロパティに対する値 'top-outside' および 'bottom-outside' で導入されます。
CSS2.1における表モデルでは，表ボックス自身とその上側か下側に配置されるキャプションボックスを（文書内の出現順序で）含む匿名ボックスが生成されます。キャプションボックスは自身の内容領域，パディング，ボーダーおよびマージンを保有するブロックレヴェルのボックスを生成し，匿名ボックスの内側にある通常のブロックボックスとしてレンダリングされます。
匿名ボックスの幅は，その内側にある表ボックスのボーダー辺と重なります。表要素に対する 'width' と 'height' のパーセント値は，匿名ボックスの包含ブロックに対して相対的に解決されます； 匿名ボックス自身ではありません。
表ボックスに対する各種プロパティ 'position'，'float'，'margin-*'，'top'，'right'，'bottom'，'left' の算出値は，表ボックスの代りに匿名ボックスに対して使用されます。表ボックスはこれらプロパティのために，初期値を用います。
〔補足終了〕
left, rightキャプションを表ボックスの左側（left）あるいは右側（right）に配置する。
キャプションの幅は'width'プロパティで指定できます。'width: auto' である場合，UAに妥当な選択をするよう委ねる（「可能な限り狭い幅」にするのも「1行にすべて収める」のも自由）としているので，'auto' にしないほうが無難です。垂直方向の位置を揃えるには'vertical-align'プロパティを用います。ただし効果を持つ値は 'top'，'middle'，'bottom' のみに限定され，ほかの値は 'top' として扱われます。
キャプションボックスの中で水平方向に内容を揃えるには，'text-align'プロパティを用います。
| ヘッダ | ヘッダ | ヘッダ | ヘッダ |
|---|---|---|---|
| データ | データ | データ | データ |
| データ | データ | データ | データ |
caption {
text-align: center;
caption-side: bottom;
}| 値 | auto | fixed | inherit |
|---|---|
| 初期値 | auto |
| 適用要素 | 表要素（table要素） |
| 継承性 | なし |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，表のセル・行・列をレイアウトするのに用いるアルゴリズムを設定します。
各値は以下のような意味を持ちます：
fixed固定レイアウトアルゴリズムを用いる。
この方式を利用するためには，表全体の幅を明示する必要があります。表要素（HTMLではtable要素）に対する 'width' の算出値が 'auto' であるなら（'display' の値が 'table'，'inline-table' の何方でも）自動レイアウトアルゴリズムが使用されます。
【註】：CSS2.1適合では，通常に流し込まれるブロックレヴェルの表（display: table）である場合，たといその幅の算出値が 'auto' であるにしても，UAは固定テーブルレイアウトを適用するためにsection 10.3.3（参考邦訳）で述べるアルゴリズムを使用して，幅を算出するかもしれません。しかしそうする必要はないとされているので，やはり'width'プロパティで明示して置くのが無難でしょう。
この方式だと，以降の行が列幅に影響しないので，User Agentは1行目のデータを取得してすぐにレンダリングを開始できます。つまり，行単位ですばやくレイアウトできます。セルから内容が溢れ出る場合には，'overflow'プロパティに則して処理されます。
不明確な幅の各列は，表要素の残り幅が公平に等分されるので，必要に応じて列幅とセル幅を明示してください。
auto自動レイアウトアルゴリズムを用いる。（これの解釈はUser Agentの任意で決めてよい。）
テーブル総てのデータを読込んでから，その内容に応じて各列幅を決め，レンダリングするなど。
レイアウトアルゴリズムの詳細は，CSS2勧告邦訳 17.5.2 表の幅を計算するを参照してください。
table {
width: 80%;
table-layout: fixed;
}| 値 | collapse | separate | inherit |
|---|---|
| 初期値 | collapse |
| 適用要素 | 表要素（table要素） |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは表に適用するふたつのボーダーモデルのうち，何れかを設定します。
各値は以下のような意味を持ちます：
separate分離ボーダーモデルを用いる。表周囲のボーダーと各セルのボーダーとが分離されます。
表ボックス自身のボーダー内側にはパディングが存在でき，更にその内側にはボーダー間隔を持てます。
表ボックスの幅は，パディング左辺内側から，パディング右辺内側までの距離です（ボーダー間隔は含むが，表のパディングおよびボーダーは除外）。しかしHTMLおよびXHTML1のtable要素の幅は，ボーダー左辺から，ボーダー右辺までの距離です。
このモデルにおいては，行・行グループ・列・列グループに対してボーダーを設定したとしても，無視されます。
collapse結合ボーダーモデルを用いる。表周囲のボーダーと各セルのボーダーとが結合されます。
この場合ボーダーは，セル間にあるグリッド線を中央の軸として揃えられます（PNG画像）。
このモデルでは表内部を構成する全要素にボーダーを設定でき，互いに競合が生じます。その解決法：
結合ボーダーモデルである表ボックスの幅（width）には，表自身が持つボーダーの半分だけが含まれることに，注意してください。また表ボックス自身のボーダー内側には，パディング領域が存在しません。しかし，表の外側にはマージン領域を持てます。
CSS2.1においては表内部の各構成要素について，それらに適用される背景の辺がどこであるのか定義されません。ただし，典型的なウェブブラウザ実装において各背景を適用する際には，各領域のセル間にある中央軸までの範囲として覆います。
【註】：CSS2.1では初期値が 'separate' に変更されています。これは実際の主要ブラウザの実装において，たといCSS表モデルが実装されないにしても，'separate' に近い振舞いを初期値として装うので，ユーザの認識に適合するだろう，と豫想された結果です。
| ヘッダ | ヘッダ |
|---|---|
| データ | データ |
| ヘッダ | ヘッダ |
|---|---|
| データ | データ |
table { border-collapse: collapse; }| 値 | <length> <length>? | inherit |
|---|---|
| 初期値 | 0 |
| 適用要素 | 表要素（table要素） |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは 'border-collapse: separate' である時の，隣接ボーダーの間隔を調整します。
<length> <length>?隣接する二本のボーダーを別つ空白距離を定数長で指定する。負の値は不正です。
| 値が1つの場合 | 値1:上下左右の間隔 |
|---|---|
| 値が2つの場合 | 値1:左右の間隔，値2:上下の間隔 |
このプロパティに拠って与えられる隙間の背景は，常に表要素の背景が透けて見えます。
| ヘッダ | ヘッダ |
|---|---|
| データ | データ |
table {
border-collapse: separate;
border-spacing: 1em;
}| 値 | show | hide | inherit |
|---|---|
| 初期値 | show |
| 適用要素 | 表のセル要素（th，td要素） |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは 'border-collapse: separate' である時の，空セルのボーダーと背景を制禦します。
空セルには，次に挙げる可視内容を持たないセルが該当します：
\20），水平タブ（\09），復帰（\0D），行送り（\0A）のみの内容である場合。ほかの空白類，表意空白（U+3000）， （U+00A0）などは； もしくは上述の空白類のみの内容であっても，'white-space'プロパティの処理でひとつの空白に纏められていなければ（たとえば 'pre' 値が指定されている時などは），可視内容に含まれます。
各値は以下のような意味を持ちます：
show空セルのボーダーと背景をレンダリングする。
hide空セルのボーダーと背景をレンダリングしない。
1行すべてのセルが 'hide' を採り，かつ可視内容も持たないなら，その行はあたかも 'display: none' のごとくなる。
【註】：改訂版CSS2.1において 'hide' が指定されている空セルは，その上位層にある列，列グループ，行，行グループの背景をとおして透明になります。つまり，そのセルからは表要素の背景が透けて見えます。また，1行すべてのセルが 'hide' を採り，かつ可視内容も持たない場合の振舞いが変更されており，その行はゼロの高さを持つとされ，そして垂直ボーダー間隔は行の片側にだけレンダリングされます。
【註】：このプロパティを用いれば，表のセルを空にしていても，その枠および背景を適切にレンダリングできます； 画面上または印刷上の如何を問わず。これは空セルの視覚効果を得るだけの餘計なマークづけトリック（透明画像や無駄な空白）の排除に繋ります。
下記の何れの表も，1行目・1列目のデータセル（td要素）が「空セル」になっています。
| CSS1 | CSS2 | |
|---|---|---|
| 勧告された日時 | 1996年12月17日 | 1998年05月12日 |
この場合の空セルは，ボーダーが描かれて，背景色はth要素と同じグレイになる筈です。
| HTML3.2 | HTML4.01 | |
|---|---|---|
| 勧告された日時 | 1997年01月14日 | 1999年12月24日 |
この場合の空セルは，ボーダーが描かれず，背景色は表要素と同じ白色になる筈です。
thead td {
color: inherit;
background: transparent;
empty-cells: show;
}