WordPressで表を作成する3つの方法【初心者向け】

WordPressを使ってサイトやブログを作っていると、表を挿入したい時があると思います。

そこで今回は、初心者向けにWordPressで表（テーブル）を作成する3つの方法を紹介します。

自分で操作可能なものから試してみてください。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

 

目次

今回は下記の3つの方法を順番に紹介します。

1. ビジュアルエディタを拡張して使う
2. Microsoft Wordで作った表を使う
3. HTMLを記述する

 

 

ビジュアルエディタを拡張して使う

WordPressのデフォルトのエディタは、機能が絞られています。そのため、WordPressのビジュアルエディタを拡張できるプラグインを使うと、簡単に表を作成することができます。

今回はそのうち、TinyMCE Advancedというプラグインを使います。

 

プラグインをインストール

プラグインをインストールしたら、ダッシュボード＞設定＞TinyMCE Advancedで、表に関する機能を追加します。

下部に表示される機能一覧から、表に関する部分を上にドロップして有効化してください。

 

表を作成

プラグインを設定すると、エディタの「ビジュアルモード」に、ボタンが増えています。

この画像の赤枠で囲まれたマークが、表を作成するボタンです。

 

ここで「行数」「列数」を指定して、表を作成してみましょう。

表に外枠が必要な場合は「枠線」に1以上の数値を入力してください。

 

エディタ上に表が作成されるので、自由に内容を記述しましょう。

 

表の行や列を追加

エディタから行や列の追加を簡単に行うことができます。

アイコンの説明もまとめておきました。

行を追加	カーソルがある行の上に追加したいときは「行を上に挿入」、 下に追加したいときは「行を下に挿入」をクリックします。
行を削除	削除したい行にカーソルを当てて、「行を削除」をクリックします。
列を追加	カーソルがある列の右に追加したいときは「列を右に挿入」、 左に追加したいときは「列を左に挿入」をクリックします。
列を削除	削除したい列にカーソルを当てて、「列を削除」をクリックします。

アイコンの説明

行を上に挿入

 

行を下に挿入

 

行を削除

 

列を右に挿入

 

列を左に挿入

 

列を削除

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

Microsoft Wordで作った表を使う

さらに簡単に表を作成する方法もあります。

既に資料があったり、Microsoft Wordの操作に慣れている人向けです。

まず、Wordで作成した表をコピーします。

それを、挿入したい場所に貼り付けます。

この時、「ビジュアルモード」であることを確認してください。

 

更新すると、記事に反映されます。

HTMLがわからないという人は、この方法が一番簡単に表を挿入することができると思います。ただ、途中で行を追加したいということがある場合は、HTMLで表を編集できる方が便利です。

 

 

HTMLを記述する

HTMLを直接記述する方法です。

エディタのテキストモードを利用して、<table>～</table>タグで表を挿入します。

 

HTMLでは、表は上から要素を重ねるようなイメージで作成します。

<tr>～</tr>で囲まれた部分が行（横の並び）を表し、

<td>～</td>で囲まれた部分がセルです。

<tr>～</tr>の中に、<td>～</td>が挿入されているイメージです。

 

例えば、下記の表をHTMLで表示してみます。

商品A	30円
商品B	50円

その場合、下記のコードを入力する必要があります。

<table>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>30円</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>50円</td>
    </tr>
  </tbody>
 </table>

 

また、表をの行を足したい場合は、<tr><td>で囲まれた部分を増やせばOKです。

商品A	30円	在庫あり
商品B	50円	在庫あり
商品C	20円	在庫なし
商品E	100円	在庫なし

<table>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>30円</td>
      <td>在庫あり</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>50円</td>
      <td>在庫あり</td>
    </tr>
    <tr>
      <td>商品C</td>
      <td>20円</td>
      <td>在庫なし</td>
    </tr>
    <tr>
      <td>商品E</td>
      <td>100円</td>
      <td>在庫なし</td>
    </tr>
  </tbody>
 </table>

 

表のコードを作成したら、「テキストモード」になっていることを確認してエディタに貼り付けます。

 

サイト上で確認すると、このように表示されました。

 

以上、3つの方法を紹介しました。

まずは自分で作成可能な方法で表を挿入してみてください。

 

さらにWordPressを活用したい場合は、WordPressのギャラリー機能を使う方法も合わせてご覧ください。

 

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。