HTMLテーブルをCSSでオシャレにデザインする為の講座

この記事では「Tableタグ」をマスターしてもらう為に、基本〜レスポンシブカスタマイズ&応用カスタマイズについて解説しています。

ここに書いたことをある程度理解しておけば、自分好みの「Table」表を作れますので、ぜひ参考にしてみてください。(基礎からレッスンのような構成になっているので、慣れてる人は目次を活用。)

HTMLテーブルタグの基本–４つの要素–

「Tableタグ」というのは、以下のような表全体を指します。

まずは、上記のような表を作成できるように解説していきます。(スマホではテーブルの下にスクロールバーが表示される。)原型となるHTMLは以下のようになります。

HTML
<div class="table1">
<table>
<tbody>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
</tbody>
</table>
</div>

上記色付きのタグについて1つずつ解説していきます。

thタグ

「th」タグとは見出し部分(グレー)のセルになります。

tdタグ

次の「td」タグは、見出し以外のセル全てを指します。

trタグ

最後に「tr」タグは横一列「行」を指します。

見出し「th」も見出し以外のセル「td」も関係なく、横１列は全て「tr」と覚えておこう。

表のカスタマイズ

それでは、ここからCSSの解説をしていきます。

最初に表全体に適用させるtable1という「class」を作成します。

.table1{
width:100%;/*画面の最大幅に合わせる*/
text-align:center;/*テーブル内のテキストを中央寄せ*/
font-weight:bold;/*テーブル内のテキスト太字*/
border-collapse:collapse;/*セル同士の枠線を重ねる*/
border:2px solid #e0e0e0;/*テーブル周りに枠線をつける*/
overflow:scroll;/*画面をはみ出す場合はスクロールバーを表示*/
white-space:nowrap;/*テーブル内の文字を改行しない*/
}
.table1::-webkit-scrollbar{
 height:9px;/*スクロールバーの太さ*/
}
.table1::-webkit-scrollbar-track{
 background:#f1f1f1;/*スクロールバーの背景色*/
}
.table1::-webkit-scrollbar-thumb {
 background:#8e8e8e;/*スクロールバーのカラー*/
border-radius:4px;/*スクロールバーの角に丸みをつける*/
}

ここで決めた「.table1」というclass名は、次章以降で解説する

• 見出しセル(th)
• それ以外のセル(td)
• 行(tr)

でも使います。

見出し(th)のカスタマイズ

.table1 th{
color:#000;/*テキストカラー*/
background:#f7f7f7!important;/*背景カラー*/
font-size:17px;/*フォントサイズ*/
padding:7px;/*内側余白調整*/
border:solid 2px #e8e8e8;/*見出し周りのボーダー線*/
} 

フォントサイズをその他のセルより少し大きめにし、余白を開けることで見出しが見やすくしました。

見出しに余白がない表

見出しに余白がある表

見出し以外のセル(td)をカスタマイズ

.table1 td{
border:solid 2px #e0e0e0;/*見出し外セル(td)の枠線*/
padding:7px;/*セル内に余白を空ける*/
font-size:15px;/*フォントサイズ*/
}

枠線は見出し(th)と同じカラーで指定しましょう。

フォントサイズを見出しより少し小さめにすると、見出しが目立ちます。

あとは見出し(th)と同様の値でpaddingを使うと均等の取れたTable表になります。(この辺は臨機応変に変更しよう!!)

(td)要素に余白がない表

(th)(td)両方に余白がある表

行(tr)のカスタマイズ

 /*行の枠線*/
.table1 tr{
border:solid 2px #e8e8e8;
}
/*奇数行の背景カラー*/
.table1 tr:nth-child(odd){
 background:#d6ffea; /*背景カラー*/
 }
 /*偶数行の背景カラー */
 .table1 tr:nth-child(even){
 background:#ffead6/*背景カラー*/
}

少し複雑ですが、こうすることで「奇数(odd)」と「偶数(even)」行の背景カラーを指定できます。

よほど変わったテーマでなければ、デフォルトの背景色はサイトの背景色(基本は白)に合わせているはずです。

ちなみに、以下のコードを使うと、指定した行だけ変更できます。

.table1 tr:nth-child(3){
background:#a3ffa3;/*背景カラー*/
} 

(３)とは、３行目だけ背景カラーを変更する指定になります。

「:nth-child」には他にも使い方はありますが、テーブル表を作る場合はこれくらい覚えておけば問題ないでしょう。

マウスオーバー時の背景カラーを指定

.table1 tr:hover{
background:#fff;/*背景カラー*/
} 

以下のテーブル表に「PCならマウスを載せる」、「スマホなら表をタップする」と背景カラーが変わります。

こうすることで、現在どのデータを見ているのか分かりやすくなりますね。

セルが多い場合などは、特にオススメです。

style.css
/*テーブル全体*/
.table1{
width:100%;
text-align:center;
font-weight:bold;
overflow:auto;
white-space: nowrap;
} 
/*横スクロールバーの太さ*/
.table1::-webkit-scrollbar{
 height:5px;
}
/*横スクロールバーの背景色*/
.table1::-webkit-scrollbar-track{
 background:#f1f1f1;
}
/*横スクロールバーのカラーと角を丸める*/
.table1::-webkit-scrollbar-thumb {
background:#8e8e8e;
border-radius:4px;
}
/*見出しセル指定*/
.table1 th{
background:#f7f7f7;
font-size:17px;
border:solid 1px #e8e8e8;
padding:10px;
} 
/*見出し以外のセル指定*/
.table1 td{
padding:10px;
border:solid 1px #e8e8e8;
font-size:16px;
}
/*行の枠線*/
.table1 tr{
border:solid 2px #e8e8e8;
} 
/*行の奇数指定*/
.table1 tr:nth-child(odd){
background:#d6ffea;
} 
/*行の偶数指定*/
.table1 tr:nth-child(even){
background:#ffead6;
} 
/*見出し以外のセルにマウスオーバー時のカラー指定*/
.table1 tr:hover{
background:#fff;
} 

見出し(th)を左側に設置した表の作成方法

この場合、その他のデザインが同じでよければ「HTMLの記述」のみで変更できます。

HTML
<div class="table1">
<table>
<tbody>
<tr>
<th>見出し1(th)</th>
<td>111(td)</td>
<td>222(td)</td>
<td>333(td)</td>
</tr>
<tr>
<th>見出し2(th)</th>
<td>444(td)</td>
<td>555(td)</td>
<td>666(td)</td>
</tr>
<tr>
<th>見出し3(th)</th>
<td>777(td)</td>
<td>888(td)</td>
<td>999(td)</td>
</tr>
</tbody>
</table>
</div>

(th)タグのすぐ下に(td)タグを入れることで、見出しが左側になります。

見出しが左側でもスクロールバーは表示されます。

もし「見出し上側表」と「見出し横側表」でデザインを変えたい場合は、先ほど解説したCSSを参考にしてみてください。

見出し(th)が左側にある２セル表のレスポンシブ対応

左見出しの２セル表とは、以下のような表で「会社概要」や「お問い合わせフォーム」によくあるパターンですね。

これをスマホで見せる場合は、スクロールバーではなく縦に並べた方が綺麗に見えます。

スマホで見た時のデザイン

HTML
<div class="table2">
<table>
<tbody>
<tr>
<th>WEBサイト</th>
<td>カゲサイ</td>
</tr>
<tr>
<th>管理人</th>
<td>カゲオ</td>
</tr>
<tr>
<th>URL</th>
<td>https://kagesai.net</td>
</tr>
</tbody>
</table>
</div>

<tr>
<th>見出し</th>
<td>見出し以外</td>
</tr>

style.css
/*テーブル全体*/
.table2{
width:100%;
text-align:left;
font-weight:bold;
border: 1px solid #e0e0e0;
} 
/*見出しセル*/
.table2 th{
background:#f7f7f7!important;
font-size:17px;
border:solid 1px #e0e0e0;
padding:7px;
width:30%;
white-space:nowrap;
}
/*見出し以外のセル*/ 
.table2 td{
padding:7px;
border:solid 1px #e0e0e0;
font-size:15px;
} 
/*マウスを乗せた時のカラー*/
.table2 tr:hover{
background:#ffffe0;
} 
/*スマホ用テーブル*/
@media(max-width:500px){
.table2 th,.table2 td{
width:100%;
display:block;
border-top:none;
}
.table2 tr:first-child th { 
border-top:1px solid #e0e0e0;
}}

少し複雑になりますが、２セル表の場合はこの方法がオススメです。

とりあえずここまでを理解しておけば、標準的な表の作成には困らないはずです。

ここから先は、さらにTableをマスターしたい人(中級者)向けの内容です。興味のある方は読み進めてください。

セルごとにカラーを変える方法

ほとんど使うことはありませんが、以下のように各セルごとに背景やテキストカラーをCSSで指定することもできます。

あまり美しくないですが、この場合のコードはこんな感じです。

HTML
<div class="table2">
<table>
<tbody>
<tr>
<th class="th1">薄いピンク(th)</th>
<td class="td5">ムラサキ(td)</td>
</tr>
<tr>
<th class="th2">黄色(th)</th>
<td class="td6">濃いピンク(td)</td>
</tr>
<tr>
<th class="th3">水色(th)</th>
<td class="td7">オレンジ(td)</td>
</tr>
<tr>
<th class="th4">グリーン(th)</th>
<td class="td8">ブルー(td)</td>
</tr>
</tbody>
</table>
</div>

style.css
/*薄ピンク見出し*/ 
.table2 .th1{
 background:ffadad;
color:#000;
}
/*黄色見出し*/ 
.table2 .th2{
 background:#ffffad; 
color:#000; 
} 
/*水色見出し*/ 
.table2 .th3{
 background:#adffff; 
color:#000; 
}
/*グリーン見出し*/  
.table2 .th4{
 background:#adffad; 
color:#000; 
} 
/*ムラサキセル*/
.table2 .td5{
background:#adadff;
color:#fff;
} 
/*濃いピンクセル*/ 
.table2 .td6{
 background:#ffadff; 
color:#fff; 
} 
/*オレンジセル*/ 
.table2 .td7{
 background:#ffd6ad; 
color:#fff; 
} 
/*ブルーセル*/ 
.table2 .td8{
 background:#add6ff; 
 color:#fff;
 }

女性向けサイトなどに使えるかもしれません。

セルを横に繋げる方法

セルを横に繋げるコードを覚えておくと、Tableタグでできることが増えます。

HTML
<table>
<tbody>
<tr>
<th>繋げない</th>
本来ここにあるはずのセル(th)を削除している
<th colspan="2">横に繋げた</th>
</tr>
<tr>
<td>繋げない</td>
<td>繋げない</td>
<td>繋げない</td>
</tr>
<tr>
<td>繋げない</td>
本来ここにあるはずのセル(td)を削除している
<td colspan="2">横に繋げた</td>
</tr>
</tbody>
</table>

上記のcolspan="2"が横に繋げるためのコードです。

colspanが横に繋げる意味を持ち「２」という数字は、２セル分繋げるという意味です。

セルを縦に繋げる方法

今度はセルを縦につなげてみましょう。

HTML
<table>
<tbody>
<tr>
<th rowspan="2">縦に繋げた</th>
<td>繋げない</td>
<td>繋げない</td>
</tr>
<tr>
本来ここにあるはずのセル(th)を削除している
<td>繋げない</td>
<td rowspan="2">縦に繋げた</td>
</tr>
<tr>
<th>繋げない</th>
<td>繋げない</td>
本来ここにあるはずのセル(td)を削除している
</tr>
</tbody>
</table>

縦に繋げる場合はrowspanを使います。

その他の原理は、横に繋げるタグと同じです。

thead・tbody・tfootの使い方

冒頭で紹介した３つの要素ですね。

これは簡単にいうと、Table表を

• 上・(thead)
• 中・(tbody)
• 下・(tfoot)

と３つの要素に振り分けることができます。

人間の視覚的には不要(使わなくても同様の表を作成できる為)なんですが、検索エンジンはこのコードを読み取れるので、botには親切なコードになります。

ただ、今まで色々なTable表を見てきましたが、ここまでやってる人は見たことないですね。一応この記事は講座なので、紹介しておきます。

うまく使うと、こんな表が作れます。

販売者(thead)	テーマ名(thead)	価格(thead)
OPENCAGE(オープンケージ) (tbody)	WordPressテーマ「ストーク」(tbody)	￥10800(税込)(tbody)
	WordPressテーマ「ハミングバード」(tbody)	￥7980(税込)(tbody)
	WordPressテーマ「アルバトロス」(tbody)	￥7980(税込)(tbody)
新作テーマ・￥9900(税込)WordPressテーマ「スワロー」(tfoot)

HTML
<table>
<thead>
<tr>
<th>(thead)</th>
<th>(thead)</th>
<th>(thead)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">縦に繋げた(tbody)</th>
<td>(tbody)</td>
<td>(tbody)</td>
</tr>
<tr>
<td>(tbody)</td>
<td>(tbody)</td>
</tr>
<tr>
<td>(tbody)</td>
<td>(tbody)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">横に繋げた(tfoot)</td>
</tr>
</tfoot>
</table>

style.css
/*テーブル全体*/
.table3 table {
letter-spacing:0;
text-align:center;
border:1px solid #888;	
} 
/*テーブルthead見出し*/
.table3 thead th{
background:#cce5ff;
font-size:17px;
border:1px solid #888;	
}
/*テーブルtbody見出し外のセル*/
.table10 tbody td{
font-size:15px;
border:1px solid #888;
}
/*テーブルtfootセル*/
.table10 tfoot {
background:#ffcccc;
font-size:17px;	
font-weight:bold;	
}

Tableタグを極めたい……そんな方は練習がてら挑戦してみてください。

Tableの上下にキャプションを作成

ここでいう「キャプション」とは、Table表の上にテキストを入れて、その表が何であるかを示します。

こちらもコーディング領域の話なので、bot用ですね。

HTML
<table>
<caption>ここに表のタイトル</caption>
<tbody>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>見出し以外</td>
<td>見出し以外</td>
<td>見出し以外</td>
</tr>
</tbody>
</table>

<table>タグのすぐ下に<caption>〜</caption>タグを入れてください。(他の箇所に入れても効きません)

キャプションをカスタマイズ

style.css
 .entry-content table caption{
caption-side:bottom;/*キャプションを下に移動*/
font-soze:18px;/*フォントサイズ*/
background:#3c3c3c;/*背景カラー*/
color:#fff;/*テキストカラー*/
}

この辺りはお好みで。

全てのセル幅を均等にする

表によっては、全て均等幅の方が見栄えが良い場合があります。

例えばこんな感じ。

その場合は、「CSS」で<table>タグまたは、オリジナルのclassに以下のコードを指定してください。

table{
width:100%;
table-layout:fixed;
}

テーブル内の画像サイズ調整

記事作成に慣れてくると意外に使うのがテーブル内に画像を挿入することです。

画質にこだわるなら、ある程度大きなサイズを使うことになりますが、そのまま挿入すると巨大サイズのまま&左寄りの為バランスが悪くなります。この辺りをCSSで調整していきましょう。

大きな画像をそのままぶち込むと以下のようになります。

商品名
商品説明
刃牙ファンを一瞬で引き込む表紙はセコイ。笑 バカにしてるのか？と思うほど簡単な筋トレからスタートする割にかなり奥が深い内容になっている。 筋トレ初心者〜ベテランまで、一度は手に取ってほしい良書。

CSS調整後はこんな感じ。

商品名
商品説明
刃牙ファンを一瞬で引き込む表紙はセコイ。笑 バカにしてるのか？と思うほど簡単な筋トレからスタートする割にかなり奥が深い内容になっている。 筋トレ初心者〜ベテランまで、一度は手に取ってほしい良書。 Amazonで見る 楽天市場で見る

ボタンも入れれば、それなりに見えますね。

HTML
<div class="table3">
<table>
<tbody>
<tr>
<th>商品名</th>
</tr>
<tr>
<td >画像を貼り付け</td>
</tr>
<tr>
<th>商品説明</th>
</tr>
<tr>
<td class="ss">ここに文章やボタンを設置</td>
</tr>
</tbody>
</table>
</div>

style.css
.table3{
white-space:normal;
display:block;
color:#444;
text-align:center;
width:100%;
border:solid 2px #e8e8e8;
}
.table3 th{
font-size:17px;
background:#f4f4f4;
border:solid 2px #e8e8e8;
}
.table3 td{
border:solid 2px #e8e8e8;
}
.table3 .ss{
font-size:15px;
line-height:2.0;
text-align:left!important;
}
.table3 img{
max-width:150px;
}

さて、長くなりましたが「Tableタグ」の基本をまとめてみました。

今回紹介したHTMLを自分なりにカスタマイズしたら「AddQuicktag」に登録しておくと、ボタン１つで「タグ」を呼び出せるので便利です。

AddQuicktagの使い方と設定【隠れた機能も全て解説】

あと問い合わせフォームプラグイン【Contact Form 7】も「Tableタグ」を使ってデザインできるのでオススメです。

Contact Form 7をプロ級フォームにカスタマイズする方法

HTMLテーブルデザイン【まとめ】

「Tableタグ」自体は、プラグインを使ったりすれば簡単に作成できるんですが、CSSとHTMLの勉強にはかなり役立ちますね。

以下の記事では「Tableタグ」をふんだんに使いSEOに強い比較記事を作成したので、よかったら参考にしてみてください。

Amazon定期便対応してる【おむつ】だけの比較表を作ってみた

またお問い合わせフォームプラグインContact Form 7もTableタグを使用できるので、この記事を応用すればいけてるフォームを作成できます。

Contact Form 7をプロ級フォームにカスタマイズする方法