にしし ふぁくとりー:西村文宏 個人サイト

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

表(テーブル)といえば罫線で区切って分類整理する記載方法ですが、だからといって様々な種類の罫線を駆使するだけが表の装飾ではありません。一部の罫線を省略して、背景色だけでセルを塗り分けても見やすい表になります。
例えば、以下に掲載したサンプル表には「縦の罫線」が省かれています。その代わり、各列に共通の背景色を付けることで「隣同士のセルの境目」を分かりやすくしています。このような表の装飾もスタイルシートで簡単に作れます。

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

上記のサンプル表では、「表の外側」と「横方向の罫線」は引かれていますが、「縦方向の罫線」は引かれていません。
このように表を装飾するのは簡単で、単に(セルを作る)td要素に対して左右の枠線を指定しなければ良いだけです。例えば以下のようにCSSソースを記述します。

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;        /* セル内側の余白 */
}

ポイントは6行目です。セルを作るtd要素に対して「上下の枠線は1px」・「左右の枠線は0px」になるようborder-widthプロパティを指定しています。「上下の枠線」とは横線のこと、「左右の枠線」とは縦線のことです。つまり、この指定によって「横線だけを引いて・縦線は省く」というスタイルになります。
なお、paddingプロパティはセルを見やすくするために内側の余白を設けているだけなので、必ずしも指定する必要はありません。また、border-collapseプロパティなどについては「スタイルシートで表に枠線を引くと線が二重に見えるのを避ける方法」などを参照して下さい。
表を作る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ソースと先ほどのCSSソースを組み合わせて表示すると、以下のように見えます。縦の罫線だけが表示されておらず(※外枠は除く)、横の罫線だけで表が構成されています。

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

このままではセルに背景色が塗られません。
冒頭のように各列に背景色を加えるには、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>

先程のHTMLソースから加わったのは2~4行目です。このようにcolgroup要素を使うと、表の列をグループ化できます。グループ化した列には、スタイルシートを使ってまとめて共通の装飾を施すことができます。colgroup要素のspan属性にはグループ化する列数を指定します。ここではすべて「1」を指定しているので1列ずつ別々にグループ化しています。さらにclass属性を使って、その列グループに対してスタイルシートで装飾を付加できるようにしています。

次に、先ほどのCSSソースに、以下の記述も加えます。

.leftcell   { background-color: #ccffcc; } /* 左列の配色 */
.centercell { background-color: #ffffcc; } /* 中列の配色 */
.rightcell  { background-color: #ffcccc; } /* 右列の配色 */

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

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

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

CSSだけで列を一括装飾する方法もある。HTML側にcolgroup要素を加えたくない場合に。

ここでは「表の列を一括して装飾する」ためだけに、わざわざHTMLソース側にcolgroup要素を書き加えました。
しかし、デザイン目的なのにCSSだけでなくHTMLも修正しなければならない方法はスマートではありません。
実は、CSSの「隣接兄弟セレクタ」を使ったり、CSS3の「nth-child疑似クラス」などを活用すれば、HTML側に一切の修正を加えることなくCSSだけで表の列を一括装飾できます。その方法については、All Aboutで記事にしていますので、そちらをご参照下さい。
→『CSSだけで表(テーブル)の列(縦方向)を一括装飾する』(All About ホームページ作成)
この記事で解説した書き方の方が楽で便利です。^^;

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---