【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

web兄さん

テーブルのデザインってどんなものにするか迷いますよね。多くのwebサイトでテーブルが使われますが、基本的にHTMLとCSSだけで表現しなければいけないのでデザインに制限があり、webデザイナーも頭を悩ませる要素の一つです。

そこで今回はHTMLとCSSだけで実装できるテーブルデザインをたっぷりまとめてみました。コピペですぐ反映できるようになっているのでぜひ活用してみてください！

プランなどで使える料金テーブル

無料プラン	人気No.1初級プラン	上級プラン
¥0	¥5,000	¥8,000
申し込み	申し込み	申し込み
保証なし	保証1ヶ月	保証3ヶ月

よくサービスのプランの比較に使用される料金テーブルです。人気のプランを目立たせるために中央のデータだけ大きさを変えて飛び出させています。真ん中の飛び出しているセルはposition:absoluteで実現しています。tableの幅は絶対値で固定しているのでレスポンシブ対応させる場合は横スクロールさせる必要があります。

<table>
  <tr>
    <th>無料プラン</th>
    <th class="popular"><span class="inner"><span class="no1">人気No.1</span>初級プラン</span></th>
    <th>上級プラン</th>
  </tr>
  <tr>
    <td>¥0</td>
    <td class="popular">¥5,000</td>
    <td>¥8,000</td>
  </tr>
  <tr>
    <td><a href="#">申し込み</a></td>
    <td><a href="#">申し込み</a></td>
    <td><a href="#">申し込み</a></td>
  </tr>
  <tr>
    <td>保証なし</td>
    <td class="popular">保証1ヶ月</td>
    <td>保証3ヶ月</td>
  </tr>
</table>

table{
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 490px;
}

table tr:last-child{
  border-bottom:solid 1px #ddd;
}

table th{
  text-align: center;
  padding: 10px 0;
  border-right:solid 1px #ddd;
  border-left:solid 1px #ddd;
  width: 155px;
}

table th:nth-child(1){
  background-color:#dddddd;
}

table th:nth-child(3){
  background-color:#f5b932;
  color: white;
}

table tr:nth-child(2) td{
  font-size: 30px;
}

table td{
  text-align: center;
  padding: 7px 0;
  border-right:solid 1px #ddd;
  border-left:solid 1px #ddd;
  width: 155px;
}

table td a{
  background-color: #25b327;
  color: white;
  padding:5px 20px;
  border-radius: 30px;
  font-weight: bold;
}

table .popular{
  width: 180px;
}

table th.popular{
  position: relative;
}

table th.popular span.no1{
  position: absolute;
  top: -10px;
  left:calc(50% - 30px);
  background: #bdcc28;
  width: 60px;
  font-size: 10px;
  border-radius: 15px;
  line-height: 1;
  padding: 5px;
}

table th.popular span.inner{
  position: absolute;
  color:white;
  background-color: #f34955;
  left: 0;
  bottom: 0;
  display: block;
  width: 180px;
  padding: 10px 0;
}

アイコン風の見出しを入れたテーブル

お名前	特技	担当カラー	住所
トリさん	空を飛ぶこと	グリーン	山
クジラさん	潮を吹くこと	ブルー	海
カニさん	反復横飛び	レッド	川

<table>
  <tr>
    <th>お名前</th>
    <th>特技</th>
    <th>担当カラー</th>
    <th>住所</th>
  </tr>
  <tr>
    <td class="icon bird">トリさん</td>
    <td>空を飛ぶこと</td>
    <td>グリーン</td>
    <td>山</td>
  </tr>
  <tr>
    <td class="icon whale">クジラさん</td>
    <td>潮を吹くこと</td>
    <td>ブルー</td>
    <td>海</td>
  </tr>
  <tr>
    <td class="icon crab">カニさん</td>
    <td>反復横飛び</td>
    <td>レッド</td>
    <td>川</td>
  </tr>
</table>

table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

table tr{
  border-bottom: solid 1px #eee;
  cursor: pointer;
}

table tr:hover{
  background-color: #d4f0fd;
}

table th,table td{
  text-align: center;
  width: 25%;
  padding: 15px 0;
}

table td.icon{
  background-size: 35px;
  background-position: left 5px center;
  background-repeat: no-repeat;
  padding-left: 30px;
}

table td.icon.bird{
  background-image: url(icon-bird.png)
}

table td.icon.whale{
  background-image: url(icon-whale.png)
}

table td.icon.crab{
  background-image: url(icon-crab.png)
}

セルのデザインが立体的なテーブル

都道府県	面積	人口	人口密度
愛知県	5,172km2	7,526,911人	1,455人/km2
東京都	2,193km2	13,742,906人	6,263人/km2
大阪府	1,905km2	8,831,642人	4,635人/km2

いろんな雰囲気のサイトに溶け込む汎用性の高いテーブルデザインです。webparkさんの記事のコードをを参考にしてわかりやすくリメイクしてみました。

<table>
  <tr>
    <th>都道府県</th>
    <th>面積</th>
    <th>人口</th>
    <th>人口密度</th>
  </tr>
  <tr>
    <td>愛知県</td>
    <td>5,172km2</td>
    <td>7,526,911人</td>
    <td>1,455人/km2</td>
  </tr>
  <tr>
    <td>東京都</td>
    <td>2,193km2</td>
    <td>13,742,906人</td>
    <td>6,263人/km2</td>
  </tr>
  <tr>
    <td>大阪府</td>
    <td>1,905km2</td>
    <td>8,831,642人</td>
    <td>4,635人/km2</td>
  </tr>
</table>

table{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

table th:first-child{
  border-radius: 5px 0 0 0;
}

table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

table th{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0;
}

table td{
  text-align: center;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0;
}

table td:last-child{
  border-right: 1px solid #a8b7c5;
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}

セルをボーダーで繋いだシンプルなテーブル

会社名	テーブル株式会社
創業	1940年
従業員数	500人
電話番号	000-000-0000

見出しセルのthの擬似要素のafterを追加してボーダーを入れています。見出しセルとデータセルの中間にボーダーを置くために微調整が必要です。

<table>
  <tr>
    <th>会社名</th>
    <td>テーブル株式会社</td>
  </tr>
  <tr>
    <th>創業</th>
    <td>1940年</td>
  </tr>
  <tr>
    <th>従業員数</th>
    <td>500人</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>000-000-0000</td>
  </tr>
</table>

table{
  width: 100%;
}

table th{
  position: relative;
  text-align: left;
  width: 15%;
}

table th:after{
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background-color: #333;
  position: absolute;
  top:calc(50% - 1px);
  right:-15px;
}

table td{
  text-align: left;
  padding:7px 0 7px 30px;
  width: 85%;
}

交互に背景色を変えたテーブル

見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ

セルの背景色を行ごとに変えています。実装はとてもシンプルでcssでtr:nth-child(odd)をセレクタにすることで奇数行にのみbackground-colorを適用しています。ちなみに偶数行にcssを指定したい場合はtr:nth-child(even)をセレクタにすることで可能です。

<table>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table th,table td{
  padding: 10px 0;
  text-align: center;
}

table tr:nth-child(odd){
  background-color: #eee
}

下線の色だけで見出しとデータを分けたデザイン

見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ

ボーダーの色だけで見出しセルとデータセルを分けたテーブル。うるさくなりすぎないデザインなのでモダンなサイトに使いやすいデザインのテーブルです。

<table>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

table{
  width: 100%;
  border-spacing: 0;
}

table th{
  border-bottom: solid 2px #fb5144;
  padding: 10px 0;
}

table td{
  border-bottom: solid 2px #ddd;
  text-align: center;
  padding: 10px 0;
}

タイル風のテーブル

見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ

セルの一つ一つを線で囲い隣のセルと離すことでタイルっぽいデザインになっています。tableに対してborder-spacing: 5pxを適用することでセル同士に距離を持たせることができます。

<table>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
  <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

table{
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
}

table th{
  background-color: #c79852;
  color: white;
  border:solid 1px #927141;
}

table td{
  background-color: #e4d4bc;
  border:solid 1px #af9d85;
}

見出しに三角矢印を装飾したテーブル

会社名	テーブル株式会社
創業	1940年
従業員数	500人
電話番号	000-000-0000

ポップなデザインのサイトに合いそうなテーブルデザイン。三角矢印はthの擬似要素のafterで表現しています。

<table>
  <tr>
    <th>会社名</th>
    <td>テーブル株式会社</td>
  </tr>
  <tr>
    <th>創業</th>
    <td>1940年</td>
  </tr>
  <tr>
    <th>従業員数</th>
    <td>500人</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>000-000-0000</td>
  </tr>
</table>

table{
  width: 100%;
  border-collapse: collapse;
}

table tr{
  border-bottom: solid 2px white;
}

table tr:last-child{
  border-bottom: none;
}

table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #52c2d0;
  color: white;
  text-align: center;
  padding: 10px 0;
}

table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table td{
  text-align: left;
  width: 70%;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}

列（縦）ごとに色を変えたテーブル

見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ

縦のラインでごとにセルの背景色を変更しています。セレクタをtable tr *:nth-child(n)とすることで縦のラインのセルの背景色を一括で指定することができます。サンプルではグラデーションっぽくなっていますが色を変えればカラフルなテーブルが作成可能です。

<table>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

table{
  width: 100%;
  border-collapse: collapse;
}

table tr *:nth-child(1){
  background: #49c5f0;
}

table tr *:nth-child(2){
  background: #57b3e8;
}

table tr *:nth-child(3){
  background: #649cdf;
}

table tr *:nth-child(4){
  background: #6e87d7;
}

table th,table td{
  color:white;
  border:solid 1px white;
  text-align: center;
  padding: 10px 0;
}

行の背景色がグラデーションになっているテーブル

見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ
見出し	データ	データ	データ

行（横のライン）が一つの背景色でグラデーションになっているテーブルデザイン。使用するケースは限られてきますが実装は簡単です。trにlinear-gradientを指定するだけで行にグラデーションを適用できます。

<table>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

table{
  width: 100%;
  border-collapse: collapse;
}

table tr{
  background-image: linear-gradient(40deg, #fce043 0%, #fb7ba2 74%);
}

table tr:last-child *{
  border-bottom: none;
}

table th,table td{
  text-align: center;
  border: solid 2px #fff;
  color: white;
  padding: 10px 0;
}

まとめ

どのテーブルデザインもリメイクすれば色々な表現ができそうだね。テーブルは利用シーンの多いタグだから、ノンデザイナーでも豊かな表現を身につけておいて損はないはずさ！tableタグの基本的な使い方やcssでのテクニックはこちらの記事で解説しているのでぜひチェックしておいてね。