WordPressで表を作成する3つの方法【初心者向け】
WordPressで【表を作成する】方法を3つ紹介した記事です。ビジュアルエディタを拡張して使う、Wordファイルを使う、HTMLで記述の3つを順番に解説します。あなたにとって簡単な方法で試してみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
WordPressを使ってサイトやブログを作っていると、表を挿入したい時があると思います。
そこで今回は、初心者向けにWordPressで表(テーブル)を作成する3つの方法を紹介します。
自分で操作可能なものから試してみてください。
なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

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

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

はい、お願いします♪
目次
今回は下記の3つの方法を順番に紹介します。
ビジュアルエディタを拡張して使う
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のギャラリー機能を使う方法も合わせてご覧ください。

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

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

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

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)