MD-Blog_Web Creative

なるべく画像を使わずにCSSだけを使って簡単に綺麗に仕上げる方法！　前回は「見出し」のTipsを書いてみました。今回はtable（テーブル）の装飾をお題に、ちょろっとだけサンプルをご紹介します。

表の見出し項目部分だけセパレートにする

「border-collapse:separate」と「border-spacing」を使えば簡単に実現できるんですが、その下の項目は横一線に線を引きたいという時には使えません。

そういう時は、見出し行（thead）のtdのなかの要素に線を引いてやればできます。

サンプル01

サンプル01のCSS

#sample01 {}
#sample01 thead td {
    padding:0 5px;
}
#sample01 thead td > span {
    display:block;
    padding:5px;
    border:4px solid #000;
    white-space:nowrap;
    text-align:center;
}
#sample01 tbody td {
    padding:8px 5px;
    border-bottom:2px solid #333;
}
#sample01 thead td:first-child,
#sample01 tbody td:first-child {
    padding-left:0;
}
#sample01 thead td:last-child,
#sample01 tbody td:last-child {
    padding-right:0;
}

テーブル行の背景色を交互に塗る

表を見やすくするために奇数/偶数行に別の背景色を設定します。
「tr:nth-child(odd)」と「tr:nth-child(even)」がポイントです。

サンプル02

サンプル02のCSS

#sample02 {}
#sample02 thead td {
    padding:8px;
    background:#000;
    border-left:1px dotted #ccc;
    color:#fff;
    text-align:center;
    white-space:nowrap;
}
#sample02 tbody td {
    padding:8px;
    border-left:1px dotted #333;
    border-bottom:1px solid #333;
}
#sample02 tbody tr:nth-child(even) td { background:#efefef;}
#sample02 tbody tr:nth-child(odd) td {  background:#fff;}
 
#sample02 thead td:nth-child(1),
#sample02 tbody td:nth-child(1) {
    border-left:none;
}

最近はレイアウト目的でtableタグを使う機会も減りましたが、ちゃんとした"表データ"（表組み）を意図してコーディングする際は、きちんとtableを使いましょう。
Excelにそのままコピーできたり、二次利用が便利になります！

それではまた次回をお楽しみに。Adios！