ウェブ上に表(テーブル)を掲載する際、縦線と横線とで線種を別にしたいと思うこともあるでしょう。例えば「横線は実線で引くものの縦線は点線で引きたい」という場合などです。「縦横のどちらかには点線を引いておいて、残りには実線を引く」という装飾も、スタイルシートで簡単に実現できます。

例えば、下記に掲載した表(テーブル)のように表示できます。3行×3列の構成のうち、

• 外周と横線は実線ですが、
• 内側の縦線だけは点線になっています。

線種を把握しやすいように、線の太さは2pxにしてあります。

上記のように表(テーブル)を装飾するCSSソースは簡単で、以下のようにborder-styleプロパティを使って線種を記述すれば良いだけです。border-styleプロパティには、実線(solid)・点線(dotted)・破線(dashed)・二重線(double)のような枠線の種類を指定できます。

table {
   border-collapse: collapse;
   border: 2px solid green; /* 外枠 */
}
table th, table td {
   border-style: solid dotted;/* 線種 */
   border-width: 2px; /* 線の太さ */
   border-color: green; /* 線色 */
}

表(テーブル)の線は、表内の各セルを構成するtd要素やth要素に対して枠線(＝border)を指定することで引けます。

上記のCSSソースでは、border-styleプロパティの値に「solid dotted」という2つの値を指定しています。値を2つ指定した場合は、「上下の線種」→「左右の線種」の順で指定したことになります。つまり、上下の線種が「solid」(実線)で、左右の線種が「dotted」(点線)になるわけです。セルの左右の線とは「縦線」のことです。

あとは、border-widthプロパティで線の太さを指定し、border-colorプロパティで線の色を指定するだけです。ここでは、太さは「2px」、線色は「green」(緑色)にしています。

※td要素やth要素に対して枠線(border)を指定しただけだと、表の外枠を構成する縦線も点線になってしまいます。それを防ぐため、別途table要素自体に対しても枠線を指定しています(先のCSSソースの3行目)。table要素に対して枠線(border)を引いた場合は「表の外枠だけ」の装飾になります。ここでは、borderプロパティに「1px solid green」と指定していますので「緑色の1pxの実線」が外枠として引かれます。

※なお、table要素に対して記述している「border-collapse」プロパティは、「隣り合うセルの枠線を重ねる」プロパティです。表を装飾する際には必須です。詳しくは、「スタイルシートで表に枠線を引くと線が二重に見えるのを避ける方法」を参照して下さい。

線を細く、点線は灰色で、点線より破線で引く

線の太さを1pxにして点線を引くと、点々があまりハッキリとは見えません。太さが1pxのような細い線を引く場合は、「点線」(dotted)ではなく「破線」(dashed)を引いた方が見やすいかも知れません。

点線を破線に変更するには、先ほどのCSSソースを以下のように修正します。ついでに、破線の色を灰色に変えてみます。

table th, table td {
   border-style: solid dashed; /* 線種 */
   border-width: 1px; /* 線の太さ */
   border-color: green gray; /* 線色 */
}

「border-style」プロパティの値に指定していた「dotted」を「dashed」に変更すれば、点線だった場所を破線に変更できます。

「border-color」プロパティの値に「green gray」のように値を2つ指定すると、上下に引かれる線(横方向の線)は緑色(green)になり、左右に引かれる線(縦方向の線)は灰色(gray)になります。この順序は「border-style」プロパティと同様で、(値を2つ指定した場合は)「上下の線色」→「左右の線色」の順で指定したことになります。

実際に表示させると、以下のような感じで見えます。

なお、表の外枠だけを太くしたいと思う場合は、「外枠だけ太い罫線の表を作る」をご参照下さい。

(更新日：2016年01月30日)