TABLE

HTML 4 における table 要素

まず、HTML 4での、table 要素の概形を示しておく。

<table>
<caption>3行3列の表の例</caption>
<tr>
    <th>header 1</th>  <td>cell (1,1)</td>  <td>cell (1,2)</td>
</tr>
<tr>
    <th>header 2</th>  <td>cell (2,1)</td>  <td>cell (2,2)</td>
</tr>
<tr>
    <th>header 3</th>  <td>cell (3,1)</td>  <td>cell (3,2)</td>
</tr>
</table>

caption-side

表の caption の表示位置を設定します。

【利用例】

caption { caption-side: bottom }

この例では、表のタイトルの表示位置は表の下に表示される。

また、 CAPTION 要素の文字列の水平位置は、他の殆どの要素と同様に 'text-align' で揃える事が出来ます。

【利用例】

caption { caption-side: bottom;
	text-align:right }

right, left の場合の注意

テーブルの左右に指定されたキャプションでは、 "width: auto" 以外の値を明示するように推奨されます。 'auto' を指定すると、どのような表示幅を採用するかに規定がありませんので、可能な限り最も狭い幅から一行に配置できるだけの幅まで、ブラウザに一任することになります。

また、左右に配置したキャプションの水平位置は 'text-align' プロパティで指定し、テーブルの高さに対する垂直位置は 'vertical-align' プロパティで指定します。 'vertical-align' で有効な値は 'top', 'middle', 'bottom' の三つだけで、他の値は全て 'top' と解釈されます。

セル内の文字列配置

セル内の文字列の位置は 'text-align', 'vertical-align' を用いれば指定できます。

水平位置配置

セル要素（td, th）に指定する場合、プロパティ値に通常採り得るキーワードに加えて「文字」が生じます。

【記述例】

td { text-align: "." }

この例では、小数点のピリオドが揃える基準軸の文字に指定してあります。セル内にここで指定した文字が存在しない場合、文字列の後ろ端が基準軸になります。

表示概念図
   1.0e0
1000
   0.25e0

また、基準軸文字は各セルで共通している必要はありません；

td.doll { text-align: "$" }
td.yen { text-align: "¥" }

表示概念図
   ¥1,000-
   ¥500-
   $1,000-
100

垂直位置調整

セル内の要素の垂直位置は 'vertical-align' で調整できますが、指定できるキーワードに制限が生じます。使えるキーワードは次のものに限られます；

baseline, top, bottom, middle

この他の、 sub、super、text-top、text-bottom に関しては baseline であると解釈されます。

結合モデルと分離モデル

ボーダーを引いた時に、セルの間を分離するかどうかを設定できます。

【表示例】 I.E., Netscape 供に初期値は仕様を無視して separate を採用しています。

table.sep { border: 1px solid black;
    border-collapse: separate }
table.coll { border: 1px solid black;
    border-collapse: collapse }
td { border: 1px solid black }

I.E. では有効ですが Netscape6.2 では無効です。 Netscape 6.0 では有効でしたがとても表示が乱れていました。バグフィックス中なのでしょう。

分離モデル

分離モデルでは、各セルのボーダー同士が分離して独立した矩形を表示します。行グループ、列グループ、行要素、列要素のボーダーは無視されます。

また、 TABLE 幅（'width' で指定）の外端から外枠線が引かれ、このボーダーの幅は TABLE 幅に全く算入されません。

ボーダー間の距離

このモデルでは、独立したセルが個々にボーダーを持っています。このプロパティは、独立したセルのボーダー間の距離を指定します。

table { border: outset 10pt;
   border-collapse: separate;
   border-spacing: 20pt 10pt }
td { border: inset 5pt }
td.special { border: inset 10pt }  /* the top-left cell */

空のセル

分離ボーダーモデルで、空のセルの周りにボーダーを表示するかどうかを設定できます。

継承を利用して、 table 要素に指定することで、その子孫要素である全てのセル要素 (th, td) に対して指定することが出来ます。

table { empty-cells: show }

この例では、空セルも含めて全てのセルの周りにボーダーが引かれます。

結合モデル

結合モデルでは、各セル同士の隣接する辺が結合し、ボーダーを共有します。この時、セル要素、行要素、行グループ要素、列要素、列グループ要素の全てのボーダーが指定可能です。

また、 table 要素の外枠線の半分を含めて table 幅（'width' で指定）として計算されます。

ボーダーの競合

結合モデルでは、或る境界線が重複して指定される場合が起こります。例えば、 tbody と td にボーダーを指定していると、必ず指定の重複が起こります。

/* ボーダーに競合が起こる例 */
tbody { border: 1pt solid }
td { border: 1pt dashed }

しかも、その指定が矛盾する場合どの指定が採用されるのでしょうか。例えば、隣接するセル同士で、一方は 'solid' を、他方は 'dotted' を指定していた場合、二つのセルが共有するボーダーはどのように表示されるかが問題となります。

hidden の最優先

• あらゆるケースで、border-style が hidden が最も優先され、 none が最も優先順位が低く扱われます。
• hidden が指定されているセルの周りは絶対にボーダーが引かれません。
• none が指定されたセルに隣接するセルにボーダーが指定されていれば、そちらが優先され、結果的に none のセルの周りにもボーダーが引かれます。
• 隣接セルが hidden か none 同士が隣接している場合に限り、 none のセルの周りにはボーダーが引かれません。
• 周囲に隣接するセルと同じボーダーを指定する場合は、優先順位が最も低い none を指定すれば良いことになります。

幅の優先

• hidden, none 以外の場合、ボーダー幅（'border-width' で指定）が広い方が優先されます。

border-style の優先順位

• 幅が同じ場合は、次に border-style の種類で判定されます。
• 優先順位は高い順に次のようにます；
  'double' > 'solid' > 'dashed' > 'dotted' > 'ridge' > 'outset' > 'groove'> 'inset'

セルの優先

• ボーダーの幅、スタイル共に同じで、色だけが異なる場合は、セルに対する指定が優先されます。優先順位は高い順に次のようになります；
  セル要素 > 行要素 > 行グループ要素 > 列要素 > 列グループ要素 > 表要素

じゃあ、最後に隣接セル同士が共有するボーダーに対する指定が、色だけしか矛盾しない場合はどうするんでしょうね？

border-style

'border-style'プロパティに関しては、以前BOX関連プロパティで説明しました。詳しくはそちらに戻って下さい。

hidden は周囲の境界線を消し、 none は指定しないだけです。 'border-collapse' が separate （分離ボーダーモデル）の場合は同じですが、 collapse （結合ボーダーモデル）の場合は明確に違うものです。

• hidden...隣接するセルにボーダーが指定されていても、それを消してしまう。
• none...隣接するセルにボーダーが指定されていると、その共有する辺にはボーダーが引かれてしまう。

これは CSS2 での定義であり、実装とは異なります。 I.E. では none と hidden は区別されず、 'none' の方が有効に働きます。 Netscape 6.2 ではそもそも分離ボーダーモデルが働かないので、区別もへったくれもありません。

'border' 関連プロパティに関しては、以前 BOX 関連プロパティで説明しました。詳しくはそちらに戻って下さい。