スタイルシートで表の線種を指定
スタイルシートを使って表の線種を指定するには、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 | 大学院入学式 |
これで、表の外側の線種と内側の線種を別々に指定することができました。
上記の表は、枠線と文字の間隔が狭すぎだと感じるかもしれません。この間隔をもう少し広げることも簡単です。
また、スタイルシートで実現できる線種は、実線・破線だけではありません。 点線や二重線、凹凸に見える線など、いくつかの線種が用意されています。
次のページでは、それらの指定方法についてご紹介致します。
