カテゴリ一覧から記事を探す

WordPressで表(テーブル)を作る方法【レスポンシブ対応】

WordPressで表(テーブル)を作る方法【レスポンシブ対応】

WordPressで表を挿入したい!

プラグインなしで自分の思った通りの表を作りたい。

そんな方のために、今回の記事では

  • 表(テーブル)の基本的な作り方
  • 表のデザインの変更方法(デザイン例も)
  • 表に斜線を引く方法
  • 表のセルを繋げる方法
  • レスポンシブ対応の表の作り方

まで、表に関するあれこれを解説していきます。

1.HTMLの表(table)の作り方

プラグインを使用しないので、HTMLを使用して作っていく方法を紹介します。

表は、色々なタグを組み合わせて作成していきます。

表に関するそれぞれのタグの意味

表は、以下のような構成で成り立っています。

表に関するそれぞれのタグの意味

詳しく説明します。

表に関するタグの意味

  1. table : 表全体を表します。
  2. tr : Table Rowの略で、行を表します。
  3. th : Table Headerの略で、見出しを表します。
  4. td : Table Dataの略で、表の中身のセルを表します。

多くて嫌ですが、どういう意味のタグかを知っておくと楽です。

表の基本的な書き方

HTMLで、以下の画像のような基本的な表を書く方法をまずは紹介します!

基本的な表

tabletrthtdを駆使しつつ、HTMLを書いていきます。

HTML
<table>
  <tr>
    <th>商品</th><th>値段</th>
  </tr>
  <tr>
    <td>りんご</td><td>120円</td>
  </tr>
  <tr>
    <td>バナナ</td><td>100円</td>
  </tr>
</table>

また、CSSは以下の通りです。枠線に関する設定です。

CSS
table, th, td{
  border: 1px solid #000;
}

WordPress内で記事内に表を追加したいのであれば、HTMLはテキスト編集モードでそのまま貼り付け。

CSSについては、style.cssに貼り付ければOKです。

編集する箇所
外観
テーマエディター
style.css

今後説明するすべての表について、ここで説明した場所にコピペすれば表を挿入できます。

とはいえ、その時その時で表の構成は変化するものです。

そのため、HTMLにstyle="..."を使用して直接CSSを指定する方法もアリです。

詳しい使い方は、以下の記事を参考にしてみてください。

2.表の列数・行数を増やしたいとき

表の列数・行数を増やしたいと思った場合は、タグの数を変化させればOK

例として、以下のような4×3の表の作り方を説明します。

表の列数・行数を増やす
HTMLは以下のようになります。(CSSについては、見出し1と同じです)

HTML
<table>
  <tr>
    <th>商品</th><th>値段</th><th>味</th><th>備考</th>
  </tr>
  <tr>
    <td>りんご</td><td>120円</td><td>甘い</td><td>青森県産</td>
  </tr>
  <tr>
    <td>バナナ</td><td>100円</td><td>あま~い</td><td>フィリピン産</td>
  </tr>
    <tr>
    <td>いちご</td><td>500円</td><td>甘酸っぱい</td><td>栃木県産</td>
  </tr>
</table>

4列なので、thおよびtdは4つ。
3行なので、<tr>~</tr>の部分が3つあるということですね。

これで、基本的な表の骨組みは自由に作れます。

次に、デザインを整えていく方法について解説していきます。

3.表のデザインをおしゃれにする

このままでは見にくい表ですので、表のデザインを整えていく方法について説明します。

表の余白の設定

表のセルと、線の間がキツイので、余白をとって以下のような表にしましょう。

表の余白を設定

HTMLは関係ないので載せません(見出し1と同じです)

CSSで、以下のように設定することで余白を取ることができます。

CSS
th{
  padding: 5px 7px;/*見出しに関する余白*/
}

td{
  padding: 3px 5px;/*その他のセルに関する余白*/
}

padding: 上下の余白 左右の余白;という書き方になっています。

これで多少は見やすくなりました。

表を1重線にする

ここまでの表に対して違和感を覚えた人もいるはず。
表はやはり、1重線が一般的ですよね。

表を1重線にする

このような表にするためには、以下のCSSを追記します。

CSS
table{
  border-collapse: collapse;
}

border-collapseにて、線の間に隙間を作るかどうかを決めています。

今回の場合は、隙間をつくらない=1重線、ということですね。

見出しの文字色や背景色を変更する

見出しについては、文字色や背景色がカラフルな方が見やすいものです。

見出しの色や背景色を変化させた表

以下のCSSを追記することで、見出し、つまりthに対して背景色や色を変更することが可能です。

CSS
th{
  color: #fff;/*文字の色*/
  background-color: #FFC107;/*背景色*/
}

基本的に表を作るのであれば、余白、1重線、見出しの色の変化をしておけば見やすい表になるでしょう。

セルの中の文字を中央寄せする

表を作るうえで、文字の長さによってはバランスが悪くなることがあります。

大抵、文字が中央に寄っていないせいです。

文字を中央寄せして、以下のような見やすい表にしましょう。

以下のCSSを追記することで対応できます。

CSS
td{
  text-align: center;
}

セルの文字の長さが極端に違うとバランスが崩れるので、そういった場合は注意しましょう。

おしゃれな表のデザイン例

ここまで色々な表を紹介してきました。
とはいえ、見本が欲しいものです。

ということで、2つおしゃれな表を用意しました。
これを参考にしつつ、自分で色を変更したり、中身を変えたりすれば大抵対応できそうです。

セルに影を付けて立体的にし、見出しの部分の角を丸くしました。

影についての詳しい説明は、前回の記事を参考にしてください!

以下のCSSのみをそのままコピペして使えば、同じようなデザインになります。

CSS
table{
  border-collapse: collapse;
}

table th:first-child{
  border-radius: 5px 0 0 0;
}

table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: none;
}

table th{
  color: #fff;
  border-right: 1px solid #fff;
  background-color: #FF9800;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3);
  padding: 7px 7px;
}

table td{
  text-align: center;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  padding: 7px 3px;
}

table td:last-child{
  border-right: 1px solid #aaa;
}

おしゃれな表の見本その2では、少し特殊な表を作成しました。

おしゃれな表の見本2

これはHTMLが多少異なるため、HTMLから書いていきます。

HTML
<table>
  <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>
  <tr>
    <th>見出し</th><td>データ</td><td>データ</td><td>データ</td>
  </tr>
  <tr>
    <th>見出し</th><td>データ</td><td>データ</td><td>データ</td>
  </tr>
</table>

見出しであるthが各行の先頭に来ています。

そして、以下がCSSになります。

CSS
th{
  background-color: #4CAF50;
  color: #fff;
}

table th,table td{
  padding: 3px 7px;
  text-align: center;
}

table tr:nth-child(odd){
  background-color: #F1F8E9;
}

最後にあるtable tr:nth-cild(odd)についてですが、oddの部分で奇数行について(今回の場合は背景色を)指定するという風になっています。

table tr:nth-child(even)とすることで、偶数行にすることが可能です。

4.表に斜線を引く

あまり必要になる機会はないのかもしれませんが、表に斜線を引く方法についても説明しておきます。

表に斜線を引く

このような点数表の左上であったり、総当たりの表を作るのには必要ですね。

HTMLは以下のようになります。

HTML
<table>
  <tr>
    <th><!--ここがempty--></th><th>Aさん</th><th>Bさん</th>
  </tr>
  <tr>
    <th>1回目</th><td>4点</td><td>5点</td>
  </tr>
  <tr>
    <th>2回目</th><td>3点</td><td>2点</td>
  </tr>
</table>

必要なのは、空の見出しです。間になにも挟まずに、<th></th>とすればOK

CSSで、斜線に関係する部分だけに注目すると、以下の通りです。

CSS
th:empty{
  background-image: linear-gradient(to top right,
                        transparent, transparent 49%,
                        black 49%, black 51%,
                        transparent 51%, transparent);
}

見出しの空の部分に対して、linear-gradientを適用している感じです。

liner-gradientについて

仕組みが気にならない人は飛ばして良いです。

先ほどのCSSでは、to top rightの部分で「左上から右下にかけてグラデーションをかける」という意味を指定し、そのグラデーションの内容は「49%透明、49%~51%は黒色、51%~は透明」という風にして、疑似的に斜線に見せているだけです。

5.複数セルの結合をする

複数セルを結合したい場合もあるかと思います。

複数セルが結合されたHTMLがどのようになるか、見てみましょう。

rowspanで縦方向に繋げる

縦方向に繋げた表

600円の部分が繋がっています。

このような表は、td rowspan="2"と書くことで実現可能です。

HTML
<table>
  <tr>
    <th>果物</th><th>値段</th><th>備考</th>
  </tr>
  <tr>
    <td>イチゴ</td><td rowspan="2">600円</td><td>税込み価格</td>
  </tr>
  <tr>
    <td>パイナップル</td><!--tdは消す--><td>税抜き価格</td>
  </tr>
  <tr>
    <td>バナナ</td><td>100円</td><td>限定大特価</td>
  </tr>
</table>

colspanで横方向につなげる

逆に、横方向につなげる方法についても解説します。

横方向につなげた表

見出しの部分の幅が広くなっています。

広くしたい部分、今回ですとthに対してcolspan="2"を指定することで実現可能です。

HTML
<table>
  <tr>
    <th>果物</th><th colspan="2">値段</th><!--thは消す-->
  </tr>
  <tr>
    <td>イチゴ</td><td>648円</td><td>税込み価格</td>
  </tr>
  <tr>
    <td>パイナップル</td><td>1000円</td><td>税抜き価格</td>
  </tr>
  <tr>
    <td>バナナ</td><td>100円</td><td>限定大特価</td>
  </tr>
</table>

6.表をレスポンシブ対応にする

最後に、表をレスポンシブ対応にする方法について説明します。

小さめの表について

サイズが小さめの表については、スマホ表示でも崩れることがないため、表の幅をできるだけ大きくするだけで大丈夫です。

できるだけ大きく・・・つまり、100%にすれば最大の大きさとなりますね。

CSS
table{
  width: 100%;
}

このようにすれば、常に最大の大きさで表示されますので安心です。

表をスクロール対応させる方法

スマホ表示でも崩れることがない小さい表ならばいいのですが、大きな表となるとスクロールさせないと綺麗に見せることはできません。

イメージとしては、以下の通りです。

スクロール対応した表

これなら、どんなに小さい画面でも崩れることなく表を見せることができます!

そんな表にする方法はかなり簡単で、以下のHTMLのようにするだけ。

HTML
<div style="overflow-x: auto; white-space: nowrap;">
  /*ここに表のHTMLを入れ込む*/
</div>

overflow-x: auto;ではみ出した部分のx座標についてスクロールバーを表示させ(正しくはユーザーエージェントに依存します)、white-space: nowrap;にて、表の中の文字を自動改行しないように設定するdivタグで囲むだけです。

7.まとめ

今回は、表に関して多くのことを書きました。

まとめておきます。

  • HTMLで作る基本的な表
  • 表の列数・行数の調節方法
  • 表の余白設定・線の設定・見出しの色・文字の中央寄せ・表のデザイン例
  • 表に斜線を引く方法
  • 複数セルの結合方法
  • 表をレスポンシブ対応させる方法

これで表に関しては自由自在にいじれるはずです。
表を使って分かりやすく伝えられるようにしましょう!

次のステップ:opacityで透明にする方法を学ぶ