TABLE のボーダー

last modified 17th/Nov. 2000

TABLE 要素に対して、 border 属性が定義されています。これは表の罫羅線を指定する属性です。

最も単純な場合は、表の外枠線と全てのセルの周りにボーダーが表示されます；

<table border="1">
<tr>
<th>cell(0,0)</th><th>cell(0,1)</th><th>cell(0,2)</th>
</tr><tr>
<th>cell(1,0)</th><td>cell(1,1)</td><td>cell(1,2)</td>
</tr><tr>
<th>cell(2,0)</th><td>cell(2,1)</td><td>cell(2,2)</td>
</tr>
</table>

表示例；

cell(0,0)	cell(0,1)	cell(0,2)
cell(1,0)	cell(1,1)	cell(1,2)
cell(2,0)	cell(2,1)	cell(2,2)

表を囲む外枠の、どの部分を表示させるかを指定する。

void: 初期値。外枠なし。
above: 上端のみ。
below: 下端のみ。
hsides: 上端と下端のみ。
vsides: 左右両端のみ。
lhs: 左端のみ。
rhs: 右端のみ。
box: 周囲すべて。
border: 周囲すべて。

rules = none|groups|rows|cols|all [CI]

表中のセルの間の、どの罫線が出現するかを指定する。罫線の見掛けはブラウザに依存する。

none: 初期値。罫線なし。
groups: 罫線は、行グループ (THEAD、 TFOOT、TBODY) の間、及び列グループ (COLGROUP、COL) の間のみに出現する。
rows: 罫線は行間のみに出現する。
cols: 罫線は、列間のみに出現する。
all: 罫線は、すべての行間・列間に出現する。

border = pixels [CN]

表を囲む枠線の太さを、ピクセル値で指定する。
0 より大きい値を持つこの属性だけが指定されていると、 frame="border" rules="all" が補われて解釈され、表の外枠と全てのセルの周りにボーダーが表示されます。
border="0" だけを指定すると、 frame="void" rules="none" が補われて解釈され、ボーダーは全く表示されません。

border 属性の値はピクセルです。値を省略すると、 frame 属性の値として解釈されます (frame="border") 。このとき、他に指定が無ければ rules="all" を補って解釈されます。罫羅線の太さはブラウザに依存する規定値が利用されます。

次の二行は全く同じように解釈されます；

<table border>
<table frame="border" rules="all">

HTML 4 では、表のボーターは、 frame 属性と rules 属性を用いる事で、細かく指定できます。しかし、これらは少し複雑であり、むしろ CSS で指定する方が簡単です。

CSS での border 関連指定

CSS の 'border' プロパティに関しては、「CSS の 'border'」を参照ください。ここでは、表に関することに注目して紹介します。また、 CSS の利用法・規則に付いては、「CSS の紹介」を参照ください。

ボーダーの表示... 'border' プロパティ
隣接ボーダーの結合と分離... 'border-collapse' プロパティ
隣接ボーダー同士の間隔 ... 'border-spacing' プロパティ

空セル周りのボーダーの表示... 'empty-cells' プロパティ

'border' プロパティ

CSS では、表示するボーダーの太さ、種類、色を指定できます。

'border' プロパティの指定方法
border:	1px	solid	black
	太さ	種類	色

border="1" を CSS で再現してみましょう；

table, th, td { border: 1px solid black }

これは、 table 要素、 th 要素、 td 要素の周囲に 1px 幅で黒い実線を表示するように指定しています。

表示例；

cell(0,0)	cell(0,1)	cell(0,2)
cell(1,0)	cell(1,1)	cell(1,2)
cell(2,0)	cell(2,1)	cell(2,2)

'border' プロパティに関するより詳しい説明は、「CSS の 'border'」を参照ください。

'border-collapse' プロパティ

また、表のセル同士を分離するかどうかも指定できます；

table { border-collapse: collapse }
table, th, td { border: 1px solid black }

表示例；

border-collapse: collapse

border-collapse: separate

cell(0,0)	cell(0,1)	cell(0,2)
cell(1,0)	cell(1,1)	cell(1,2)
cell(2,0)	cell(2,1)	cell(2,2)

cell(0,0)	cell(0,1)	cell(0,2)
cell(1,0)	cell(1,1)	cell(1,2)
cell(2,0)	cell(2,1)	cell(2,2)

border-collapse	`collapse \| separate \| inherit`

'inherit' は親要素の値を継承すると云う指定です。

table 要素に適用可能です。
初期値は collapse です。
子孫要素に値が継承します。

border-collapse: separate が指定された表を分離ボーダーモデルと呼びます。この場合の、ボーダーとボーダーの間の背景は、 table 要素の背景が表示されます。

table { border-collapse: separate;
   border:10px outset blue;
   background:red }
table td { border:10px inset blue;
   background:#cfc; color: green }

表示例；

(1,1)	(1,2)	(1,3)
(2,1)	(2,2)	(2,3)

'border-spacing' プロパティ

border-collapse: separate の場合は、隣接するボーダーが分離しますが、このボーダー同士の間隔を指定できます。

table { border-collapse: separate;
  border-spacing: 20px 40px }

'border-spacing' プロパティは一つ、又は二つの値を持つ事が出来ます。値が一つの場合は上下左右のボーダー間隔を指定し、二つの場合は一つ目の値が上下間隔、二つ目の値が左右間隔を指定します。

上の例では、上下のボーダー間隔を 20 Pixels 、左右ボーダー間隔を 40 Pixels に指定してあります。

表示例；

(1,1)	(1,2)	(1,3)
(2,1)	(2,2)	(2,3)

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

'inherit' は親要素の値を継承すると云う指定です。

table 要素に適用可能です。
初期値は 0 です。
子孫要素に値が継承します。

'empty-cells' プロパティ

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

table { border-collapse: separate;
  empty-cells: show }

表示例；

empty-cells: show

empty-cells: hide

(1,1)	(1,2)	(1,3)
(2,1)		(2,3)
(3,1)	(3,2)	(3,3)

(1,1)	(1,2)	(1,3)
(2,1)		(2,3)
(3,1)	(3,2)	(3,3)

empty-cells	`show \| hide \| inherit`

'inherit' は親要素の値を継承すると云う指定です。

セル関連要素 (th, td) に適用可能です。
初期値は show です。
子孫要素に値が継承します。

子孫要素に継承されますから、 table 要素に指定すれば、その子孫要素である全ての th 要素、 td 要素に適用されます。

<<PREV | TOP | NEXT>>

FC2>		モビット