WordPressのWebサイトで表を作成する方法

Word、EXCELの表を貼り付けて作成する

馴染み深いWordとExcelなら表は簡単に作れる人が多いでしょう。これらのアプリケーションで作った表をWordPressに貼り付けるのも一つの方法です。

Wordを使って表を作成する

まず、Wordで表を作成します。

作成した表を選択して、WordPressのビジュアルエディターに貼り付けるだけです。すでにWordで作った表があり、WordPressで再度作成するのが面倒な場合、簡単に表を流用できて便利な方法と言えます。

Excelを使って表を作成する

Excelを使って表を作成します。

作成した表を選択して、WordPressのビジュアルエディターに貼り付けます。
こちらも、Word同様にすでにExcelで作った表があるので、とりあえずWordPressに入れてしまいたいという場合に使える方法でしょう。

HTMLで作成する

HTMLを使って表を作成するには、HTMLの知識が必要になります。簡単な表を作るだけなら決して難しいわけではなく、基本さえわかれば使えるでしょう。HTMLにおいて、表はテーブルと言います。作成のコツはtableタグを理解することに尽きます。

テーブル作成に使うHTMLタグ

基本となる以下の4つのタグを理解しましょう。

1. tableタグ

テーブルを指定するタグです。<table>と</table>の間に行や列など表の構成やデータにあたるtrタグやtdタグを設定します。

2. trタグ

テーブルの行を指定するタグです。<tr>と</tr>の間が一行になります。trタグの数だけ、行が増えるイメージです。

3. tdタグ

セルに該当する部分です。<td>から</td>で一つのセルを表します。表に記載するデータをイメージしましょう。

4. thタグ

セルに該当する部分ですが、こちらは見出しにあたる部分に設定します。<th>から</th>で一つのセルを表します。

テーブル作成に使うHTMLタグ

<table border="1">
　　<tr>
　　　<th>ゴールド会員価格</th>
　　　<th>シルバー会員価格</th>
　　　<th>非会員価格</th>
　　</tr>
　　<tr>
　　　<td>5,500円</td>
　　　<td>7,000円</td>
　　　<td>9,500円</td>
　　</tr>
</table>

上記は簡単な表のHTMLです。WordPress管理画面の左メニューから「投稿」の「新規投稿」をクリックしてください。HTMLは、テキストエディターに記述するので、エディターはテキストにしておいてください。テーブルの中に、trタグで行を作り、thタグとtdタグでデータを配置しています。ちなみに、「table border="1"」で、テーブルの罫線の太さを指定します。実際に記述してみると理解がぐっと深くなりますので、入力してみてください。

プレビューをしてみると、表のイメージを確認できます。単純なタグの指定ですが、表を作成できました。凝った表を作るなら、より深い知識が必要になりますが、あくまでも簡単な表ならば、このようにそれほど難しいものではありません。選択しているWordPressのテーマによっては、罫線などがHTMLの記述通りに表示されない場合がありますので、留意しておきましょう。