<<PREV | TOP | NEXT>>

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)
frame = void|above|below|hsides|lhs|rhs|vsides|box|border [CI]
表を囲む外枠の、どの部分を表示させるかを指定する。
rules = none|groups|rows|cols|all [CI]
表中のセルの間の、どの罫線が出現するかを指定する。罫線の見掛けはブラウザに依存する。
border = pixels [CN]

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' プロパティ

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

'border' プロパティの指定方法
border:1pxsolidblack
太さ種類

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: collapseborder-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-collapsecollapse | separate | inherit

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

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' は親要素の値を継承すると云う指定です。

'empty-cells' プロパティ

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

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

表示例;

empty-cells: showempty-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-cellsshow | hide | inherit

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

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

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO
FC2> rbg