線種が豊富な表を作りたい！（前編）(2ページ目)

スタイルシートで表の線種を指定

スタイルシートを使って表の線種を指定するには、table 要素に対して border プロパティを使って装飾内容を記述します。

table {
   border: 3px solid blue;
}

これで、外枠が「太さ3ピクセル(3px)・実線(solid)・青色(blue)」になります。

No.	日付	予定
1	2004/03/19	大学卒業式
2	2004/03/23	大学院卒業式
3	2004/04/01	大学入学式
4	2004/04/03	大学院入学式

しかし、この指定で描かれるのは、見ての通り外枠だけです。
borderプロパティは、「外側の枠線」の装飾を指定するものですから、「table要素の外側の枠線」（＝表の外枠）だけが対象なわけです。 内側の線は対象ではありません。

では、内側の線はどうやって描けば良いでしょうか？
答えは簡単で、セルを構成する td 要素や th 要素に対して border プロパティを使います。

例えば、

tr,td {
   border: 1px dashed blue;
}

としてみましょう。すると、内側が「太さ1ピクセル(1px)・破線(dashed)・青色(blue)」の線になります。

No.	日付	予定
1	2004/03/19	大学卒業式
2	2004/03/23	大学院卒業式
3	2004/04/01	大学入学式
4	2004/04/03	大学院入学式

しかし、これではちょっと望み通りではありませんね。
内側の線が二重になってしまっています。 これは、セルとセルの間にスペースが空いているからです。

この間隔を詰めて、隣同士の線を重ね合わせる指定がスタイルシートにはあります。

border-collapse: collapse;

※このプロパティには、「 collapse 」か「 separate 」のどちらかを指定できます。「 collapse 」なら隣り合うボーダー（線）を重ねて表示し、「 separate 」ならそれぞれを別々に表示します。

上記のように、 border-collapse プロパティに値「 collapse 」を指定すれば、以下のように、1本の線になります。（table要素のスタイルに書き加えます。）

No.	日付	予定
1	2004/03/19	大学卒業式
2	2004/03/23	大学院卒業式
3	2004/04/01	大学入学式
4	2004/04/03	大学院入学式

これで、表の外側の線種と内側の線種を別々に指定することができました。

上記の表は、枠線と文字の間隔が狭すぎだと感じるかもしれません。この間隔をもう少し広げることも簡単です。

また、スタイルシートで実現できる線種は、実線・破線だけではありません。 点線や二重線、凹凸に見える線など、いくつかの線種が用意されています。

次のページでは、それらの指定方法についてご紹介致します。

それでは、次のページへ！ →