この記事では「Tableタグ」をマスターしてもらう為に、基本〜レスポンシブカスタマイズ&応用カスタマイズについて解説しています。
ここに書いたことをある程度理解しておけば、自分好みの「Table」表を作れますので、ぜひ参考にしてみてください。(基礎からレッスンのような構成になっているので、慣れてる人は目次を活用。)
最近のテーマは、元々<table>
タグにCSSを適用させているものが多いです。
その為「コピペしても上手くいかない」「もう少し微調整をしたい」という声を時々いただきます。しっかり使いこなせば、SEOにも抜群に効いてくるのでこの機会に基礎から理解しておくことをオススメします。
目次・読みたい所へタップできます
HTMLテーブルタグの基本–4つの要素–
「Tableタグ」というのは、以下のような表全体を指します。
横1行が(tr)見出しセルは(th) (縦) | 見出し(th) (縦) |
---|---|
横1行が(tr)見出し以外のセルは(td)↓ | 見出し以外(td)↓ |
横1行が(tr)見出し以外のセルは(td)↓ | 見出し以外(td)↓ |
横1行が(tr)見出し以外のセルは(td)↓ | 見出し以外(td)↓ |
横1行が(tr)見出し以外のセルは(td)(列) | 見出し以外(td)(列) |
- 1つ1つのマス目が「セル」
- 「セル」が横に続くものが「行」
- 「セル」が縦に続くものが「列」
まずは、上記のような表を作成できるように解説していきます。(スマホではテーブルの下にスクロールバーが表示される。)原型となるHTML
は以下のようになります。
HTMLcopyする<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」も関係なく、横1列は全て「tr」と覚えておこう。
- 「table」:表全体
- 「th」:見出しセル
- 「td」:見出し以外のセル
- 「tr」:横一列
上記4つの要素で作られている。
その他に、「<thead>〜</thead>」「<tbody>〜</tbody>」「<tfoot>〜</tfoot>」という、3つの要素もありますが、それは応用編なので後ほど解説していきます。
なお、今回のカスタマイズではこれらの要素は不要です。
表のカスタマイズ
それでは、ここからCSS
の解説をしていきます。
最初に表全体に適用させるtable1
という「class」を作成します。
CSScopyする.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=枠線のカラー
ただし、1行の文字数が多すぎるとこれまた見栄えが悪いのでその場合は<br>タグ(改行)などでバランスを取りましょう。
ちなみに、改行なしwhite-space:nowrap;
を指定して、スクロールバーの設定をしないと以下のように画面からはみ出すので注意。
ここで決めた「.table1」というclass名は、次章以降で解説する
- 見出しセル(th)
- それ以外のセル(td)
- 行(tr)
でも使います。
見出し(th)のカスタマイズ
見出し1(th) | 見出し2(th) | 見出し3(th) | 見出し4(th) |
---|
CSScopyする.table1 th{ color:#000;/*テキストカラー*/ background:#f7f7f7!important;/*背景カラー*/ font-size:17px;/*フォントサイズ*/ padding:7px;/*内側余白調整*/ border:solid 2px #e8e8e8;/*見出し周りのボーダー線*/ }
背景カラーに!important;
を指定したのは後ほど解説するカスタマイズの関係です。
フォントサイズをその他のセルより少し大きめにし、余白を開けることで見出しが見やすくしました。

見出しに余白がない表

見出しに余白がある表
見出し以外のセル(td)をカスタマイズ
見出し(td) | 以外の(td) | セルは(td) | 全て(td)要素 |
見出し(td) | 以外の(td) | セルは(td) | 全て(td)要素 |
CSScopyする.table1 td{ border:solid 2px #e0e0e0;/*見出し外セル(td)の枠線*/ padding:7px;/*セル内に余白を空ける*/ font-size:15px;/*フォントサイズ*/ }
枠線は見出し(th)と同じカラーで指定しましょう。
フォントサイズを見出しより少し小さめにすると、見出しが目立ちます。
あとは見出し(th)と同様の値でpadding
を使うと均等の取れたTable表になります。(この辺は臨機応変に変更しよう!!)

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

(th)(td)両方に余白がある表
行(tr)のカスタマイズ
緑色の(tr) | 1列が | 奇数行 | です(tr) |
オレンジの(tr) | 1列が | 偶数行 | です(tr) |
CSScopyする/*行の枠線*/ .table1 tr{ border:solid 2px #e8e8e8; } /*奇数行の背景カラー*/ .table1 tr:nth-child(odd){ background:#d6ffea; /*背景カラー*/ } /*偶数行の背景カラー */ .table1 tr:nth-child(even){ background:#ffead6/*背景カラー*/ }
少し複雑ですが、こうすることで「奇数(odd)」と「偶数(even)」行の背景カラーを指定できます。
よほど変わったテーマでなければ、デフォルトの背景色はサイトの背景色(基本は白)に合わせているはずです。
先ほど見出し(th)の背景カラーに!important;
をつけたのは、ここで背景カラー指定を使うと見出し部分も「奇数行」としてカウントされカラーが変更されてしまう為です。
ちなみに、以下のコードを使うと、指定した行だけ変更できます。
CSScopyする.table1 tr:nth-child(3){ background:#a3ffa3;/*背景カラー*/ }
(3)
とは、3行目だけ背景カラーを変更する指定になります。
「:nth-child」には他にも使い方はありますが、テーブル表を作る場合はこれくらい覚えておけば問題ないでしょう。
マウスオーバー時の背景カラーを指定
CSScopyする.table1 tr:hover{ background:#fff;/*背景カラー*/ }
以下のテーブル表に「PCならマウスを載せる」、「スマホなら表をタップする」と背景カラーが変わります。
こうすることで、現在どのデータを見ているのか分かりやすくなりますね。
セルが多い場合などは、特にオススメです。
見出し | 部分の | 背景カラーは | 変わらない |
---|---|---|---|
見出し以外の | 行(tr)は | 背景カラーが | 変わる |
見出し以外の | 行(tr)は | 背景カラーが | 変わる |
ここでも、見出し(th)の背景カラーを!important;
指定したことで、見出し背景カラーは変更されません。
CSS
を一旦まとめ見出し(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の記述」のみで変更できます。
(th)タグのすぐ下に(td)タグを入れることで、見出しが左側になります。
見出しが左側でもスクロールバーは表示されます。
もし「見出し上側表」と「見出し横側表」でデザインを変えたい場合は、先ほど解説したCSS
を参考にしてみてください。
見出し(th)が左側にある2セル表のレスポンシブ対応
左見出しの2セル表とは、以下のような表で「会社概要」や「お問い合わせフォーム」によくあるパターンですね。
これをスマホで見せる場合は、スクロールバーではなく縦に並べた方が綺麗に見えます。
WEBサイト | カゲサイ |
---|---|
管理人 | カゲオ |
URL | https://kagesai.net |

スマホで見た時のデザイン
少し複雑になりますが、2セル表の場合はこの方法がオススメです。
とりあえずここまでを理解しておけば、標準的な表の作成には困らないはずです。
ここから先は、さらにTableをマスターしたい人(中級者)向けの内容です。興味のある方は読み進めてください。
セルごとにカラーを変える方法
ほとんど使うことはありませんが、以下のように各セルごとに背景やテキストカラーをCSS
で指定することもできます。
薄いピンク(th) | ムラサキ(td) |
---|---|
黄色(th) | 濃いピンク(td) |
水色(th) | オレンジ(td) |
グリーン(th) | ブルー(td) |
あまり美しくないですが、この場合のコードはこんな感じです。
女性向けサイトなどに使えるかもしれません。
セルを横に繋げる方法
セルを横に繋げるコードを覚えておくと、Tableタグでできることが増えます。
繋げない | 横に繋げた | |
---|---|---|
繋げない | 繋げない | 繋げない |
繋げない | 横に繋げた |
HTMLcopyする<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
が横に繋げる意味を持ち「2」という数字は、2セル分繋げるという意味です。
ここは説明が難しいのですが、セルを繋げる場合、本来そこにあったセルを削除しなければいけません。
「青字」部分が3行あるので、通常は他のセルも3行なければバランスが取れません。
ただし、セル同士を繋げる場合はその行を2行にする「緑字部分」ことでバランスが取れます。
セルを縦に繋げる方法
今度はセルを縦につなげてみましょう。
縦に繋げた | 繋げない | 繋げない |
---|---|---|
繋げない | 縦に繋げた | |
繋げない | 繋げない |
HTMLcopyする<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の使い方
冒頭で紹介した3つの要素ですね。
これは簡単にいうと、Table表を
- 上・(thead)
- 中・(tbody)
- 下・(tfoot)
と3つの要素に振り分けることができます。
人間の視覚的には不要(使わなくても同様の表を作成できる為)なんですが、検索エンジンはこのコードを読み取れるので、botには親切なコードになります。
ただ、今まで色々なTable表を見てきましたが、ここまでやってる人は見たことないですね。一応この記事は講座なので、紹介しておきます。
うまく使うと、こんな表が作れます。
販売者(thead) | テーマ名(thead) | 価格(thead) |
---|---|---|
OPENCAGE(オープンケージ) ![]() |
WordPressテーマ「ストーク」![]() |
¥10800(税込)(tbody) |
WordPressテーマ「ハミングバード」![]() |
¥7980(税込)(tbody) | |
WordPressテーマ「アルバトロス」![]() |
¥7980(税込)(tbody) | |
新作テーマ・¥9900(税込)WordPressテーマ「スワロー」![]() |
Tableタグを極めたい……そんな方は練習がてら挑戦してみてください。
Tableの上下にキャプションを作成
ここでいう「キャプション」とは、Table表の上にテキストを入れて、その表が何であるかを示します。
こちらもコーディング領域の話なので、bot用ですね。
1位 | 2位 | 3位 |
---|---|---|
びっくりドンキー | デニーズ | サイゼリア |
HTMLcopyする<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>
タグを入れてください。(他の箇所に入れても効きません)
キャプションをカスタマイズ
1位 | 2位 | 3位 |
---|---|---|
びっくりドンキー | デニーズ | サイゼリア |
style.csscopyする.entry-content table caption{ caption-side:bottom;/*キャプションを下に移動*/ font-soze:18px;/*フォントサイズ*/ background:#3c3c3c;/*背景カラー*/ color:#fff;/*テキストカラー*/ }
この辺りはお好みで。
全てのセル幅を均等にする
表によっては、全て均等幅の方が見栄えが良い場合があります。
例えばこんな感じ。
スマホ | ツール | アプリ | メール |
---|---|---|---|
すべて | 文字数 | 一緒の | 時など |
その場合は、「CSS」で<table>
タグまたは、オリジナルのclass
に以下のコードを指定してください。
CSScopyするtable{ width:100%; table-layout:fixed; }
テーブル内の画像サイズ調整
記事作成に慣れてくると意外に使うのがテーブル内に画像を挿入することです。
画質にこだわるなら、ある程度大きなサイズを使うことになりますが、そのまま挿入すると巨大サイズのまま&左寄りの為バランスが悪くなります。この辺りをCSSで調整していきましょう。
大きな画像をそのままぶち込むと以下のようになります。
商品名 |
---|
![]() |
商品説明 |
刃牙ファンを一瞬で引き込む表紙はセコイ。笑バカにしてるのか?と思うほど簡単な筋トレからスタートする割にかなり奥が深い内容になっている。筋トレ初心者〜ベテランまで、一度は手に取ってほしい良書。 |
CSS調整後はこんな感じ。
商品名 |
---|
![]() |
商品説明 |
刃牙ファンを一瞬で引き込む表紙はセコイ。笑バカにしてるのか?と思うほど簡単な筋トレからスタートする割にかなり奥が深い内容になっている。筋トレ初心者〜ベテランまで、一度は手に取ってほしい良書。Amazonで見る楽天市場で見る |
ボタンも入れれば、それなりに見えますね。
さて、長くなりましたが「Tableタグ」の基本をまとめてみました。
今回紹介したHTML
を自分なりにカスタマイズしたら「AddQuicktag」に登録しておくと、ボタン1つで「タグ」を呼び出せるので便利です。

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

HTMLテーブルデザイン【まとめ】
「Tableタグ」自体は、プラグインを使ったりすれば簡単に作成できるんですが、CSS
とHTML
の勉強にはかなり役立ちますね。
以下の記事では「Tableタグ」をふんだんに使いSEOに強い比較記事を作成したので、よかったら参考にしてみてください。

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

※日本語が含まれていないコメントは投稿できません。(スパム対策)