TABLE

Contents

  1. HTML 4 における table 要素
  2. 表のタイトル位置の調整
  3. セル内の文字位置
  4. 分離モデル・結合モデル
  5. 枠線・罫線の種類
  6. borderプロパティ

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>
【表示例】
3行3列の表の例
header 1 cell (1,1) cell (1,2)
header 2 cell (2,1) cell (2,2)
header 3 cell (3,1) cell (3,2)

caption-side

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

caption-sidetop | bottom | left | right | inherit

I.E.6 では無効ですが、 Netscape 6 では 'top', 'bottom' に限り有効です。

【利用例】

caption { caption-side: bottom }

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

【表示例】
3行3列の表の例
header 1 cell (1,1) cell (1,2)
header 2 cell (2,1) cell (2,2)
header 3 cell (3,1) cell (3,2)

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

【利用例】

caption { caption-side: bottom;
	text-align:right }
【表示例】
3行3列の表の例
header 1 cell (1,1) cell (1,2)
header 2 cell (2,1) cell (2,2)
header 3 cell (3,1) cell (3,2)

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
【表示例】
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 であると解釈されます。

【表示例】
baselinebaseline topbottommiddle sub

baseline

First the cells that are aligned on their baseline are positioned. This will establish the baseline of the row. Next the cells with 'vertical-align: top' are positioned.
This will establish the baseline of the row. Next the cells with 'vertical-align: top' are positioned. top bottom middle These values do not apply to cells; the cell is aligned at the baseline instead.

結合モデルと分離モデル

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

border-collapsecollapse | separate | inherit

collapse が結合ボーダーモデル、 separate が分離ボーダーモデルを意味します。

【表示例】 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 }
【表示例】
無指定の例(規格では collapse になる筈)
cell (1,1) cell (1,2)
cell (2,1) cell (2,2)
cell (3,1) cell (3,2)
cell (4,1) cell (4,2)
'separate' の例
cell (1,1) cell (1,2)
cell (2,1) cell (2,2)
cell (3,1) cell (3,2)
cell (4,1) cell (4,2)
'collapse' の例
cell (1,1) cell (1,2)
cell (2,1) cell (2,2)
cell (3,1) cell (3,2)
cell (4,1) cell (4,2)

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

分離モデル

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

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

ボーダー間の距離

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

border-spacing<length> <length>? | inherit

値が一つ指定されたときは垂直、水平両方向のセル間隔を指定します。二つ指定されたときは、一つ目が水平方向、二つ目が垂直方向のセル間隔になります。

隣接するセルのボーダー間の空間は、テーブルの背景になります。

table { border: outset 10pt;
   border-collapse: separate;
   border-spacing: 20pt 10pt }
td { border: inset 5pt }
td.special { border: inset 10pt }  /* the top-left cell */
【表示例】
separate
special cell (1,2)cell (1,3)
cell (2,1) cell (1,2)cell (2,3)
cell (3,1) cell (1,2)cell (3,3)

空のセル

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

empty-cellsshow | hide | inherit

I.E.6 では無効ですが、 Netscape 6 では有効です。

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

table { empty-cells: show }

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

【表示例】
無指定の例
cell (1,1)cell(1,2)
cell(2,2)
cell (3,1)
show の例
cell (1,1)cell(1,2)
cell(2,2)
cell (3,1)
hide の例
cell (1,1)cell(1,2)
cell(2,2)
cell (3,1)

結合モデル

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

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

ボーダーの競合

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

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

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

hidden の最優先
幅の優先
border-style の優先順位
セルの優先

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

border-style

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

border-stylenone | hidden | double | solid | dashed | dotted | ridge | outset | groove | inset
【表示例】
分離ボーダー・モデル
double solid dashed dotted
hidden ridge inset none
ridge outset groove inset
結合ボーダーモデル
double solid dashed dotted ridge
dashed dotted ridge outset groove
ridge outset groove inset double
hidden と none
double solid none dotted ridge
dased none ridge hidden hidden
ridge outset groove inset double

上の例では、わかりやすくするために border-color プロパティも併せて設定し、ボーダーに色を付けました。

border-style プロパティのとる値の説明
hidden セル周辺のボーダーは絶対に表示されない。
結合モデルで隣接ボーダーが設定されていてもそれを消す。
none セル周辺のボーダーを設定しない。
結合モデルで隣接ボーダーが設定されていれば表示される。
ridge ボーダーを隆起で表現する
outset 分離ボーダーモデルでは、要素の内側が窪みの底面になる。
結合ボーダーモデルでは、 'ridge' と同じ。
groove ボーダーを窪みで表現する
inset 分離ボーダーモデルでは、要素の内側が隆起の上面になる。
結合ボーダーモデルでは、 'groove' と同じ。

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

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

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

Copyright © 2001, SUGAI, Manabu. All rights reserved.
SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO