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

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

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

注意

最近のテーマは、元々<table>タグにCSSを適用させているものが多いです。

その為「コピペしても上手くいかない」「もう少し微調整をしたい」という声を時々いただきます。しっかり使いこなせば、SEOにも抜群に効いてくるのでこの機会に基礎から理解しておくことをオススメします。

記事の目次

HTMLテーブルタグの基本–４つの要素–
HTMLテーブルデザイン１【表のカスタマイズ】
HTMLテーブルデザイン２【見出し（th）のカスタマイズ】
HTMLテーブルデザイン３【見出し以外のセル（td）をカスタマイズ】
HTMLテーブルデザイン４【行（tr）のカスタマイズ】
HTMLテーブルデザイン５【見出し（th）を左側に設置した表の作成方法】
HTMLテーブルデザイン６【見出し（th）が左側にある２セル表のレスポンシブ対応】
HTMLテーブルデザイン７【セルごとにカラーを変える方法】
HTMLテーブルデザイン８【セルを横に繋げる方法】
HTMLテーブルデザイン10【セルを縦に繋げる方法】
HTMLテーブルデザイン11【thead・tbody・tfootの使い方】
HTMLテーブルデザイン11【Tableの上下にキャプションを作成】
HTMLテーブルデザイン12【全てのセル幅を均等にする】
HTMLテーブルデザイン13【テーブル内の画像サイズ調整】
まとめ

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

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

横１行が(tr)見出しセルは(th)　　　（縦）	見出し(th)　　（縦）
横１行が（tr）見出し以外のセルは（td）↓	見出し以外（td）↓
横１行が（tr）見出し以外のセルは（td）↓	見出し以外（td）↓
横１行が（tr）見出し以外のセルは（td）↓	見出し以外（td）↓
横１行が（tr）見出し以外のセルは（td）（列）	見出し以外（td）（列）

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」タグとは見出し部分（グレー）のセルになります。

通常(th)	見出しは(th)	背景カラーを(th)	変更する(th)

１-２：tdタグ

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

見出し(td)	以外の(td)	セルは(td)	全て(td)要素
見出し(td)	以外の(td)	セルは(td)	全て(td)要素

１-３：trタグ

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

ここから(tr)	ここ	まで	の横一列が(tr)
ここから(tr)	ここ	まで	の横一列が(tr)

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

Tableタグのまとめ

「table」：表全体
「th」：見出しセル
「td」：見出し以外のセル
「tr」：横一列

上記4つの要素で作られている。

補足

その他に、「<thead>〜</thead>」「<tbody>〜</tbody>」「<tfoot>〜</tfoot>」という、３つの要素もありますが、それは応用編なので後ほど解説していきます。

なお、今回のカスタマイズではこれらの要素は不要です。

HTMLテーブルデザイン１【表のカスタマイズ】

それでは、ここから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;/*スクロールバーの角に丸みをつける*/
}

よくある質問を見る

テキストを左寄せにしたい

text-align:center;をtext-align:left;に変更。

テキストを太字にしたくない

font-weight:bold;をfont-weight:normal;へ変更

補足

font-weight:bold;自体を消すと見出し（th）は太字、それ以外のセル（td）は細くなります。

border-collapse:collapse;は不要では？

最近のテーマであれば、標準でこの設定がされているはずですが一応書きました。削除してもテーブルが崩れなければ不要です。

枠線のカラーや太さを変えたい

border:2px solid #e0e0e0;を変更してください。

2px=太さ
solid=線の種類
#e0e0e0=枠線のカラー

スクロールバーってどんな感じで出るの？

以下のようにTable表の下側に表示されます。

「テキスト改行なし」を指定しないとどうなる？

以下のように見栄えの悪い表になります。（特にスマホ）

補足

ただし、１行の文字数が多すぎるとこれまた見栄えが悪いのでその場合は<br>タグ（改行）などでバランスを取りましょう。

ちなみに、改行なしwhite-space:nowrap;を指定して、スクロールバーの設定をしないと以下のように画面からはみ出すので注意。

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

見出しセル（th）
それ以外のセル（td）
行（tr）

でも使います。

HTMLテーブルデザイン２【見出し（th）のカスタマイズ】

見出し1(th)	見出し2(th)	見出し3(th)	見出し4(th)

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

補足

背景カラーに!important;を指定したのは後ほど解説するカスタマイズの関係です。

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

見出しに余白がない表

↓↓

見出しに余白がある表

HTMLテーブルデザイン３【見出し以外のセル（td）をカスタマイズ】

見出し(td)	以外の(td)	セルは(td)	全て(td)要素
見出し(td)	以外の(td)	セルは(td)	全て(td)要素

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

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

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

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

（td）要素に余白がない表

↓↓

（th）（td）両方に余白がある表

HTMLテーブルデザイン４【行（tr）のカスタマイズ】

緑色の(tr)	１列が	奇数行	です(tr)
オレンジの(tr)	１列が	偶数行	です(tr)

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

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

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

補足

先ほど見出し（th）の背景カラーに!important;をつけたのは、ここで背景カラー指定を使うと見出し部分も「奇数行」としてカウントされカラーが変更されてしまう為です。

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

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

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

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

５-１・マウスオーバー時の背景カラーを指定

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

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

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

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

見出し	部分の	背景カラーは	変わらない
見出し以外の	行（tr）は	背景カラーが	変わる
見出し以外の	行（tr）は	背景カラーが	変わる

補足

ここでも、見出し（th）の背景カラーを!important;指定したことで、見出し背景カラーは変更されません。

ここまでで使用したCSSを一旦まとめ

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;
}

各自不要なコードは各自削除してください。

HTMLテーブルデザイン５【見出し（th）を左側に設置した表の作成方法】

見出し1（th）	111（td）	222（td）	333（td）
見出し2（th）	444（td）	555（td）	666（td）
見出し3（th）	777（td）	888（td）	999（td）

この場合、その他のデザインが同じでよければ「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を参考にしてみてください。

HTMLテーブルデザイン６【見出し（th）が左側にある２セル表のレスポンシブ対応】

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

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

WEBサイト	カゲサイ
管理人	カゲオ
URL	https://kagesai.net

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

２セル用のコード

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>

classを「table2」に変更しています。

とりあえず３列分のコードですが、列を足したい場合は以下のコードを</tr>の下に足してください。

<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;
}}

２セル表の場合は、PCの見出し（th）はwidth:30%;で幅を狭くしてバランスを取ります。※ここは、見出し内に書くテキスト量により調整してください。

border-top:none;とborder-top:1px solid #e0e0e0;は、以下の画像の微妙な隙間を埋めるために指定します。

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

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

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

HTMLテーブルデザイン７【セルごとにカラーを変える方法】

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

薄いピンク(th)	ムラサキ(td)
黄色(th)	濃いピンク(td)
水色(th)	オレンジ(td)
グリーン(th)	ブルー(td)

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

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;
 }

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

HTMLテーブルデザイン８【セルを横に繋げる方法】

セルを横に繋げるコードを覚えておくと、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テーブルデザイン10【セルを縦に繋げる方法】

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

縦に繋げた	繋げない	繋げない
縦に繋げた	繋げない	縦に繋げた
繋げない	繋げない	縦に繋げた

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を使います。

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

HTMLテーブルデザイン11【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タグを極めたい・・・そんな方は練習がてら挑戦してみてください。

HTMLテーブルデザイン11【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;/*テキストカラー*/
}

この辺りはお好みで。

HTMLテーブルデザイン12【全てのセル幅を均等にする】

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

例えばこんな感じ。

スマホ	ツール	アプリ	メール
すべて	文字数	一緒の	時など

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

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

HTMLテーブルデザイン13【テーブル内の画像サイズ調整】

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

画質にこだわるなら、ある程度大きなサイズを使うことになりますが、そのまま挿入すると巨大サイズのまま&左寄りの為バランスが悪くなります。この辺りを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;
}

150pxの値で、画像の大きさを調整してください。

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

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