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

WordPressで【表を作成する】方法を3つ紹介した記事です。ビジュアルエディタを拡張して使う、Wordファイルを使う、HTMLで記述の3つを順番に解説します。あなたにとって簡単な方法で試してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

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

 

大石ゆかり

田島メンター!!WordPressで表を書く方法を教えてください!!!

田島悠介

WordPressで表を書く方法は3つあって、「ビジュアルエディタを拡張して使う方法」、「Wordで作った表を使う方法」、「HTMLで記述する方法」の3つあるんだ。それぞれ教えてあげるね!

大石ゆかり

はい、お願いします♪

 

目次

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

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

 

 

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

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

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

 

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

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

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

tableeditor1

 

表を作成

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

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

tableeditor2

 

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

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

tableeditor3

 

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

tableeditor4

 

表の行や列を追加

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

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

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

アイコンの説明

行を上に挿入

 

行を下に挿入

 

行を削除

 

列を右に挿入

 

列を左に挿入

 

列を削除

 

 

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

Microsoft Wordで作った表を使う

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

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

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

table1

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

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

table2

 

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

table3

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>

 

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

table4

 

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

table5

 

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

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

 

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

 

大石ゆかり

表を書くことができました!

田島悠介

よかったね♪WordPressで表を書きたくなる場面って結構あるから、覚えておくと良いね♪

大石ゆかり

はい♪

 

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