WordPressでテーブルを利用する方法(HTML+CSS)

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。サイトを運営していると、「表を使って何かを説明したい」とき、けっこうありますよね。

WordPressでは「TinyMCE Advanced」プラグインなんかを使うことで、投稿ページにテーブルを挿入することができます。

でも、テーブルを挿入するというだけでわざわざプラグインを使うのは、ちょっと気が引けます(これは完全に私の気分ですが)。

テーブルは「HTMLのtableタグ」と「CSS」でサクッと作れることですし、HTMLとCSSの勉強にもなるので、興味がある人はぜひチャレンジしてみてください。

まずは、tableの構造についてかるく説明していきます。どうぞ。

スポンサーリンク

table周りのタグについて説明

HTMLでテーブルを作りたい場合は、主に次のタグを使います。

ここら辺を軽く頭に入れておくと良いです。これらを組み合わせることで、テーブルを作ることができます。

私は「よこ」と「たて」向きのテーブルを、それぞれ次のように作成してWordPressサイトで利用しています。

まず初めに、よこ向きのテーブルの作成方法の例を見てみましょう。

よこ向きのテーブルを作成する

次のように、HTMLでテーブルの構造を決めていきます。

<table class="wp-table-yoko">
  <thead>
    <tr>
      <th>ユーザー数</th>
      <th>PV数</th>
      <th>ページ/セッション</th>
      <th>平均セッション時間</th>
      <th>直帰率</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>18,270</td>
      <td>25,553</td>
      <td>1.22</td>
      <td>00:00:53</td>
      <td>87.52%</td>
    </tr>
  </tbody>
</table>

「class=”wp-table-yoko”」はCSSでレイアウトするためにつけています。

ぱっと見、HTMLがたてに並んでいるので「たてに並ぶのかな？」と思うかもしれません。trタグが行を表していることに注目すると、thとtdがよこに並んでいることが分かります。

このHTMLコードを投稿ページに貼り付けるだけで、テーブルが利用できます。貼り付け時はテキストモードでおこないましょう。画像は一例です。

では、HTMLコードに対してCSSを適応させていきましょう。使っているテーマの.cssファイルに下記コードを記述します。私のテーマでは「style.css」がそれにあたります。

/* よこ向きテーブル */
.post table {
  border: none;
}
.wp-table-yoko {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 15px;
  table-layout: fixed;
}
.wp-table-yoko th {
  background-color: #eee;
}
.wp-table-yoko td {
  background-color: #fff;  
}
.wp-table-yoko td {
  text-align: center;
}
.wp-table-yoko th, .wp-table-yoko td{
  padding: 7px; border: 1px solid #ddd;
}
.wp-table-yoko th:first-child {
  border-radius: 6px 0 0 0;
}
.wp-table-yoko th:last-child {
  border-radius: 0 6px 0 0;
}
.wp-table-yoko tr:last-child td:first-child{
  border-radius: 0 0 0 6px;
}
.wp-table-yoko tr:last-child td:last-child{
  border-radius: 0 0 6px 0;
}

頭で定義している「.post table { border: none; }」では、私が使っているWordPressテーマ(Stinger5)の、デフォルトで指定されているtableのボーダー線を無効にしています。

テーマによっては、この記述がないと余計なボーダー線が入ります。あってもレイアウトが崩れることはないので、どのテーマでもそのまま同じように書いといてOKです。

あとは、「first-child」とか「last-child」を使って丸角にしています。ここはもう少し綺麗な書き方にしたかったなぁ(´･ω･`)

「.wp-table-yoko th { background-color: #eee; }」の#eeeの部分を変えれば、見出しの色を変えることができます。よく分からない方は「カラーコード」でぐぐってみましょう。

よこ向きテーブルのレイアウト確認

投稿後、よこ向きテーブルのレイアウトを確認してみましょう。こんな感じになりました。

スマートフォンでも確認してみます。横に広くレイアウトされているため、スマートフォンでは少し不格好ですね。

スマートフォンを意識するなら、たてに並んだテーブルの方がいいかもしれません。

ということで、次はたて向きテーブルの作成方法を見てみましょう。

たて向きのテーブルを作成する

たて向きテーブルのHTMLコードは、次のとおりです。

<table class="wp-table-tate">
  <tbody>
    <tr>
      <th>ユーザー数</th>
      <td>120</td>
    </tr>
    <tr>
      <th>PV数</th>
      <td>1,200</td>
    </tr>
    <tr>
      <th>ページ/セッション</th>
      <td>4.60</td>
    </tr>
    <tr>
      <th>平均セッション時間</th>
      <td>00:09:46</td>
    </tr>
    <tr>
      <th>直帰率</th>
      <td>49.81%</td>
    </tr>
  </tbody>
</table>

「class=”wp-table-tate”」となっていることに注意してください。丸角の指定があるので、よこ向きテーブルのレイアウトとは微妙にCSSの指定方法が違ってきます。

たて向きテーブルのCSSは次のとおりです。

/* たて向きテーブル */
.post table {
  border: none;
}
.wp-table-tate {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 15px;
  table-layout: fixed;
}
.wp-table-tate th {
  background-color: #eee;
}
.wp-table-tate td {
  background-color: #fff;
}
.wp-table-tate td {
  text-align: center;
}
.wp-table-tate th, .wp-table-tate td {
  padding: 7px; border: 1px solid #ddd;
}
.wp-table-tate tr:first-child th {
  border-radius: 6px 0 0 0;
}
.wp-table-tate tr:first-child td {
  border-radius: 0 6px 0 0;
}
.wp-table-tate tr:last-child th {
  border-radius: 0 0 0 6px;
}
.wp-table-tate tr:last-child td {
  border-radius: 0 0 6px 0;
}

投稿して、たて向きのテーブルを確認してみましょう。

たて向きテーブルのレイアウト確認

PCで確認すると、次のように表示されました。

スマートフォンの場合はこちら。

表示する見出しの種類が多い場合は、たて向きのテーブルの方がだいぶ見やすいですね。スマートフォンを意識するならたて向きテーブルの方がなにかと便利です。

個人的に、スマートフォンでの見出し文字の大きさがすこし気になったので、.cssの下の方に次のコードを入れて調整しました。お好みで指定してみましょう。

@media only screen and (max-width: 480px) {
  .wp-table-yoko th, .wp-table-tate th {
    font-size: 80%;
  }
}

テーブルレイアウトの方法は、まだまだたくさんの手法があります。ですが、奇抜なテーブルをいきなり作るよりは、今回のテーブルのような基本的な作りのテーブルを、まず初めに作ってみるのが良いかと思います。

これをベースにいろいろと応用も効くと思いますので、興味があるかたは「html テーブル レイアウト」なんかで調べてみてはどうでしょう。

WordPressで使うテーブルの作成方法の説明は以上です。お疲れ様でした。

まとめ

今回はプラグインを使わずに、シンプルなテーブルを作成する方法を紹介しました。

HTMLタグはいちいち打つのがめんどうなので、AddQuickTagを使ってテンプレートを挿入するように設定しておくと楽ちんです。ぜひ、AddQuickTagを活用して便利にテーブルを作ってみましょう。

僕の実力不足ということもありますが、おそらくたてとよこ向きのレイアウトは同じCSSを使いまわして書けるかと思います。今回は良い方法が思いつきませんでしたので、うまくまとめられそうなら追記します。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

tableってよく使うのに構造がややこしくて分かりづらいですよね。一度作って理解を深めておくと良いですね。お互いにサイト構築頑張りましょう。

Web開発のお仕事を募集しています