三十二日目！（テーブルのスタイリング）

XHTML+CSSの勉強ブログ更新はかなり久しぶりになりますが、続きやっていきます。

テーブルのスタイリング
table要素のスタイリングは、通常ボックスモデル以外にも、行や列のグループ化、セルの境界線など、テーブル特有のマークアップやスタイリングについて知っておく必要がある。
より魅力的なテーブルのスタイリング方法を解説。

●グラデーション背景と立体的に見せるテーブル
シンプルな役員一覧表をたたき台にして、グラデーション背景で立体的に見えるテーブルになるようにスタイリングする。

XHTMLでは構造に大きな特徴はないが、列グループを示す為のcolgroup要素、行グループを示すためのthead/tbody要素を利用し、項目名はth要素で、内容をtd要素でマークアップ。

HTML


<table summary="未来コーポレーション役員一覧">
  <caption>役員一覧</caption>
  <colgroup id="position"></colgroup>
  <colgroup id="name"></colgroup>
  <colgroup id="Introduce"></colgroup>
  <thead>
    <tr>
      <th scope="col">役職 / 所属</th>
      <th scope="col">氏名</th>
      <th scope="col">簡単な自己紹介</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>代表取締役</td>
      <td>山田美子</td>
      <td>32歳、主婦業と社長業の両立がんばっています。</td>
    </tr>
 ・・・・・中略・・・・・
    <tr>
       <td>取締役</td>
       <td>水野隆</td>
       <td>CTO兼任です。</td>
    </tr>
  </tbody>
</table>


このデザインの場合、テーブルセルの境界線が重なり合わないため、CSSでborder-collapseプロパティを設定し、値を「separate」とする。

さらにtable要素にはテーブル全体の背景となるグラデーション画像を、th要素には濃いブルーのグラデーション画像を指定する。拡大画像をみると、セルボーダーの左側と上側に明るい色、右側と下側に濃い色を指定することで立体感を出している。

border-spacingプロパティはIE6/7では適用されない為、このデザインを忠実に実現すること優先する場合は、XHTMLのtable要素にcellspacing属性を「0」と指定することでこの問題が回避できる。
（<table cellspacing="0">）。ただし、cellspacing属性は見た目をコントロールする属性なので指定するのは望ましくないが、あくまでもIE6/7の問題を回避するためと考えて指定しておく。

CSS


table, th, td {
  margin: 0;
  padding: 0;
  border-collapse: separate;
  border: none;
  border-spacing: 0;   /*  IE 6/7は未対応 */
}


table {
  width: 500px;
  border: 1px solid #eeeeee;
  font-family: sans-serif;
  background: #d9e7f6 url(bg-png) repeat-x bottom;
}


caption {
  margin-bottom: 10px;
  padding-left: 10px;
  padding-bottom: 2px;
  border-left: 6px solid #307bcf;
  line-height: 1.8;
  font-weight: bold;
  text-align: left;
}


th {
  padding: 0.8em 0.5em;
  border-color: #629cdd #8db7e6 #629cdd #eeeeee;   /* 立体的に見せる */
  border-style: solid;
  border-width: 1px;
  color: #ffffff;
  background: #629cdd url(th.png) repeat-x;
  font-size: 100%;
  text-align: left;
}


td {
  padding: 0.8em 0.5em;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff #81b0e4 #ffffff;  /* 立体的に見せる */
  font-size: 100%;
}


#position {
  width: 100px;
}


#name {
  width: 80px;
}




●列の一部をハイライト表示するテーブル
テーブルの列の一部をハイライト表示するには、列グループとしてマークアップしたcolgroup要素に対して背景を指定。

プレミアムプランのみハイライトされた料金プラン

XHTMLで「プレミアム」の列に対して、<col span="1"id="premium"/>と指定し、列グループを示しておく。

ただし、これだけではプレミアム列の角丸を実現できない。あらかしめスライスした角丸上端用の画像を「プレミアム」というテキストが入ったth要素に背景として指定し、角丸下端用の画像を列の最後のセルの背景として指定。

XHTML


<table summary="料金プラン">
   <caption>サービス料金プラン</caption>
   <col span="1" id="tablehead" />
   <col span="1" id="plana" />
   <col span="1" id="planb" />
   <col span="1" id="planc" />
   <col span="1" id="premium" />
   <thead>
      <tr>
        <th scope="col">項目</th><th scope="col">プランA</th><th scope="col">プラン</th>
        <th scope="col>プランC</th><th scope="col" class="top">プレミアム</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <th class="spec">容量</th>
        <td>1GB</td><td>2GB</td><td>3GB</td><td>無制限</td>
      </tr>
・・・・中略・・・・
      <tr>
        <th class="spec">サブドメイン</th>
        <td>１つ</td><td>２つ</td><td>３つ</td><td class="bottom">無制限</td>
      </tr>
   </tbody>
</table>


CSSでは「#premium」に対してオレンジ色の背景を指定。

CSS


・・・・中略・・・・


#premium {
  background: #f90;                                    /* プレミアム列にオレンジ色の背景を指定 */
}


th.top {
  width: 157px;
  border: none;
  background: url(top.png) no-repeat left top;
                                                             /* プレミアム列の上端に角丸上端背景画像 */
}


td.bottom {
  background: url(bottom.png) no-repeat left bottom;
                                                             /* プレミアム列の下端に角丸下端背景画像 */
}


th.spec {
  background: none;
  border: none;
}




colを使ったりするテーブルはまだまだ理解ができにくい。。なにか実際に作ってみないとわかりにくいような気がする。

今日はここまで。