vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

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

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

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

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

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

スポンサーリンク

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

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

  • <table></table>
  • テーブルを作成するタグ。この中にテーブルの構造を書いていく。

  • <thead></thead>
  • セルの見出しをまとめるタグ。tbodyと構造を分けることで、表が長くなったときにtbodyだけをスクロールさせることができたり。なくてもよい。

  • <tbody></tbody>
  • セルのメイン部をまとめるタグ。なくてもよい。

  • <tfoot></tfoot>
  • セルのフッター部をまとめるタグ。なくてもよい。

  • <tr></tr>
  • セルの行を表すタグ。

  • <th></th>
  • セルの見出しを表すタグ。

  • <td></td>
  • セルのデータを表すタグ。

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

私は「よこ」と「たて」向きのテーブルを、それぞれ次のように作成して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コードを投稿ページに貼り付けるだけで、テーブルが利用できます。貼り付け時はテキストモードでおこないましょう。画像は一例です。

wordpress-table

では、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の部分を変えれば、見出しの色を変えることができます。よく分からない方は「カラーコード」でぐぐってみましょう。

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

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

wordpress-table2

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

wordpress-table3

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

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

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

たて向きテーブルの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で確認すると、次のように表示されました。

wordpress-table4

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

wordpress-table5

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

個人的に、スマートフォンでの見出し文字の大きさがすこし気になったので、.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を使いまわして書けるかと思います。今回は良い方法が思いつきませんでしたので、うまくまとめられそうなら追記します。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - WordPress

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

WordPressにGravatarを導入してアバターを設定してみよう!

こんにちは、okutani(@okutani_t)です。WordPressでは、 …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

WordPressにFeedlyを設置しよう!Feedlyボタンの設置方法3つ

こんにちは、okutani(@okutani_t)です。ブログを運営する上で行っ …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

[初心者向け]これだけ読めばOK!WordPress記事投稿の全工程まとめ

こんにちは、okutani(@okutani_t)です。本記事では、WordPr …

ロリポップにWordPress導入&ムームードメインの独自ドメインを設定する

こんにちは、okutani(@okutani_t)です。本記事では、「ロリポップ …

WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

WordPressサイトをGitで管理。Macローカル開発環境編

こんにちは、okutani(@okutani_t)です。みなさんはちゃんと「Wo …

本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期!

こんにちは、okutani(@okutani_t)です。VCCWを使うとWord …

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなん …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。