3/6 スタイルシートでワープロ並みに表を装飾２ [ホームページ作成] All About

実践STEP.2 表の内側の線を描く

次に、スタイルシートで「表の内側の線」を描いてみましょう。

表の内側に線を引くということは、表を構成する「セル」の枠線を引くということです。ですから、セルを構成するtd要素やth要素に対してborderプロパティを使えばいいことになります。
スタイルシートのソースは、以下のようになります。

table.noveltable th,

table.noveltable td {

   border: 1px #cc0000 solid;

}

上記は、「noveltableクラスのtable要素に含まれるth要素」と「noveltableクラスのtable要素に含まれるtd要素」の両方に同じスタイルを適用するよう記述しています。

スタイルシートでは、同時に複数の要素に対して同じスタイルを適用するには、半角カンマで区切って複数の要素名を列挙します。

対象要素名1, 対象要素名2 { プロパティ: 値; }

ここでは、この方法を使って、th要素とtd要素に同じスタイルを適用させています。

上記ソースのスタイルだけを適用させると、表の表示は次のようになります。

作品名	作家名	出版社	価格
合計			1,710円
涼宮ハルヒの憂鬱	谷川流	角川書店	540円
ゼロの使い魔	ヤマグチノボル	メディアファクトリー	580円
灼眼のシャナ	高橋弥七郎	メディアワークス	590円

STEP.1で引いた外枠の線も加えると、次のようになります。

作品名	作家名	出版社	価格
合計			1,710円
涼宮ハルヒの憂鬱	谷川流	角川書店	540円
ゼロの使い魔	ヤマグチノボル	メディアファクトリー	580円
灼眼のシャナ	高橋弥七郎	メディアワークス	590円

ここでは、セルの外枠(＝border)として、太さ1ピクセル(＝1px）、色は濃い赤(＝#cc0000）、線種は実線(＝solid) の枠線を引くよう記述しています。
確かにそのように表示されていますが、このままではちょっと困りますね。

実践STEP.2-2 隣り合う枠線を重ねる指定

スタイルシートには、「隣り合うセルの枠線を重ねて表示する」指定を記述する方法があります。

table.noveltable {

   border-collapse: collapse;

}

このように、table要素に対して border-collapseプロパティを使うと、以下のように表示させられます。
※Mac版IEでは、border-collapseプロパティが解釈されないため、tableタグに「cellspacing="0"」という属性を加えておく必要があります。（準備STEP.2を参照）

作品名	作家名	出版社	価格
合計			1,710円
涼宮ハルヒの憂鬱	谷川流	角川書店	540円
ゼロの使い魔	ヤマグチノボル	メディアファクトリー	580円
灼眼のシャナ	高橋弥七郎	メディアワークス	590円