スポンサーリンク

【コピペでOK!】HTML と CSS でレスポンシブ対応のテーブルデザイン（表）を作ってみよう！！

便利ツール・サービス

Webサイトでよく見かける、テーブルデザイン。
住所録や金額表など、多くの場面で見やすくわかりやすくしてくれる味方です！

テーブルデザインで表になっていると一目でわかるので、文字がずらずら並んでいるよりユーザビリティがアップします！

レスポンシブは必須デザインですが、縦バージョンの表を作成した時に何度もタイトルとデータがうまく表示されない( ；∀；)と焦ったこともありました。それを踏まえて、今回はHTMLとCSSを使用して作るシンプルなレスポンシブに対応した “テーブルデザイン” をご紹介します！

ワードプレスのテーマには、テーブルデザインが組み込まれているものもありますが、スクラッチで組んだ場合や、テーブルデザインの組み込まれていないワードプレスのテーマを使用する際に参考にしてみてください。

“テーブルデザイン” と “文字だけ” どれだけ違う？？

初めに、”テーブルデザイン” を使用した場合と文字だけで書いた場合の見やすさの違いを見てみましょう。

《テーブルデザイン》

名前猫の種類性別性格
チャッピ三毛猫メスおだやか
ミスティアメリカン
ショートヘア		オス活発
かりんヒマラヤンメスのんびりや

《文字だけ》

チャッピは三毛猫のメスでおだやかな性格です。

ミスティはアメリカンショートヘアのオスで活発です。

かりんはヒマラヤンのメスでのんびりやです。

このように文字だけで表示するより、テーブルデザインを用いて表になっている方が、パッと見てわかりやすくまとめることができます。

“テーブルデザイン” の基本

テーブルデザインを作成するときは、HTMLの<table>タグを利用します。

テーブル参照画像

tableタグ

<table> </table> テーブル全体を囲むタグです。

trタグ

<tr> </tr> で挟まれた部分を横列に指定するタグです。

thタグ

<th> </th> 見出しタイトルを入力するタグです。
<tr>タグの中で使用します。
一般的なブラウザでは、中央寄せの太字で表示されます。
見出しが必要ない場合は、省略できます。

tdタグ

<td> </td> 各項目のデータを入力するタグです。
<tr>タグの中で使用します。
左寄せで表示されます。

“テーブルデザイン” を作ってみよう！

早速、テーブルデザインを作ってみよう！コピペでも使えるよ！

バックカラータイトルのテーブルデザイン（横型）

タイトル１ データ１−１ データ２−１ データ３−１
タイトル２ データ１−２ データ２−２ データ３−３
タイトル３ データ１−３ データ２−３ データ３−３ 
[ HTML ]

<table class="table_1">
  <tr>
    <th>タイトル１</th>
    <td>データ１−１</td>
    <td>データ２−１</td>
    <td>データ３−１</td>
  </tr>
  <tr>
    <th>タイトル２</th>
    <td>データ１−２</td>
    <td>データ２−２</td>
    <td>データ３−３</td>
  </tr>
  <tr>
    <th>タイトル３</th>
    <td>データ１−３</td>
    <td>データ２−３</td>
    <td>データ３−３</td>
  </tr>
</table>
[ CSS ]

.table_1 th {
 border: solid 1px #000;
 background-color: #000080;
 color: #ffffff;
}
.table_1 td {
 border: solid 1px #000;
 background-color: #ffffff;
 color: #000;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .table_1 th, .table_1 td  {
    display: block;
  }
}

<td>タグと<th>タグに display: block; を設定するとレスポンシブ対応で縦型の表になるよ！

参考）レスポンシブデザイン

バックカラータイトルのテーブルデザイン（縦型）

タイトル１ タイトル２ タイトル３
タイトル１ データ１−１ データ２−１ データ３−１
タイトル２ データ１−２ データ２−２ データ３−３
タイトル３ データ１−３ データ２−３ データ３−３ 
[ HTML ]

<table class="table_2">
  <tr>
    <th class="th-pc">タイトル１</th>
    <th class="th-pc">タイトル２</th>
    <th class="th-pc">タイトル３</th>
  </tr>
  <tr>
    <th class="th-sp">タイトル１</th>
    <td>データ１−１</td>
    <td>データ２−１</td>
    <td>データ３−１</td>
  </tr>
  <tr>
    <th class="th-sp">タイトル2</th>
    <td>データ１−２</td>
    <td>データ２−２</td>
    <td>データ３−３</td>
  </tr>
  <tr>
    <th class="th-sp">タイトル3</th>
    <td>データ１−３</td>
    <td>データ２−３</td>
    <td>データ３−３</td>
  </tr>
</table>
[ CSS ]

.table_2 th {
 border: solid 1px #000;
 background-color: #dcdcdc;
 color: #000;
}
.table_2 td {
 border: solid 1px #000;
 background-color: #ffffff;
 color: #000;
}
.th-pc {
 display: none;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .th-pc {
    display: none;
  }
  .th-sp  {
    display: block;
    text-align: center;
  }
   .table_2 td  {
    display: block;
    text-align: center;
  }
}

縦型のテーブルの時は、display: block; だけだと表のタイトルが縦並びになってしまうんだ。パソコン用のタイトルとスマホ用のタイトルを表示切り替えすると、タイトルとデータが綺麗に縦並びになるよ！

ダブルラインタイトルのテーブルデザイン（縦形）

タイトル１ タイトル２ タイトル３
タイトル１ データ１−１ データ２−１ データ３−１
タイトル２ データ１−２ データ２−２ データ３−３
タイトル３ データ１−３ データ２−３ データ３−３ 
[ HTML ]

<table class="table_3">
  <tr>
    <th class="th-pc">タイトル１</th>
    <th class="th-pc">タイトル２</th>
    <th class="th-pc">タイトル３</th>
  </tr>
  <tr>
    <th class="th-sp">タイトル１</th>
    <td>データ１−１</td>
    <td>データ２−１</td>
    <td>データ３−１</td>
  </tr>
  <tr>
    <th class="th-sp">タイトル2</th>
    <td>データ１−２</td>
    <td>データ２−２</td>
    <td>データ３−３</td>
  </tr>
  <tr>
    <th class="th-sp">タイトル3</th>
    <td>データ１−３</td>
    <td>データ２−３</td>
    <td>データ３−３</td>
  </tr>
</table>
[ CSS ]

.table_3 th {
 border: double 5px #000;
 background-color: #ffffff;
 color: #000;
}
.table_3 td {
 border: solid 1px #000;
 background-color: #ffffff;
 color: #000;
}
.th-pc {
 display: none;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .th-pc {
    display: none;
  }
  .th-sp  {
    display: block !important;
    text-align: center;
  }
   .table_3 td  {
    display: block;
    text-align: center;
  }
}

タイトルが2つあるテーブル

タイトル１ タイトル２ タイトル３ タイトル4 タイトル5
サブタイトル1 データ１−１ データ２−１ データ３−１ データ4−１ データ5−１
サブタイトル２ データ１−２ データ２−２ データ３−2 データ4−2 データ5-2
サブタイトル３ データ１−３ データ２−３ データ３−３ データ4−3 データ5-3 
[ HTML ]

<div class="scroll">
  <table class="table_4 scroll">
    <tr>
      <th></th>
      <th>タイトル１</th>
      <th>タイトル２</th>
      <th>タイトル３</th>
      <th>タイトル4</th>
      <th>タイトル5</th>
    </tr>
    <tr>
      <th>サブタイトル1</th>
      <td>データ１−１</td>
      <td>データ２−１</td>
      <td>データ３−１</td>
      <td>データ4−１</td>
      <td>データ5−１</td>
    </tr>
    <tr>
      <th>サブタイトル２</th>
      <td>データ１−２</td>
      <td>データ２−２</td>
      <td>データ３−2</td>
      <td>データ4−2</td>
      <td>データ5-2</td>
    </tr>
    <tr>
      <th>サブタイトル３</th>
      <td>データ１−３</td>
      <td>データ２−３</td>
      <td>データ３−３</td>
      <td>データ4−3</td>
      <td>データ5-3</td>
    </tr>
  </table>
</div>
[ CSS ]

.table_4 th {
 border: solid 1px #000;
 background-color: #b0c4de;
 color: #000;
}
.table_4 td {
 border: solid 1px #000;
 background-color: #ffffff;
 color: #000;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
 .scroll{
    overflow-x : auto;
    white-space: nowrap;
  }
}

レスポンシブの作り方は、overflow-x: auto; を使って、横スクロールする方法もあるよ！

タイトルが2つある場合や縦に表示させるにはボリュームが大きい場合には、この方法も便利だよ！

参考）レスポンシブ　スクロール

バックカラーのタイトルなしテーブルデザイン

データ１−１ データ２−１ データ３−１
データ１−２ データ２−２ データ３−３
データ１−３ データ２−３ データ３−３ 
[ HTML ]

<table class="table_5">
  <tr class="color-1">
    <td>データ１−１</td>
    <td>データ２−１</td>
    <td>データ３−１</td>
  </tr>
  <tr class="color-2">
    <td>データ１−２</td>
    <td>データ２−２</td>
    <td>データ３−３</td>
  </tr>
  <tr class="color-1">
    <td>データ１−３</td>
    <td>データ２−３</td>
    <td>データ３−３</td>
  </tr>
</table>
[ CSS ]

.table_5 td {
 border: none;
 color: #000;
}
.color-1 td {
 background-color: #e0ffff;
}
.color-2 td {
 background-color: #fff0f5;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .table_5 td  {
    display: block;
    text-align: center;
  }
}

<tr>タグにclass名をつけてbackground-colorを指定すると、列ごとに背景色を変えることができるよ！
次は、もっとカラフルにしてみよう！

◯◯◯ ☆☆☆ ◯◯◯ ☆☆☆
☆☆☆ ○◯◯ ☆☆☆ ○◯◯
◯◯◯ ☆☆☆ ◯◯◯ ☆☆☆ 
[ HTML ]

<table class="table_6">
  <tr>
    <td class="color-3">◯◯◯</td>
    <td class="color-4">☆☆☆</td>
    <td class="color-3">◯◯◯</td>
    <td class="color-4">☆☆☆</td>
  </tr>
  <tr>
    <td class="color-4">☆☆☆</td>
    <td class="color-3">○◯◯</td>
    <td class="color-4">☆☆☆</td>
    <td class="color-3">○◯◯</td>
  </tr>
  <tr>
    <td class="color-3">◯◯◯</td>
    <td class="color-4">☆☆☆</td>
    <td class="color-3">◯◯◯</td>
    <td class="color-4">☆☆☆</td>
  </tr>
</table>
[ CSS ]

.table_6 td {
 border: none;
 color: #fff;
 text-align: center;
}
.color-3 {
 background-color: #ffb6c1;
}
.color-4 {
 background-color: #87cefa;
}

<td>タグにclass名をつけてbackground-colorを指定すると、セルを一つずつ背景色を変更できるよ！

セルを結合したテーブルデザイン

タイトル１ タイトル２ タイトル３
タイトル１ データ１−１ データ２−１
タイトル２ データ１−２ データ２−２ データ３−３
タイトル３ データ１−３ データ２−３ データ３−３ 
 [ HTML ]

<table class="table_7">
  <tr>
    <th class="th-pc">タイトル１</th>
    <th class="th-pc">タイトル２</th>
    <th class="th-pc">タイトル３</th>
  </tr>
  <tr>
    <th class="th-sp">タイトル１</th>
    <td>データ１−１</td>
    <td colspan="2">データ２−１</td>
  </tr>
  <tr>
    <th class="th-sp">タイトル２</th>
    <td>データ１−２</td>
    <td>データ２−２</td>
    <td>データ３−３</td>
  </tr>
  <tr>
    <th class="th-sp">タイトル３</th>
    <td>データ１−３</td>
    <td>データ２−３</td>
    <td>データ３−３</td>
  </tr>
</table>
[ CSS ]

.table_7 th {
 border: solid 1px #000;
 background-color: #696969;
 color: #fff;
}
.table_7 td {
 border: solid 1px #000;
 background-color: #ffffff;
 color: #000;
 text-align: center;
}
 .th-sp {
  display: none;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .th-pc {
    display: none;
  }
  .th-sp  {
    display: block;
    text-align: center;
  }
   .table_7 td  {
    display: block;
  }
}

colspan=”数字” で結合するセル数を指定できるよ！

横に結合する時は “colspan” 縦に結合する時は “rowspan” を使ってね！

“テーブルデザイン” に便利なCSSまとめ

  • padding: ◯px;　　→　　<td> / <th> の余白を指定
  • border: 線の種類 太さ カラー;　　→　　枠線を指定
    ※ 種類　solid…実線/ double…二重線/ dashed…波線
  • background-color: #カラーナンバー;　　→　　背景色を指定
  • color: #カラーナンバー;　　→　　フォントカラーを指定
  • width: ◯%;　　→　　幅を指定
    注：<table> を100%に指定し、その中で <th> / <td> を100%になるように振り分ける

“テーブルデザイン” に便利なHTMLまとめ

  • table > tr > th(省略可）> td の順で使用する
  • colspan　　→　　横のセルを結合
  • rowspan　　→　　縦のセルを結合
  • caption　　→　　テーブルの概要を記入できる
    注：<table>タグのすぐ下に<caption>タグとして使用

“テーブルデザイン” に便利なジェネレーター

テーブルデザインを作成するのが大変！時間がない！もっと他の部分に時間をかけたい！そんな時に便利なのが、ジェネレーターです。

ジェネレーターは、ほしいセル数や枠線等を入力すると、簡単にCSSを作成してくれます。

ジェネレーターを使用して時短したり、どんなCSSを使うのか学習として利用したりしてみてください！

https://tabletag.net/ja/
tabletag.net

参照）Table Tag Generator：https://tabletag.net/ja/

テーブルタグ作成ツール［Web便利ツール］ - TAG index
テーブルタグ生成ツール。表を簡単に作成することができます。
www.tagindex.com

参照）Tag index：https://www.tagindex.com/tool/table.html

まとめ

テーブルデザインは、Webサイトを作成する中でかかせないデザインの一つと言ってもいいくらい、たくさんの場面で使われています！

今回は、基本的なテーブルデザイン(表) の使い方をまとめてみました。
私は、表作成だけではなく横並びのデザインを作成する時に枠線をなくして使用するという使い方をすることもあります。

テーブルデザインに困ったときの参考にしていただけたら幸いです♫

【コピペで作れるボタンデザイン12選】HTMLとCSSでボタンデザインを作ってみよう！
Webサイトやホームページ内でクリックしてほしいところが一目瞭然でわかる、ボタンデザイン。 ボタンデザインを用いることでユーザビリティーも格段にアップします！使いやすいボタンデザインを12個厳選してご紹介します。
blog.frankul.net
2022.10.07
HTMLとCSSで画像付きのチャット風吹き出しを作ってみよう！
HTMLとCSSで作る吹き出しデザインをご紹介します。画像に合わせて吹き出しを変えてれば、メッセージが伝わりやすくなりますよ！
blog.frankul.net
2022.03.30
この記事を書いた人
プロフィール
ERIKO

☆ FrankuLメンバー。（https://frankul.net/crew/koyama/）　
☆ 楽しいことが大好きなWebクリエイターです。
制作を通してたくさんの人のHAPPYが溢れるお手伝いができることが幸せです♫
☆ 開発・コーダー・ライター・デザインといろいろやってます。

フォローはこちらから
便利ツール・サービス
CSSHTMLお役立ちツール
よかったらシェアしてね
フォローはこちらから
ERIKO
タイトルとURLをコピーしました