通常は各セルのボーダー同士が分離して独立した矩形を表示しています。
独立したセルのボーダー間の距離を指定する場合は「border-spacing 」
を使います。値が一つ指定されたときは垂直、水平両方向のセル間隔を指定します。二つ指定されたときは、一つ目が水平方向、二つ目が垂直方向のセル間隔になります。
table.sep {border: 5px solid blue; border-collapse: separate;
border-spacing: 5px 10px;}
td.special { border: 5pt inset } /* cell(1,1) */
cell (1,1) | cell (1,2) |
cell (2,1) | cell (2,2) |
cell (3,1) | cell (3,2) |
セル内の文字列の位置は 「text-align」 , 「vertical-align」 を用いれば 指定できます。
セル内の要素の垂直位置は 「vertical-align」 で調整できますが、指定できるキーワードに制限が生じます。使えるキーワードは次のものに限られます;
baseline, top, bottom, middle
この他の、 sub、super、text-top、text-bottom に関しては baseline であると解釈されます。
baseline | top | bottom | middle | sub、super |
---|---|---|---|---|
baselinesub、super、text-top、text-bottom に関しては baseline であると 解釈されます。 |
top | bottom | middle | sub、supersub、super、text-top、text-bottom に関しては baseline であると 解釈されます。 |
● セル要素(td, th)に水平位置配置を指定する場合、プロパティ値に 通常採り得るキーワードに加えて「文字」が使用できます
td { text-align: "." }
10.555 |
1000 |
1.25e-2 |
● 空のセルの周りにボーダーを表示するかどうかを設定できます。
table { empty-cells: show }
cell (1,1) | cell(1,2) |
cell(2,2) | |
cell (3,1) |