上部にキャプションがあるテーブルの図。
この章では、CSSにおけるテーブルの処理モデルを定義します。この処理モデルの一部はレイアウトに関するものであり、この章では2つのアルゴリズムを紹介します。1つ目は固定テーブルレイアウトアルゴリズムで、これは明確に定義されています。一方、2つ目の自動テーブルレイアウトアルゴリズムはこの仕様では完全には定義されていません。
自動テーブルレイアウトアルゴリズムについては、広く普及している実装が比較的高い互換性を達成しています。
テーブルレイアウトは、データ間の表形式の関係を表現するために使用できます。作者はこれらの関係を文書言語で指定し、CSS 2.2を用いて表現を指定できます。
視覚媒体において、CSSテーブルは特定のレイアウトを実現するためにも使用できます。この場合、作者は文書言語内でテーブル関連の要素を使用せず、目的のレイアウトを達成するために関連する構造要素にCSSを適用するべきです。
作者は、テーブルをセルの矩形グリッドとして視覚的に整形することを指定できます。セルの行および列は、行グループおよび列グループに編成できます。行、列、行グループ、列グループ、およびセルにはそれぞれ境界線を描画できます（CSS 2.2には2つの境界線モデルがあります）。作者は、セル内でデータを垂直および水平に整列させることや、行または列内のすべてのセルのデータを整列させることができます。
ここにHTML 4で記述されたシンプルな3行3列のテーブルがあります:
<TABLE> <CAPTION>これはシンプルな3x3のテーブルです</CAPTION> <TR id="row1"> <TH>ヘッダー1 <TD>セル1 <TD>セル2 <TR id="row2"> <TH>ヘッダー2 <TD>セル3 <TD>セル4 <TR id="row3"> <TH>ヘッダー3 <TD>セル5 <TD>セル6 </TABLE>
このコードは、1つのテーブル（TABLE要素）、3つの行（TR要素）、3つのヘッダーセル（TH要素）、および6つのデータセル（TD要素）を作成します。この例の3列は暗黙的に指定されています: ヘッダーとデータセルによって必要な列数が決まります。
次のCSSルールは、ヘッダーセル内のテキストを水平に中央揃え、太字で表示します:
th { text-align: center; font-weight: bold }
次のルールは、ヘッダーセルのテキストをベースラインに整列させ、各データセル内のテキストを垂直に中央揃えにします:
th { vertical-align: baseline }
td { vertical-align: middle }
次のルールは、最上行が青い3pxの実線境界線で囲まれ、他の行が黒い1pxの実線境界線で囲まれることを指定します:
table { border-collapse: collapse }
tr#row1 { border: 3px solid blue }
tr#row2 { border: 1px solid black }
tr#row3 { border: 1px solid black }
ただし、行が接する箇所で行境界線が重なることに注意してください。row1とrow2の間の境界線の色（黒または青）および太さ（1pxまたは3px）はどうなるでしょうか？これは境界線の衝突解決のセクションで説明します。
次のルールは、テーブルキャプションをテーブルの上に配置します:
caption { caption-side: top }
上記の例は、CSSがHTML 4の要素とどのように機能するかを示しています。HTML 4では、さまざまなテーブル要素（TABLE、CAPTION、THEAD、TBODY、TFOOT、COL、COLGROUP、TH、およびTD）のセマンティクスが明確に定義されています。他の文書言語（XMLアプリケーションなど）では、事前定義されたテーブル要素がない場合があります。そのため、CSS 2.2では、作者が文書言語要素をテーブル要素に「マッピング」することを許可しています。これは'display'プロパティを介して行います。たとえば、次のルールは、FOO要素をHTML TABLE要素として機能させ、BAR要素をCAPTION要素として機能させます:
FOO { display : table }
BAR { display : table-caption }
次のセクションでは、さまざまなテーブル要素について説明します。この仕様では、テーブル要素という用語は、テーブルの作成に関与する任意の要素を指します。内部テーブル要素は、行、行グループ、列、列グループ、またはセルを生成する要素です。
CSS テーブルモデルは HTML4 テーブルモデルに基づいており、テーブルの構造がテーブルの視覚レイアウトと密接に対応しています。このモデルでは、テーブルはオプションのキャプションと任意の数のセルの行で構成されます。このモデルは「行優先」と言われます。なぜなら、作者が文書言語で明示的に列ではなく行を指定するためです。列はすべての行が指定された後に導き出されます。すなわち、各行の最初のセルは最初の列に属し、2番目のセルは2番目の列に属します。行と列は構造的にグループ化され、このグループ化がプレゼンテーションに反映される場合があります（例: 行のグループに境界線を描画する）。
したがって、テーブルモデルは、テーブル、キャプション、行、行グループ（ヘッダーグループとフッターグループを含む）、列、列グループ、およびセルで構成されます。
CSS モデルでは、文書言語にこれらのコンポーネントそれぞれに対応する要素を含める必要はありません。事前定義されたテーブル要素がない文書言語（XML アプリケーションなど）の場合、作者は文書言語の要素をテーブル要素にマッピングする必要があります。これは'display'プロパティを使用して行います。以下の'display'値は、任意の要素にテーブルの整形ルールを割り当てます。
これらの'display'値を持つ置換要素は、レイアウト中に指定された表示タイプとして扱われます。たとえば、'display: table-cell' に設定された画像は利用可能なセルスペースを埋め、その寸法は通常のセルと同様にテーブルサイズアルゴリズムに寄与する場合があります。
'display'が 'table-column' または 'table-column-group' に設定された要素はレンダリングされません（'display: none' を持つかのように）、しかし、それらはそれらが表す列に特定のスタイルを誘発する属性を持つことができるため有用です。
HTML4 のデフォルトスタイルシートは、HTML4でこれらの値を使用する方法を示しています：
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 }
ユーザーエージェントは、HTMLのテーブル要素に対してこれらの'display'プロパティ値を無視する場合があります。なぜなら、HTMLテーブルは後方互換レンダリングを目的とした他のアルゴリズムを使用してレンダリングされる場合があるためです。しかし、これはHTML内の非テーブル要素で 'display: table' を使用することを思いとどまらせるものではありません。
HTML以外の文書言語には、CSS 2.21 テーブルモデルのすべての要素が含まれていない場合があります。このような場合、テーブルモデルを機能させるために「欠落した」要素を仮定する必要があります。任意のテーブル要素は、それ自体の周囲に少なくとも3つのネストされたオブジェクト（'table'/'inline-table'要素、'table-row'要素、および'table-cell'要素に対応）からなる必要な匿名テーブルオブジェクトを自動的に生成します。欠落した要素は、以下のルールに従って匿名オブジェクト（例: 視覚テーブルレイアウト内の匿名ボックス）を生成します:
これらのルールの目的のために、以下の用語が定義されています:
これらのルールの目的のために、フロー外要素は幅と高さがゼロのインライン要素として表されます。それらの包含ブロックはそれに応じて選択されます。
以下の手順は3つの段階で実行されます。
このXML例では、'table'要素がHBOX要素を含むと仮定されます:
<HBOX> <VBOX>George</VBOX> <VBOX>4287</VBOX> <VBOX>1998</VBOX> </HBOX>
これは以下のスタイルシートが関連付けられているためです:
HBOX { display: table-row }
VBOX { display: table-cell }
この例では、3つの'table-cell'要素がROW内のテキストを含むと仮定されます。テキストはさらに、視覚整形モデルで説明されているように匿名インラインボックスでカプセル化されています:
<STACK> <ROW>これは <D>最上</D> 行です。</ROW> <ROW>これは <D>中間</D> 行です。</ROW> <ROW>これは <D>最下</D> 行です。</ROW> </STACK>
スタイルシートは以下の通りです:
STACK { display: inline-table }
ROW { display: table-row }
D { display: inline; font-weight: bolder }
テーブルセルは行と列の2つのコンテキストに属する可能性があります。ただし、ソース文書ではセルは常に行の子孫であり、列の子孫ではありません。それでも、セルのいくつかの側面は列にプロパティを設定することで影響を受ける場合があります。
次のプロパティは列および列グループ要素に適用されます:
以下は列にプロパティを設定するスタイルルールの例です。最初の2つのルールは、HTML 4の"rules"属性の値を"cols"に設定することを実現します。3つ目のルールは"totals"列を青にし、最後の2つのルールは固定レイアウトアルゴリズムを使用して列を固定サイズにする方法を示しています。
col { border-style: none solid }
table { border-style: hidden }
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }
視覚整形モデルにおいて、テーブルはブロックレベル（'display: table'の場合）またはインラインレベル（'display: inline-table'の場合）の要素のように振る舞うことができます。
いずれの場合も、テーブルは主ブロックコンテナボックスである テーブルラッパーボックス を生成します。このボックスにはテーブルボックス自体とキャプションボックス（文書の順序で）が含まれます。 テーブルボックスは テーブルの内部テーブルボックスを含むブロックレベルボックスです。 キャプションボックスは、自身のコンテンツ、パディング、マージン、およびボーダー領域を保持する主ブロックレベルボックスであり、テーブルラッパーボックス内で通常のブロックボックスとしてレンダリングされます。キャプションボックスがテーブルボックスの前または後に配置されるかは、以下で説明する'caption-side'プロパティによって決定されます。
テーブルラッパーボックスは、'display: table'の場合はブロックレベルで、'display: inline-table'の場合はインラインレベルです。テーブルラッパーボックスはブロック整形コンテキストを確立し、テーブルボックスはテーブル整形コンテキストを確立します。'inline-table'の場合、ベースラインの垂直整列を行う際に使用されるのは、テーブルラッパーボックスではなくテーブルボックスです。テーブルラッパーボックスの幅は、セクション17.5.2で説明されているように、その内部のテーブルボックスのボーダーエッジ幅です。テーブル上の'width'および'height'のパーセンテージは、テーブルラッパーボックス自体ではなく、テーブルラッパーボックスの包含ブロックに対して相対的です。
テーブル要素上のプロパティ'position'、'float'、'margin-*'、'top'、'right'、'bottom'、および'left'の計算値は、テーブルボックスではなくテーブルラッパーボックスで使用されます。他のすべての非継承プロパティの値はテーブルラッパーボックスではなくテーブルボックスで使用されます。（テーブル要素の値がテーブルボックスおよびテーブルラッパーボックスで使用されない場合、初期値が代わりに使用されます。）
上部にキャプションがあるテーブルの図。
| 名前: | caption-side |
|---|---|
| 値: | top | bottom | inherit |
| 初期値: | top |
| 適用対象: | 'table-caption' 要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定された通り |
このプロパティは、キャプションボックスがテーブルボックスに対してどの位置に配置されるかを指定します。値の意味は以下の通りです:
注: CSS2 では異なる幅と水平整列の動作が記述されていました。この動作は、このプロパティで 'top-outside' および 'bottom-outside' の値を使用することでCSS3で導入される予定です。
キャプションボックス内でキャプションの内容を水平に整列させるには、'text-align' プロパティを使用してください。
この例では、'caption-side' プロパティによりキャプションをテーブルの下に配置します。キャプションはテーブルの親要素と同じ幅となり、キャプションのテキストは左揃えになります。
caption { caption-side: bottom;
width: auto;
text-align: left }
内部テーブル要素は、テーブルボックスによって確立されたテーブル整形コンテキストに参加する矩形のボックスを生成します。これらのボックスにはコンテンツと境界線があり、セルにはパディングもあります。内部テーブル要素にはマージンはありません。
これらのボックスの視覚レイアウトは、行と列からなる矩形で不規則なグリッドによって管理されます。各ボックスは、以下のルールに従って決定されるグリッドセル全体の数を占有します。これらのルールは、HTML 4 またはそれ以前のHTMLバージョンには適用されません。HTMLでは行および列のスパンに独自の制限を課しています。
折りたたみ境界モデルでは、行、列、行グループ、および列グループのエッジは、セルの境界が中心となる仮想グリッド線と一致します。（したがって、このモデルでは、行が一緒にテーブルを正確に覆い、隙間がありません。列も同様です。）分離境界モデルでは、エッジはセルの境界エッジと一致します。（したがって、このモデルでは、行、列、行グループ、または列グループの間に隙間が生じる可能性があります。これは'border-spacing'プロパティに対応します。）
注記。 テーブルセルの配置およびフロートは、セクション9.7のルールに従い、それらがテーブルセルではなくなる原因となる可能性があります。フロートが使用される場合、匿名テーブルオブジェクトのルールにより、匿名のセルオブジェクトが作成される場合もあります。
以下はルール5を説明する例です。以下の不正な(X)HTMLスニペットは競合するセルを定義します:
<table> <tr><td>1 </td><td rowspan="2">2 </td><td>3 </td><td>4 </td></tr> <tr><td colspan="2">5 </td></tr> </table>
ユーザーエージェントは、図の左側のようにセルを視覚的に重ね合わせるか、図の右側のようにセルを移動して視覚的な重複を回避するかを自由に選択できます。
エラーがあるHTMLテーブルの2つの可能なレンダリング。
各テーブルセルの背景を見つける目的で、異なるテーブル要素は6つの重ねられたレイヤーとして考えることができます。あるレイヤーの要素に設定された背景は、その上のレイヤーが透明な背景を持つ場合にのみ表示されます。
テーブルレイヤーの模式図。
「欠落したセル」とは、行/列グリッド内で要素または疑似要素によって占有されていないセルを指します。欠落したセルは、それらの位置を匿名のテーブルセルボックスが占有しているかのようにレンダリングされます。
次の例では、最初の行には4つの空でないセルが含まれていますが、2番目の行には1つの空でないセルしか含まれていません。そのため、テーブルの背景が輝いて見えますが、最初の行のセルがこの行にまたがる場合を除きます。以下のHTMLコードとスタイルルール:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>テーブル例</TITLE>
<STYLE type="text/css">
TABLE { background: #ff0; border: solid black;
empty-cells: hide }
TR.top { background: red }
TD { border: solid black }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR CLASS="top">
<TD> 1
<TD rowspan="2"> 2
<TD> 3
<TD> 4
<TR>
<TD> 5
<TD>
</TABLE>
</BODY>
</HTML>
は次のようにフォーマットされる可能性があります:
下段に空のセルがあるテーブル。
テーブルが 'border-collapse: separate' を持つ場合、'border-spacing' プロパティによって与えられる領域の背景は常にテーブル要素の背景となります。分離境界モデルを参照してください。
CSSはテーブルの「最適な」レイアウトを定義していません。なぜなら、多くの場合、何が最適かは好みによるためです。CSSは、テーブルをレイアウトする際にユーザーエージェントが守るべき制約を定義します。ユーザーエージェントはこれを行うために任意のアルゴリズムを使用することができ、特に「固定レイアウトアルゴリズム」が選択されていない場合にはレンダリング速度を優先することができます。
このセクションは、セクション10.3で説明されている幅を計算するルールを上書きします。特に、テーブルのマージンが'0'に設定され、幅が'auto'に設定されている場合、テーブルは包含ブロックを自動的に埋めるようにはなりません。ただし、テーブルの'width'の計算値が見つかった後（以下のアルゴリズム、または適切な場合には他のUA依存のアルゴリズムを使用して）、セクション10.3の他の部分が適用されます。したがって、たとえば左と右のマージンを'auto'に設定することでテーブルを中央揃えにすることが可能です。
将来的なCSSの更新では、テーブルが包含ブロックに自動的に適合する方法が導入される可能性があります。
| 名前: | table-layout |
|---|---|
| 値: | auto | fixed | inherit |
| 初期値: | auto |
| 適用対象: | 'table' および 'inline-table' 要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定された通り |
'table-layout' プロパティは、テーブルセル、行、および列のレイアウトに使用されるアルゴリズムを制御します。値の意味は次の通りです:
次に2つのアルゴリズムについて説明します。
この（高速な）アルゴリズムでは、テーブルの横方向のレイアウトはセルの内容に依存せず、テーブルの幅、列の幅、および境界線またはセル間隔にのみ依存します。
テーブルの幅は、'width' プロパティで明示的に指定できます。'auto'（'display: table'および'display: inline-table'の両方の場合）の値は、自動テーブルレイアウトアルゴリズムを使用することを意味します。 ただし、テーブルが通常のフロー内のブロックレベルテーブル（'display: table'）である場合、UAは指定された幅が'auto'であっても、10.3.3 のアルゴリズムを使用して幅を計算し、固定テーブルレイアウトを適用することができます（ただし必須ではありません）。
UAが'width'が'auto'の場合に固定テーブルレイアウトをサポートする場合、次のように包含ブロックより4em狭いテーブルを作成できます:
table { table-layout: fixed;
margin-left: 2em;
margin-right: 2em }
固定テーブルレイアウトアルゴリズムでは、各列の幅は次のように決定されます:
テーブルの幅は、テーブル要素の'width'プロパティの値と、列の幅の合計（セル間隔または境界線を含む）のうち大きい方になります。テーブルが列よりも広い場合、余分なスペースは列に分配されるべきです。
後続の行に、テーブル列要素および最初の行で決定された数を超える列がある場合、追加の列がレンダリングされない場合があります。CSS 2.2では、レンダリングされた場合の列およびテーブルの幅を定義していません。 'table-layout: fixed'を使用する場合、作者は最初の行から列を省略しないようにするべきです。
この方法では、ユーザーエージェントは最初の行全体を受信した時点でテーブルのレイアウトを開始できます。後続の行のセルは列の幅に影響しません。コンテンツがあふれるセルは、'overflow'プロパティを使用して、あふれたコンテンツをクリップするかどうかを決定します。
このアルゴリズム（通常2回以下のパスを必要とする）では、テーブルの幅は列の幅（および中間の境界線）によって決まります。このアルゴリズムは、この仕様の執筆時点でいくつかの人気のあるHTMLユーザーエージェントの動作を反映しています。UAは、'table-layout'が'auto'の場合に、このアルゴリズムを実装してテーブルレイアウトを決定する必要はありません。他のアルゴリズムを使用しても問題ありません。
自動テーブルレイアウトへの入力には、包含ブロックの幅、テーブルおよびその子孫に設定されたCSSプロパティのみが含まれます。
注記。 これはCSS3でより詳細に定義される可能性があります。
このセクションの残り部分は規範的ではありません。
このアルゴリズムは、テーブルのすべてのコンテンツにアクセスして最終的なレイアウトを決定する必要があるため、非効率的な場合があります。また、1回以上のパスを必要とする可能性があります。
列の幅は次のように決定されます:
各セルの最小コンテンツ幅（MCW）を計算します。フォーマットされたコンテンツは任意の行数にまたがることができますが、セルボックスをオーバーフローしてはなりません。セルの'width'（W）がMCWより大きい場合、Wが最小セル幅になります。値が'auto'の場合、MCWが最小セル幅になります。
また、各セルの「最大」セル幅を計算します。明示的な改行が発生する場所以外では改行せずにコンテンツをフォーマットします。
各列について、その列にのみまたがるセルから最大および最小列幅を決定します。最小幅は、最も大きな最小セル幅を持つセル（または列の'width'）によって要求される幅です。最大幅は、最も大きな最大セル幅を持つセル（または列の'width'）によって要求される幅です。
複数列にまたがる各セルについて、セルがまたがる列の最小幅を増加させ、それらがセルと同じ幅になるようにします。同様に、最大幅についても同じことを行います。可能であれば、すべてのまたがる列をほぼ同じ量だけ広げます。
'width'が'auto'以外の値を持つ各列グループ要素について、列グループがまたがる列の最小幅を増加させ、それらが列グループの'width'と同じ幅になるようにします。
これにより、各列の最大幅と最小幅が得られます。
キャプション幅の最小値（CAPMIN）は、仮想的な'table-cell'としてフォーマットされたキャプションを含む最小キャプション外部幅として計算されます。最小キャプション外部幅の最大値がCAPMINになります。
列とキャプションの幅は、最終的なテーブル幅に次のように影響します:
列幅のパーセンテージ値はテーブル幅に対して相対的です。テーブルが'width: auto'を持つ場合、パーセンテージは列の幅に対する制約を表し、UAはそれを満たそうとするべきです。（明らかに、これは常に可能ではありません。たとえば、列の幅が'110%'の場合、制約を満たすことはできません。）
注記。 このアルゴリズムでは、行（および行グループ）と列（および列グループ）は、それらが含むセルの寸法によって制約され、また制約を与えます。列の幅を設定すると、間接的に行の高さに影響を与える可能性があり、その逆も同様です。
テーブルの高さは、'table'または'inline-table'要素の'height'プロパティによって決定されます。値が'auto'の場合、高さは行の高さの合計にセル間隔または境界線を加えたものとなります。それ以外の値は最小高さとして扱われます。CSS 2.2では、'height'プロパティがテーブルを元の高さより高くする場合に余分なスペースがどのように分配されるかについては定義されていません。
注。 将来的なCSSの更新でこれがさらに明確化される可能性があります。
'table-row'要素のボックスの高さは、ユーザーエージェントが行内のすべてのセルを利用できるようになった時点で計算されます。それは行の計算された'height'、 各セルの計算された'height'、 およびセルに必要な最小高さ（MIN）の最大値です。'table-row'の'height'値が'auto'の場合、レイアウトに使用される行の高さはMINです。MINはセルボックスの高さとセルボックスの整列（行ボックスの高さの計算に似ています）に依存します。 CSS 2.2は、高さがパーセンテージ値で指定された場合にテーブルセルおよびテーブル行の高さがどのように計算されるかを定義していません。また、行グループに対する'height'の意味も定義していません。
CSS 2.2では、セルボックスの高さはコンテンツに必要な最小高さです。テーブルセルの'height'プロパティは行の高さに影響を与える可能性がありますが（上記参照）、セルボックスの高さを増加させることはありません。
CSS 2.2は、複数行にまたがるセルが行の高さの計算にどのように影響を与えるかについては定義していません。ただし、関連する行の高さの合計は、行にまたがるセルを収容するのに十分でなければなりません。
各テーブルセルの'vertical-align'プロパティは、行内でのセルの整列を決定します。各セルのコンテンツにはベースライン、トップ、中央、およびボトムがあり、行自体にも同様です。テーブルの文脈では、'vertical-align'の値は次の意味を持ちます:
セルのベースラインは、セル内の最初のインフロー行ボックスまたはセル内の最初のインフローテーブル行のベースラインのいずれか早い方です。そのような行ボックスまたはテーブル行がない場合、ベースラインはセルボックスのコンテンツエッジの下端です。ベースラインを見つける目的で、スクロールメカニズムを持つインフローボックス（'overflow'プロパティを参照）は、スコロール位置が原点にあるかのように考慮される必要があります。なお、ベースラインがセルの下端境界よりも低くなる場合があります。以下の例を参照してください。
すべてのセルで'vertical-align: baseline'が設定されている場合、セルボックスの上端とベースラインの間の最大距離が行のベースラインを設定するために使用されます。以下は例です:
'vertical-align'のさまざまな値がテーブルセルに与える影響を示す図。
セルボックス1と2はそのベースラインで整列されています。セルボックス2のベースライン上の最大高さが行のベースラインを決定します。
行にベースラインに整列されたセルボックスがない場合、その行のベースラインは行内の最も低いセルのコンテンツエッジの下端です。
曖昧な状況を避けるため、セルの整列は次の順序で進行します:
行の高さより小さいセルボックスには、追加のトップまたはボトムパディングが付与されます。
この例のセルは、その下端境界よりも低いベースラインを持っています:
div { height: 0; overflow: hidden; }
<table>
<tr>
<td>
<div> Test </div>
</td>
</tr>
</table>
セルボックス内のインラインレベルのコンテンツの水平整列は、 'text-align'プロパティの値によって指定できます。
'visibility' プロパティは、行、行グループ、列、および列グループ要素に対して'collapse'という値を取ることができます。この値は、行または列全体を表示から削除し、行または列が通常占めるスペースを他のコンテンツが利用できるようにします。折りたたまれた列や行と交差するスパン行やスパン列の内容はクリップされます。ただし、行や列の抑制はテーブルのレイアウトには影響を与えません。これにより、列の制約の潜在的な変更を考慮するためにテーブルの再レイアウトを強制することなく、動的効果によってテーブル行や列を削除できます。
CSSでは、テーブルセルに境界線を設定するための2つの異なるモデルがあります。1つは、個々のセルの周囲に分離された境界線を設定するのに最適であり、もう1つはテーブルの端から端まで連続する境界線に適しています。多くの境界線スタイルはどちらのモデルでも実現可能であり、どちらを使用するかはしばしば好みの問題となります。
| 名前: | border-collapse |
|---|---|
| 値: | collapse | separate | inherit |
| 初期値: | separate |
| 適用対象: | 'table' および 'inline-table' 要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定された通り |
このプロパティはテーブルの境界モデルを選択します。値が'separate'の場合、分離された境界線モデルを選択します。値が'collapse'の場合、折り畳まれた境界線モデルを選択します。モデルについては以下で説明します。
| 名前: | border-spacing |
|---|---|
| 値: | <length> <length>? | inherit |
| 初期値: | 0 |
| 適用対象: | 'table' および 'inline-table' 要素* |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 絶対的な2つの長さ |
*) 注: ユーザーエージェントは'frameset'要素にも'border-spacing'プロパティを適用する場合があります。どの要素が'frameset'要素であるかはこの仕様では定義されておらず、文書言語によります。例えば、HTML4では<FRAMESET>要素を定義し、XHTML 1.0では<frameset>要素を定義します。'frameset'要素上の'border-spacing'プロパティは、非標準の'framespacing'属性の有効な代替として使用できます。
長さは隣接するセル境界線を分離する距離を指定します。1つの長さが指定された場合、それは水平および垂直の間隔の両方を指定します。2つ指定された場合、最初が水平間隔、2番目が垂直間隔を指定します。長さは負の値にはできません。
テーブル境界とテーブル端のセル境界間の距離は、その側のテーブルのパディングに関連する境界間隔距離を加えたものです。例えば、右側では、その距離はpadding-right + horizontal border-spacingです。
テーブルの幅は、左内側パディングエッジから右内側パディングエッジまでの距離です（境界間隔を含み、パディングと境界を除く）。
ただし、HTMLおよびXHTML1では、<table>要素の幅は左境界エッジから右境界エッジまでの距離です。
注: CSS3では、この特異な要件はUAスタイルシートルールと'box-sizing'プロパティの用語で定義されます。
このモデルでは、各セルは個別の境界線を持ちます。'border-spacing'プロパティは隣接するセル境界間の距離を指定します。このスペースでは、行、列、行グループ、および列グループの背景は透明であり、テーブルの背景が透けて見えます。行、列、行グループ、および列グループには境界線を持つことはできません（つまり、ユーザーエージェントはこれらの要素の境界プロパティを無視しなければなりません）。
以下の図のテーブルは、次のようなスタイルシートの結果である可能性があります:
table { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
td { border: inset 5pt }
td.special { border: inset 10pt } /* 左上のセル */
'border-spacing'が長さ値に設定されたテーブル。各セルにはそれぞれの境界線があり、テーブルにも別の境界線があります。
| 名前: | empty-cells |
|---|---|
| 値: | show | hide | inherit |
| 初期値: | show |
| 適用対象: | 'table-cell' 要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定された通り |
分離された境界線モデルでは、このプロパティは、目に見えるコンテンツがないセルの周囲の境界線および背景の描画を制御します。空のセルや'visibility'プロパティが'hidden'に設定されたセルは、目に見えるコンテンツがないと見なされます。 セルは以下のいずれかを含まない限り空と見なされます:
このプロパティが'show'の値を持つ場合、境界線および背景は空のセルの周囲/背後に描画されます（通常のセルと同様）。
'hide'の値は、空のセルの周囲/背後に境界線や背景が描画されないことを意味します（17.5.1のポイント6を参照）。さらに、行内のすべてのセルが'hide'の値を持ち、目に見えるコンテンツがない場合、その行の高さはゼロとなり、行の片側にのみ垂直方向の境界間隔が存在します。
次のルールは、すべてのセルの周囲に境界線および背景を描画します:
table { empty-cells: show }
折り畳まれた境界線モデルでは、セル、行、行グループ、列、および列グループ全体または一部を囲む境界線を指定することができます。この方法でHTMLの"rules"属性に対応する境界線を指定できます。
境界線はセル間のグリッド線の中央に配置されます。ユーザーエージェントは、奇数個の離散単位（画面ピクセル、プリンタドットなど）の場合の丸め処理について一貫したルールを見つける必要があります。
以下の図は、テーブルの幅、境界線の幅、パディング、およびセル幅がどのように相互作用するかを示しています。それらの関係は、次の方程式によって表されます。この方程式はテーブルの各行について成り立ちます:
row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)
ここでnは行内のセルの数を、padding-leftiおよび padding-rightiはセルiの左（または右）のパディングを、 border-widthiはセルiとセルi + 1の間の境界線を指します。
ユーザーエージェントは、テーブルの最初の行の最初と最後のセルを調べることで、テーブルの左側および右側の初期境界線幅を計算する必要があります。テーブルの左側の境界線幅は最初のセルの折り畳まれた左境界線の半分、右側の境界線幅は最後のセルの折り畳まれた右境界線の半分です。後続の行により大きな折り畳まれた左側および右側の境界線がある場合、余剰部分はテーブルのマージン領域に流れ込みます。
テーブルの上部の境界線幅は、テーブルの上部境界線と折り畳まれるすべてのセルを調べることで計算されます。テーブルの上部の境界線幅は、最大折り畳まれた上部境界線の半分に等しくなります。下部の境界線幅は、テーブルの下部と折り畳まれるすべてのセルを調べることで計算されます。下部の境界線幅は、最大折り畳まれた下部境界線の半分に等しくなります。
マージン内に流れ込む境界線は、テーブルがどの程度祖先をオーバーフローしているかを判断する際に考慮されます（'overflow'を参照）。
セルと境界線の幅およびセルのパディングを示す模式図。
このモデルでは、テーブルの幅にはテーブル境界線の半分が含まれます。また、このモデルでは、テーブルにはパディングはありません（ただし、マージンはあります）。
CSS 2.2では、テーブル要素の背景のエッジがどこにあるかは定義されていません。
折り畳まれた境界線モデルでは、セルの各辺における境界線は、そこに集まるさまざまな要素（セル、行、行グループ、列、列グループ、テーブル本体）に設定された境界線プロパティによって指定されます。これらの境界線は幅、スタイル、色が異なる場合があります。基本ルールとして、各辺では最も「目を引く」境界線スタイルが選ばれます。ただし、'hidden'スタイルが発生した場合は、無条件にその境界線がオフになります。
競合が生じた場合、どの境界線スタイルが「勝つ」かを決定するルールは以下の通りです:
以下の例は、これらの優先ルールの適用を示しています。このスタイルシート:
table { border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
td { border: 1px solid red; padding: 1em; }
td.cell5 { border: 5px dashed blue; }
td.cell6 { border: 5px solid green; }
このHTMLソース:
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR id="row2">
<TD> 4
<TD class="cell5"> 5
<TD class="cell6"> 6
</TR>
<TR id="row3">
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR id="row4">
<TD> 10
<TD> 11
<TD> 12
</TR>
<TR id="row5">
<TD> 13
<TD> 14
<TD> 15
</TR>
</TABLE>
は以下のような結果を生成する可能性があります:
折り畳まれた境界線を持つテーブルの例。
以下は、隠された折り畳まれた境界線の例です:
2つの内側境界線が省略されたテーブル。
HTMLソース:
<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
<TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
<TD style="border: solid">bar</TD></TR>
</TABLE>
'border-style'のいくつかの値は、他の要素と比べてテーブル内で異なる意味を持ちます。以下のリストでは、それらはアスタリスクでマークされています。