HTML表テーブルをCSSでおしゃれにデザインするコツ

当記事では、テーブル（表）のHTML解説および、CSSでデザインする時のコツを解説します。
ネットに転がっているテーブルデザインをコピペしても、上手くいかない理由も分かることでしょう。

ブロックエディタになってからというもの、選ぶだけでもそれなりの表を作れるようになりました。
ただ本気のテーブル表を作りたいとなったとき、まだまだブロックでは対応できません。

例えば、以下の問い合わせフォームのデザインはtableタグを使っています。

こうした投稿外に使用する場合や本格的な比較表を作りたいときは、tableタグの基礎やCSSをある程度理解しておくとコンバージョン率アップに直結します。

なるべくわかりやすく解説しましたので、ぜひ最後までお付き合いください。

HTMLテーブルタグは4つだけ覚えればOK

<table> <!-- 表の外枠開始タグ -->
<tr> <!-- 行の開始タグ -->

<th>見出し</th>

<td>セル</td>

</tr> <!-- 行の閉じタグ -->
</table> <!-- 表の外枠閉じタグ -->

基本この4つを組み合わせて使います。
<table>と<tr>は必ずセットで使用し、<th>と<td>を囲む形を取ります。
つまり基本的なHTML表は、中身の<th>と<td>の数を増やしたり、順番を入れ替えるだけなのです。
※.見出しの色は変更しています。

table：表全体
tr：行
th：見出し
td：セル

行を増やす

<table>

<tr> <!-- 1行目 -->
<th>見出し</th>
<td>セル</td>
</tr>

<tr> <!-- 2行目 -->
<th>見出し</th>
<td>セル</td>
</tr>

</table>

行を増やすには、<tr>〜</tr>を追加します。

必ず中身（<th>や<td>）の数を合わせましょう。

列を増やす

<table>

<tr>
<th>見出し</th> <!-- 左側 -->
<td>セル</td> <!-- 中央 -->
<td>セル</td> <!-- 右側 -->
</tr>

<tr>
<th>見出し</th>
<td>セル</td>
<td>セル</td>
</tr>

</table>

列を増やすには<tr>〜</tr>の中に<th>または<td>タグを追加します。
ここで覚えて欲しいのは、タグは上から順にブラウザには左から並ぶことです。

画像をいれる

<table>

<tr>
<th><img src="https://kagesai.net/wp-content/uploads/2024/03/test.gif" alt="テスト1" /></th> 
<td>セル</td> 
<td>セル</td> 
</tr>

<tr>
<th>見出し</th>
<td>セル</td>
<td><img src="https://kagesai.net/wp-content/uploads/2024/03/test2.gif" alt="テスト2" /></td>
</tr>

</table>

	セル	セル
見出し	セル

imgタグを使えば、<th>または<td>タグの中に画像を入れることもできます。
挿入する位置に注意しましょう。

ボタンおよびリンクを入れる

<table>

<tr>
<th>見出し</th> 
<td>セル</td> 
<td>セル</td> 
</tr>

<tr>
<th>見出し</th>
<td>セル</td>
<td><a class="btn" href="#">ボタンサンプル</a></td>
</tr>

</table>

aタグを使えば、<th>または<td>タグの中にボタンやテキストリンクを入れることもできます。
挿入する位置に注意しましょう。

ボタンのデザインはCSSで指定する必要があります。

セルを横につなげる

<table>

<tr>
<th>見出し</th> 
<td  colspan="2">ここを繋げています</td> 
<!-- 本来ここにあるセルを消している -->
</tr>

<tr>
<th>見出し</th>
<td>セル</td>
<td>セル</td>
</tr>

</table>

セル同士を”横”に繋げるときは、 colspanを使います。
値は繋げる数を指定するものです、5〜6行目に注目してください。

行を増やすの解説で、tableタグの基本は中身の数を合わせると言いましたが、繋げる場合は本来そこにあるセルを削除する必要があります。
上手く表示されないと思ったら、セルの数を確認してみてください。

セルを縦につなげる

<table>

<tr>
<th>見出し</th> 
<td>セル</td> 
<td rowspan="2">ここを繋げています</td>
</tr>

<tr>
<th>見出し</th>
<td>セル</td>
<!-- 本来ここにあるセルを消している -->
</tr>

</table>

セル同士を”縦”に繋げるときは、 rowspanを使います。
仕組みは横に繋げるときと同じですが、6行目と12行目を確認してみましょう。

縦に繋げる場合は、行(<tr>)を跨またぎますので、セルを削除する場所が異なります。

見出し(th)タグの基本4パターン

見出し(<th>)タグは行(<tr>)の中ならどこにでも設置できますが、以下の4つのパターンを覚えておけば、大抵の表には対応できるはずです。

左側に見出し

<table>

<tr>
<th>メーカー</th> 
<td>Apple</td> 
</tr>

<tr>
<th>モデル</th>
<td>MacBook Air M3</td>
</tr>

<tr>
<th>特徴</th> 
<td>M2チップまでは外部ディスプレイ1台対応でした。<br>M3からクラムシェルモード限定なら、2台対応になります。</td> 
</tr>

</table>

左側見出しは、セルの中身が長くなるときに適しています。

行(<tr>)の中身を見出し(<th>)→セル(<td>)の順にするのがコツです。

上側に見出し

<table>

<tr>
<th>メーカー</th> 
<th>ブランド</th>
<th>モデル</th>
</tr>

<tr>
<td>Apple</td>
<td>Mac</td>
<td>MacBook Air</td>
</tr>

</table>

上側見出しは、2列以上の表に適しています。
スマホ閲覧も考慮すると、4列以上は横スクロール指定必須かと思います。

一番上の行(<tr>)の中身をすべて見出し(<th>)にするのがコツです。

左と上に見出し

<table>

<tr>
<th>モデル</th>
<th>発売日</th>
</tr>

<tr>
<th>MacBook Air M3</th>
<td>2024年3月8日</td>
</tr>

<tr>
<th>MacBook Pro M3</th>
<td>2023年11月7日</td>
</tr>

</table>

左と上に見出しは、左側の内容も強調したいときに適しています。
使う機会はすくないと思いますが、見出しタグ(<th>)は前後左右どこにでも指定できる例ですね。

一番上の行(<tr>)の中身をすべて見出し(<th>)にする。
2行目(<tr>)の中身から、見出し(<th>)→セル(<td>)の順にするのがコツです。

上と中央に見出し

<table>

<tr>
<th>MacBook Air M3</th> 
<th>比較</th>
<th>MacBook Pro M3</th>
</tr>

<tr>
<td>164,800円(税込)〜</td>
<th>価格</th>
<td>248,800円(税込)〜</td>
</tr>

<tr>
<td>13.6/15.3インチ</td>
<th>サイズ</th>
<td>14.2インチ</td>
</tr>

</table>

上と中央見出しは、2つの比較表に適しています。
テキストは中央にすると良いでしょう。

一番上の行(<tr>)の中身はすべて見出し(<th>)にします。
2行目(<tr>)の中身から、セル(<td>)→見出し(<th>)→セル(<td>)の順にするのがコツです。

その他のオプションタグや属性は不要

• <thead>
• <tbody>
• <tfoot>
• <caption>
• <colgroup>
• その他属性など

一応tableタグでは、上記のタグや属性も使えます。
ただし、複雑になるだけですので、基本の4つだけ覚えておけば問題ありません。

カゲオ

興味のある方は調べてみてね

テーブル表のCSS基礎編

WordPress利用者は、ネットに転がっているテーブル表デザインをコピペしても上手くいかない場合が多いのではないでしょうか。

おそらく、使っているテーマのテーブル表に対するCSSが競合してしまっているためだと思われます。

そのため、当記事ではイチから指定するのではなく、どのテーマでも使えるようなCSSカスタマイズだけを解説しました。

CSSを書く場所

基本的に外観→テーマファイルエディタ→style.cssに書きましょう。
ここに書けば、すべてのtableタグに反映されます。

特定の記事のテーブルだけデザインを変える場合。
投稿画面で”/カスタム“と入力し、カスタムHTMLブロックを呼び出しましょう。
その中に<style>タグを使って書きます。

<style>
table{
この中にCSSを指定する。
}
</style>

これでその記事だけ反映されます。

CSSが効かない場合

!important;(優先)を指定してみてください。
例：color:#fff!important;

HTMLで個別にclassを指定する方法

<table class="test1"><!-- テーブル全体に指定 -->

<tr>
<th class="test2">この見出しだけ指定</th> 
<th>ブランド</th>
<th>モデル</th>
</tr>

<tr>
<td>Apple</td>
<td class="test3">このセルだけ指定</td>
<td>MacBook Air</td>
</tr>

</table>

このようにそれぞれのタグにclass名を指定することもできます。
先ほどの特定の記事だけ反映させる方法と合わせて使うと良いですね。

HTMLで書くメリットは、class名をどのタグにも指定できるため、カスタマイズ性が高いことです。

tableブロックにclassを指定する方法

投稿画面で①”/テーブル“と入力し、テーブルブロックを呼び出しましょう。
ブロックの上で左クリック、右サイドバーの②高度な設定を展開します。
追加CSSクラスに③任意のclass名を書いてください。

テーブルブロックのclass指定は、tableタグ＝全体のみ対応しています。
HTML直書きのように、見出し(th)やセル(td)にclassを指定することはできません。

作ったテーブルブロックをすぐ呼び出せるようにする

ここでは当サイトテーマSWELLを前提に解説します。
テーマにより管理画面サイドバー名称が異なったり、使い方に若干の違いはあります。

①サイドバーの「パターン」をクリック
②「新規パターンを追加」をクリック

③同期を「OFF」にする
④「生成」をクリック

同期はあとから変更できないため、必ずOFFにしてください。

①タイトル：ショートコードで呼び出す際の名称
②良く使いそうなテーブル表のテンプレートを作成してください。
③公開をクリック。

投稿画面で”/比較“と入力し、先ほど作成した比較表ブロックを選択すると一発で呼び出せます。

テーブル表のCSSデザインマニュアル

線の種類・太さ・色を変える

table th,table td,table tr{
  border:0!important;
}
table th,table td{
  border:dashed 2px #000!important;	
}

一旦テーブルに指定されている枠線をリセットしましょう。
その後、新たにborder属性を指定します。
線の種類は、以下で詳しく解説しました。

あわせて読みたい

border線の種類別｜HTML&CSSサンプル21選

テーブル内テキストをど真ん中にする

table{
  text-align:center!important;
  vertical-align:middle!important;
}

左右の指定だけだと縦位置がズレるため、上下も真ん中にするのを忘れずに。

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

table{
  table-layout:fixed;
}

見出し(th)の背景とフォントカラーを変更する

table th {
  background:#3d79d5!important;	
  color:#fff!important;
}

見出し(th)以外の色を指定する

table th {
  background:#3d79d5!important;	
  color:#fff!important;
}
table td {
 background:#ffead6;
}

colorを指定すれば、テキストカラーも変更できます。

見出し以外の行(tr)をツートンカラーにする

table th {
  background:#3d79d5!important;	
  color:#fff!important;
}

/* 偶数行の背景カラー */
table tr:nth-child(even){
  background:#ffead6;
}

/* 奇数行の背景カラー */
table tr:nth-child(odd){
  background:#d6ffea;
}

見出しカラーは優先指定しているため、その下の行からカウントされます。
colorを指定すれば、テキストカラーも変更できます。

特定の行(tr)だけ色を付ける

table tr:nth-child(3){
  background:#d6ffea;
} 

()内の値が行数の指定です。
特定の場所だけ目立たせたいときに有効です。
colorを指定すれば、テキストカラーも変更できます。

見出しを改行させない

table th {
  white-space:nowrap;
}

横にスクロールさせる

table{
   white-space: nowrap;
   overflow-x: auto;
} 
table::before {
   font-size: 13px;
   content: "横にスクロールできます";
   position: sticky;
   left: 0;
}

Safariブラウザのみ、スクロールバーが非表示になる仕様のため、横にスクロールできることを示唆してあげると親切ですね。

横スクロールの1列目だけ固定する

table{
  white-space: nowrap;
  overflow-x: auto;
}

table::before {
   font-size: 13px;
   content: "縦にスクロールできます";
   position: sticky;
   left: 0;
}

table th:first-child,table td:first-child{
  position: sticky ;
  left: 0;
  z-index:3;
}

table td:first-child{
   background:#fff;
}

11行目のセル(td)の背景カラーを指定しないと、他の要素と重なってしまうため注意。

見出しを縦に追従させる

<table class="vertical-scroll">

<tr>
<th>見出しを</th> 
<th>固定して</th>
<th>追従させる</th>
</tr>

<tr>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>
・
・
・
</table>

縦の追従は、1行目のtableタグにclass指定しないと上手くいきません。

.vertical-scroll{
  overflow-y: auto;
  max-height: 250px;
}

.vertical-scroll::before {
  font-size: 13px;
  content: "縦にスクロールできます";
}

.vertical-scroll th{
  position: sticky;
  top: 0;
  z-index:2;
  border:1px;
}

左見出しをスマホだけ上に並べる

@media(max-width:500px) {
 table th,table td,table tr{
   display:block;		
   width:100%;	
   border:none!important;
}
 table {
   border: solid 2px #eee!important;
}
 table th {
   text-align:center;	
}
}

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

見出し	見出し	見出し
サンプル	画像サイズを50pxに指定	サンプル
サンプル		サンプル

table img{
  width:50px!important;
}

ここまでのカスタマイズはSWELLなら選ぶだけで可能

実は当サイトテーマSWELLのテーブルブロックは、非常に優秀で、ここまで解説したCSSを、色を含めサイドバーから選ぶだけで指定できます。
また4パターンのデザインやボタン、アイコンも最初から用意されています。

シンプル	デザイン

カゲオ

以前使っていたSANGOから1ヶ月以上かけて、テーマを乗り換えたくらいおすすめ

→詳細はこちら

テーブルCSSマニアックカスタム

特定のセル(th・td)だけ色を変える

<table>

<tr>
<th>見出し</th> 
<th>見出し</th>
<th class="header-color">ここの色を変える</th>
</tr>

<tr>
<td class="cell-collar">ここの色を変える</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

</table>

.header-color{
 background:#add6ff!important;
}

.cell-collar{
background:#ffffad; 
}

各タグにclassを指定すれば可能です。
テーブルブロックでもできなくはないですが、非常に面倒なので、この場合はHTMLで書いちゃったほうが楽ですね。

マウスを乗せたとき行(tr)の色を変える

table th{
background:#e44141!important;
}

table tr:hover{
background:#f1f1f1;
} 

見出しの色は変わらないように、優先!important;指定しましょう。

結論：テーブルタグは使いこなせばコンバージョン率を上げられる

以上、HTMLテーブルの基礎とCSSの調整方法を解説しました。

ブロックエディタ全盛時代、HTMLを書く必要はほとんどなくなりました。
しかしテーブル表は、使いこなすとコンバージョン率に直結する数少ないタグです。

特に比較表は作り方次第で、めちゃくちゃクリック率が変わります。
WEBサイトを使ったビジネスをしているなら、覚えておいて損はないでしょう。

以下の問い合わせフォームもテーブルタグで作成しています。

あわせて読みたい

Contact Form 7をプロ級デザインにカスタマイズする方法