Subject   : テーブルのセルのボーダーと文字列配置

カテゴリー  : Home page > スタイルシート


 セルのボーダー(border-spacing)

通常は各セルのボーダー同士が分離して独立した矩形を表示しています。
独立したセルのボーダー間の距離を指定する場合は「border-spacing 」 を使います。値が一つ指定されたときは垂直、水平両方向のセル間隔を指定します。二つ指定されたときは、一つ目が水平方向、二つ目が垂直方向のセル間隔になります。


table.sep {border: 5px solid blue; border-collapse: separate;
border-spacing: 5px 10px;}
td.special { border: 5pt inset } /* cell(1,1) */

'collapse' の例
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

baseline

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

sub、super

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

 セルの特殊な表記方法

● セル要素(td, th)に水平位置配置を指定する場合、プロパティ値に 通常採り得るキーワードに加えて「文字」が使用できます


td { text-align: "." }

10.555
1000
1.25e-2

★ I.E.6 では無効のようです。

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


table { empty-cells: show }

show の例
cell (1,1) cell(1,2)
cell(2,2)
cell (3,1)

★ I.E.6 では無効のようです。


   ⇒ スタイルシート CSSのプロパティ
   ⇒ CSSで用いられるテキストの配置
   ⇒ ボーダー(border):枠線の種類

[メニューへ戻る]  [HOMEへ戻る]  [前のページに戻る]