MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

引用やシェアする際は該当記事または画像のURLを貼っていただければ、ご自由にお使いいただいて構いません。

コンテンツ作成時の参考サイト

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

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

当ページのリンクには広告が含まれています。
HTMLTableタグデザイン

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

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

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

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

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

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

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

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

<th>見出し</th>

<td>セル</td>

</tr> <!-- 行の閉じタグ -->
</table> <!-- 表の外枠閉じタグ -->
見出し(th)セル(td)

基本この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>
見出し(th)1行目→セル(td)
見出し(th)2行目→セル(td)

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

必ず中身(<th><td>)の数を合わせましょう。

列を増やす

<table>

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

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

</table>
見出し(th)1列目↓セル(td)2列目↓セル(td)3列目↓
見出し(th)セル(td)セル(td)

列を増やすには<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>
メーカーApple
モデルMacBook Air M3
特徴M2チップまでは、外部ディスプレイ1台対応でした。
M3からクラムシェルモード限定なら、2台対応になります。

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

行(<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>
メーカーブランドモデル
AppleMacMacBook Air M3

上側見出しは、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>
モデル発売日
MacBook Air M32024年3月8日
MacBook Pro M32023年11月7日

左と上に見出しは、左側の内容も強調したいときに適しています。
使う機会はすくないと思いますが、見出しタグ(<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>
MacBook Air M3比較MacBook Pro M3
164,800円(税込)〜価格248,800円(税込)〜
13.6/15.3インチサイズ14.2インチ

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

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

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

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

カゲオ

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

テーブル表のCSS基礎編

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

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

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

CSSを書く場所

WordPressのstyle.css設定

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

カスタムHTMLブロック CSSの書き方

特定の記事のテーブルだけデザインを変える場合。
投稿画面で”/カスタム“と入力し、カスタム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を指定する方法

WordPressテーブルブロックショートカット

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

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

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

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

WordPress同期パターン

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

WordPress同期パターンステータス設定

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

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

WordPress同期パターンテーブルブロック作成方法

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

WordPress同期パターンテーブルブロック呼び出し方法

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

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

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

線の種類を点線へ変更
太さは2px色は黒に変更
table th,table td,table tr{
  border:0!important;
}
table th,table td{
  border:dashed 2px #000!important;	
}

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

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

テキストが複数行でも中央になる
サンプルサンプル
サンプル
サンプル
サンプル
table{
  text-align:center!important;
  vertical-align:middle!important;
}

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

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

例えばすべて文字数同じ時
均等にすると綺麗に見える
table{
  table-layout:fixed;
}

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

見出しの背景を青フォントカラーを白に変更
サンプルサンプルサンプル
table th {
  background:#3d79d5!important;	
  color:#fff!important;
}

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

見出しカラーは固定
その他のセルの背景色を
1色に指定する
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を指定すれば、テキストカラーも変更できます。

見出しを改行させない

見出しだけApple
改行しないMacBook Air M3
指定をするM2チップまでは、外部ディスプレイ1台対応でした。
M3からクラムシェルモード限定なら、2台対応になります。
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サイトを使ったビジネスをしているなら、覚えておいて損はないでしょう。

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

HTMLTableタグデザイン

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次