今回は、テーブルのデザインをHTMLとCSSのサンプルと共にご紹介します。汎用的なデザインを集めているのでテーブルのコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。レスポンシブ用に最低限のスタイルも当てています。
事前準備
本サンプルでは、リセットCSSにdestyle.css(https://github.com/nicolas-cusan/destyle.css)を使っています。HTMLとCSSをコピペする前に、事前に以下のCDNでデフォルトのブラウザスタイルをリセットしてからお試しください。
HTMLのテンプレート
今回のテーブルは全て同じHTMLを使用して、CSSのみの変更でデザインを表現しています。
普通のテーブル

いたって普通のテーブルデザインです。
シンプルなテーブル

シンプルで使いやすいテーブルです。カスタマイズしてお使いください。
交互に背景色が変わるテーブル
行ごとに交互に背景色が変わるテーブルです。こちらもよく見かける使いやすいデザインにしています。

関連記事
見出しのコピペ実装記事はこちら

カードのコピペ実装記事はこちら
