"CSS Tips Factory" : Presented by Nishishi via WordPress.

縦の罫線を表示せず横の罫線だけの表を作る [, , テーブル]

様々な罫線を使うだけが表の装飾ではないでしょう。罫線を表示せず、背景色だけでセルを分けても見やすい表ができそうな気がします。
例えば、以下のサンプルは、縦の罫線がありません。その代わり、各列に共通の背景色を付けることで、隣同士のセルの境目を表しています。

左上端 上中央 右上端
左中端 中中央 右中端
左下端 下中央 右下端

表の外側と横の罫線は引かれていますが、縦の罫線は引かれていません。
このような装飾は簡単で、単にtd要素に対して左右の枠線を指定しなければ良いだけです。例えば以下のように。

table.sample {
   border-collapse: collapse;
   border: 2px solid green; /* 外側の枠線 */
}
table.sample td {
   border-width: 1px 0px; /* 上下だけ引く */
   border-color: green; /* 線色:緑 */
   border-style: solid; /* 線種:実線 */
   padding: 0.3em; /* セル内側の余白 */
}

paddingプロパティは、セルを見やすくするために内側の余白を設けているだけなので、必ずしも指定する必要はありません。border-collapseプロパティについては、「CSSで表を装飾する基本」を参照して下さい。
表を作るHTMLは、とりあえず以下のように書いておきます。

<table class="sample">
   <tr><td>左上端</td><td>上中央</td><td>右上端</td></tr>
   <tr><td>左中端</td><td>中中央</td><td>右中端</td></tr>
   <tr><td>左下端</td><td>下中央</td><td>右下端</td></tr>
</table>

上記のHTMLと先ほどのスタイルシートを組み合わせて表示すると、以下のように見えます。縦の罫線だけが表示されておらず(※外枠は除く)、横の罫線だけで表が構成されています。

左上端 上中央 右上端
左中端 中中央 右中端
左下端 下中央 右下端

このままでは、セルに背景色が塗られません。
冒頭のように、各列に背景色を加えるには、HTMLで表を作る際に、各列をグループ化しておきます。例えば以下のように。

<table class="sample">
   <colgroup span="1" class="leftcell">
   <colgroup span="1" class="centercell">
   <colgroup span="1" class="rightcell">
   <tr><td>左上端</td><td>上中央</td><td>右上端</td></tr>
   <tr><td>左中端</td><td>中中央</td><td>右中端</td></tr>
   <tr><td>左下端</td><td>下中央</td><td>右下端</td></tr>
</table>

上記のように、colgroup要素を使うと、列をグループ化することができます。グループ化した列には、まとめて共通の装飾を施すことができます。
colgroup要素のspan属性には、グループ化する列数を指定します。ここではすべて「1」を指定しているので、1列ずつ別々にグループ化しています。さらにclass属性を使って、その列グループに対しての装飾を指定しています。

先ほどのスタイルシートに加えて、以下のスタイルシートも加えます。

.leftcell   { background-color: #ccffcc; }
.centercell { background-color: #ffffcc; }
.rightcell  { background-color: #ffcccc; }

上記のHTMLと、これまでのすべてのスタイルシートを合わせて表示すると、以下のように見えます。冒頭のサンプルと同じように、各列が共通の背景色でまとめられているはずです。

左上端 上中央 右上端
左中端 中中央 右中端
左下端 下中央 右下端

こんな感じで、表の装飾には「罫線を表示しない」装飾方法もあります。
colgroup要素とスタイルシートを複雑に活用して、「ある列には縦線があるけど、ある列には縦線がない。ある列の縦線は実線だけど、ある列の縦線は点線。」……のような装飾も可能です。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。