コピペで使えるテーブル系CSSスニペット。自由にお使いください。


会社用メモですが、せっかくなのでほしい人がいたらCSSとHTMLをここに置きますので自由に使ってください。
デザインが苦手な人でもこれをコピーして使えばそれなりに作れます。
まだ1個ですが・・・

行の関係を意識したシンプルなテーブル

シンプルなテーブルです。
ごちゃごちゃさせても見にくいだけなので、料金表とか行ごとが重要になる場合はこんなものはいかがでしょうか。

CSS

.cmp_table_visual2 {
  border: 1px solid #ddd;
  width: 100%;
  text-align: left;
}
.cmp_table_visual2 td, .cmp_table_visual2 th {
  padding: 15px 15px;
}
.cmp_table_visual2 thead tr {
  background-color: #91C16D;
}
.cmp_table_visual2 thead tr th {
  color: #fff;
  text-align: center;
}
.cmp_table_visual2 tfoot {
  border-top: 1px solid #ddd;
}
.cmp_table_visual2 tbody tr th {
  font-weight: bold;
}
.cmp_table_visual2 tbody tr:nth-of-type(2n) {
  background: #f5f5f5;
}

HTML

<table class="cmp_table_visual2">
    <thead>
        <tr><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th></tr>
    </thead>
    <tfoot>
        <tr><td>フッター</td><td>フッター</td><td>フッター</td><td>フッター</td><td>フッター</td></tr>
    </tfoot>
    <tbody>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
    </tbody>
</table>

結果

ヘッダー ヘッダー ヘッダー ヘッダー ヘッダー
フッター フッター フッター フッター フッター
見出し セル セル セル セル
見出し セル セル セル セル
見出し セル セル セル セル
見出し セル セル セル セル

大阪のホームページ制作会社YCOMの制作サービスのご紹介