ホームページ作成/テーブル(表)の作成・装飾 (HTML,CSS)

スタイルシートでワープロ並みに表を装飾2(3ページ目)

ワープロで表を作成すると、様々な罫線で表を装飾できますね。そのような表をウェブ上でも作ってみたいと思いませんか? スタイルシートとHTMLで、複雑な表の装飾も自由自在に作れるようになりましょう。(CSS実践編)

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

実践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円

これで、隣り合うセルの枠線が重なって表示されるようになり、「表」らしく見えるようになりました。

実践STEP.3 縦線と横線で線種を変える

今回作るサンプルでは、横線は実線でしたが、横線は破線でした。 次に、そのような複雑な装飾を行ってみましょう。

それでは、縦線と横線で線種を変えてみましょう >>

表をワープロ並みに装飾する手順 (目次)

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます