実践STEP.2 表の内側の線を描く
次に、スタイルシートで「表の内側の線」を描いてみましょう。
表の内側に線を引くということは、表を構成する「セル」の枠線を引くということです。 ですから、セルを構成するtd要素やth要素に対してborderプロパティを使えばいいことになります。
スタイルシートのソースは、以下のようになります。
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 隣り合う枠線を重ねる指定
スタイルシートには、「隣り合うセルの枠線を重ねて表示する」指定を記述する方法があります。
border-collapse: collapse;
}
このように、table要素に対して border-collapseプロパティを使うと、以下のように表示させられます。
※Mac版IEでは、border-collapseプロパティが解釈されないため、tableタグに「cellspacing="0"」という属性を加えておく必要があります。(準備STEP.2を参照)
作品名 | 作家名 | 出版社 | 価格 |
---|---|---|---|
合計 | 1,710円 | ||
涼宮ハルヒの憂鬱 | 谷川 流 | 角川書店 | 540円 |
ゼロの使い魔 | ヤマグチノボル | メディアファクトリー | 580円 |
灼眼のシャナ | 高橋弥七郎 | メディアワークス | 590円 |
これで、隣り合うセルの枠線が重なって表示されるようになり、「表」らしく見えるようになりました。
実践STEP.3 縦線と横線で線種を変える
今回作るサンプルでは、横線は実線でしたが、横線は破線でした。 次に、そのような複雑な装飾を行ってみましょう。
表をワープロ並みに装飾する手順 (目次)
- [HOME] はじめに:表の罫線をワープロ並みに装飾したい
- [準備STEP.1] HTMLで表を書く
- [準備STEP.2] サンプル表のHTML上のポイントを確認
- [実践STEP.1] 表の外枠を描く
- [実践STEP.2] 表の内側の線を描く
- [実践STEP.3] 縦線と横線で線種を変える
- [実践STEP.4] 表のヘッダ(上部)だけ装飾を変更する
- [実践STEP.5] 表のフッタ(下部)だけ装飾を変更する
- [実践STEP.6-1] 表の文字サイズを指定する
- [実践STEP.6-2] セルの余白を指定する
- [実践STEP.6-3] 文字を左右に寄せる
- [実践STEP.6-4] 文字と文字の間隔を広くする
- [実践STEP.6-5] フォントを指定する
- [まとめ] 記述したスタイルシートのまとめ