本文へジャンプ

ひと手間加えてオイシク仕上げる! CSS3小ワザまとめ サンプルコードを添えて。「table編」

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

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

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

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

サンプル01

球団名 創立 所在地 本拠地 日本一 優勝
読売ジャイアンツ 1934.06.09 東京都文京区 東京ドーム 23回 43回
中日ドラゴンズ 1936.01.15 愛知県名古屋市東区 ナゴヤドーム 2回 9回
東京ヤクルトスワローズ 1950.01.12 東京都新宿区 明治神宮野球場 5回 6回
広島東洋カープ 1949.12.15 広島県広島市南区 MAZDA
ZOOM-ZOOM
スタジアム
3回 6回
阪神タイガース 1935.12.10 兵庫県西宮市 阪神甲子園球場 1回 9回
横浜DeNAベイスターズ 1949.11.22 神奈川県横浜市中区 横浜スタジアム 2回 2回

サンプル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

球団名 創立 所在地 本拠地 日本一 優勝
読売ジャイアンツ 1934.06.09 東京都文京区 東京ドーム 23回 43回
中日ドラゴンズ 1936.01.15 愛知県名古屋市東区 ナゴヤドーム 2回 9回
東京ヤクルトスワローズ 1950.01.12 東京都新宿区 明治神宮野球場 5回 6回
広島東洋カープ 1949.12.15 広島県広島市南区 MAZDA
ZOOM-ZOOM
スタジアム
3回 6回
阪神タイガース 1935.12.10 兵庫県西宮市 阪神甲子園球場 1回 9回
横浜DeNAベイスターズ 1949.11.22 神奈川県横浜市中区 横浜スタジアム 2回 2回

サンプル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!

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
2017年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
スマートフォンやタブレットに最適化されたWebサイトを制作します。
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr