CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。
はじまりはじまり。
CSSでtableのデザイン
今回は、Table要素、つまり表の見た目をCSSで設定していくときのコツを解説します。実は意外とクセモノです。
Tableの仕組み
まず何より大切なのが、table要素の仕組み、マークアップを理解しておくことです。これはtableに限ったことではないですが、普通の要素とくらべると構造がチョイややこしいので、整理しておきます。
シンプルな例を挙げてみます。
<table>
<tr>
<th scope="col">ヘッダー</th>
<th scope="col">ヘッダー</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
この他にもtheadやtbody、tfoot要素などを使う場合もありますが、まずはシンプルケースということで、1行目のみをthで見出しにしています。
では、tableをデザインするときに重要なCSSの関連プロパティを見てみます。
- border-collapse
- セル同士の間にスペースを入れるか密接させるかを指定します。値はcollapseで間隔なし、separateで間隔が空きます。
- border-spacing
- border-collapseがseparateの場合に、間隔を数値で指定します。IE6,7未対応。
- empty-cells
- border-collapseがseparateの場合に、空白セルの表示または非表示を指定します。値はshowで表示、hideで非表示になります。IE6,7未対応。
次に実際にスタイルを書いていくときのポイントです。
まず覚えておくとよいのは、
trにborderは設定できないということです。正確には、border-collapseがcollapseであればtrにborderが設定できるのですが、IEはこの通りに動いてくれません。たとえcollapseでもtrのborderは表示されません。6〜8まで全滅です。
そこで、上図のようなborderを描きたいときはどこに設定すればいいかというと、各thやtdのborder-bottomで設定します。
table {
border-collapse: collapse;
border: 1px solid #000;
border-bottom: none;
}
th, td {
border-bottom: 1px solid #000;
}
まずtable全体にぐるっとborderをひき、各セルの下側だけborder-bottomをひきます。するとtableの下側のborderと一番したのセルのborder-bottomが重複するので、tableのborder-bottomのみnoneとして線を表示しないようにしています。（これはやらなくてもいいかもしれません）
もう少し手を加えていくとこんな感じに。
body {
color: #24282b;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
table {
width: 400px;
border-collapse: collapse;
border: 1px solid #548582;
background-color: #fcf9ca;
}
th {
padding: 5px;
border-bottom: 3px double #548582;
background-color: #9fc7b2;
text-align: left;
}
td {
border-bottom: 1px dotted #548582;
}
tableを表として正しく使う分には用途は非常に多いと思います。
参考までに様々なデザインのサンプル集を紹介しておきます！
Pricing Tables: Examples And Best PracticesTop 10 CSS Table Designsでは次回もお楽しみに。
数値（Number、int、uint）同士は算術演算子を使用して計算処理を行うことができます。
タイラー
こう
ちゅらさん
pug
たいちょ
