ブログにテーブル（表）を設置する方法と使いこなすためのテクニック

 

 

ワードプレスブログにテーブル(表)を設置する方法と、その便利な使い方について解説します。

１．テーブルってなに？使う意味は？

一般的にテーブルというと机のことを言いますが、

ワードプレスでいうテーブルとは「表」のことを指します。

 

ブログやサイトなどでよく使われているこんなやつの事です。

テーブルの見本	テーブルの見本	テーブルの見本	テーブルの見本
テーブルの見本	テーブルの見本	テーブルの見本	テーブルの見本

きっとあなたもどこかで見たことあるんじゃないでしょうか。

 

なぜこれがよく使われているのかというと

やはり、情報が圧倒的に見やすくなるということです。

 

表を使ったものとそうでないもの、試しに見比べてみましょう。

例：レンタルサーバープラン

プランAの場合、1ヶ月契約は720円で3ヶ月だと680円、6ヶ月では640円。

プランBの場合、1ヶ月契約は1320円で3ヶ月1240円、6ヶ月では1160円。

プランCの場合、1ヶ月契約は2220円で3ヶ月2080円、6ヶ月では1940円です。

 

これをテーブルで表示してみると、、、

	1ヶ月契約	3ヶ月契約	6ヶ月契約
プランA	720円/月	680円/月	640円/月
プランB	1320円/月	1240円/月	1160円/月
プランC	2220円/月	2080円/月	1940円/月

 

情報が整理されて見やすくなっているし、プランを比較するのも一目瞭然ですよね。

これがブログにテーブルを使用するメリットです。

 

２．テーブルの使い方（基本編）

ブログにテーブルを設置する方法は以下の2種類があります。

それぞれのやり方を解説します。

 

表全体	テーブル
テーブルの1つの枠	セル
横の列	行
縦の列	列

 

2-1 HTMLタグ でテーブルを設置する方法

HTMLタグ で基本的なテーブルを表示する方法です。

<table>
  <tr>
     <th>見出し</th>
     <th>見出し</th>
     <th>見出し</th>
  </tr>
  <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     <td>テキスト</td>
  </tr>
  <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     <td>テキスト</td>
  </tr>
</table>

 

テキストモードでこのタグを入力すると、以下のようにテーブルが表示されます。

 

以下がそれぞれのタグの意味です。

<table></table>

テーブルを作るためのタグです。

<tr></tr>（table record）

横一列のデータをまとめるタグです。

<td></td>（table data）

表の値を意味するタグです。

<th></th>（table theme）

表の見出しを意味するタグです。

 

例えば、このタグを AddQuicktag プラグインに登録しておくことで

手軽にテーブルを設置することもできます。

参考リンクAddQuicktag プラグインの設定方法と使い方

 

 

2-2 プラグインでテーブルを設置する方法

HTMLタグを使った基本的なテーブルの設置方法を解説しましたが

毎回セルの数は変わるし、その度にHTMLタグを入力するのはちょっと面倒ですよね。

 

そこで、わー研。がおすすめするのが、プラグインを使ってテーブルを設置する方法。

 

ここでは TinyMCE Advanced プラグインを使った設置方法を解説するので

インストールがまだの方は、以下のページを参照して先にインストールしておいてください。

参考リンクTinyMCE Advanced の設定方法と使い方

 

TinyMCE Advanced を導入すると、ワードプレスの投稿編集画面に、テーブルを設置するための機能が追加されます。

 

これをクリックすることで、自由なサイズのテーブルを簡単に設置することができます。

 

３．テーブルの使い方（応用編）

ここまでは、ただ単にテーブルを設置する方法だけの解説でしたが

ここからは、さらに踏み込んだテーブルの使い方について覚えていきましょう。

 

基本的に、TinyMCE Advanced プラグインを使った方法になります。

 

3-1 テーブルに見出しを作る方法

まずは、テーブルに色違いの見出しを作ってみましょう。

 

ドラッグ＆ドロップで見出しを作りたい範囲を選択しましょう。

 

テーブルの範囲を選択した状態で、テーブル機能から セル ＞ セルのプロパティ とクリックします。

 

セルのプロパティが表示されるので、セルの種類 から ヘッダーセル を選択します。

 

これでテーブルに見出しが設定されました。

見出し部分の背景の色が変わって太文字になったのでわかりやすいですね。

 

元に戻したい時は、再度範囲を選択して セル を選択すればOK。

 

3-2 セルの結合と分割

複数のセルを選択して、セル ＞ セルの結合 をクリックすると、それらのセルを合体させることができます。

 

結合するとこのような表示になります。

 

セルを分割したい場合は、もう一度セルを選択（セル1つだけなので選択しても青くなりません）して

セル ＞ テーブルセルを分割 を選択しましょう。

 

このように元通りになりました。

 

3-3 行の挿入と削除

行を挿入する方法です。

まず基準となる行を選択しましょう。

 

今回は下に挿入するので、行 ＞ 行を下に挿入 と選択します。

 

選択した行の下に、行が1つ追加されました。

 

行の削除も全く同じ手順でできます。

削除したい行を選択して、行 ＞ 行を削除 とクリック。

 

これで元に戻りましたね。

 

3-4 列の挿入と削除

「列」の挿入と削除も、「行」と全く同じ方法で行うことができます。

 

3-5 セルごとの割合(横幅)を変更する

テキストモードで、％を指定することで、セルの横幅を変更することもできます。

 

テーブルを表示した状態で、テキストモードを選択します。

 

テーブルの HTML が表示されるので、ハイライト部分のパーセンテージを変更しましょう。

 

20% と 80% に設定するとこのような表示になります。

 

さいごに

今回は、ワードプレスブログでのテーブルの使い方について解説しました。

 

情報をわかりやすくまとめることができ、ユーザーの利便性も良くなりますし

ブログの見た目もよくなるといい事ずくめなので、積極的に使っていくようにしましょう。

 

最後にテーブルについておさらいしておきましょう。