WordPressで表を作成する3つの方法【初心者向け】
WordPressで【表を作成する】方法を3つ紹介した記事です。ビジュアルエディタを拡張して使う、Wordファイルを使う、HTMLで記述の3つを順番に解説します。あなたにとって簡単な方法で試してみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
井上 祐介
WordPressを使ってサイトやブログを作っていると、表を挿入したい時があると思います。
そこで今回は、初心者向けにWordPressで表（テーブル）を作成する3つの方法を紹介します。
自分で操作可能なものから試してみてください。
目次
田島メンター！！WordPressで表を書く方法を教えてください！！！
WordPressで表を書く方法は3つあって、「ブロックエディタを使う方法」、「表計算ソフトで作った表を使う方法」、「HTMLで記述する方法」の3つあるんだ。それぞれ教えてあげるね！
はい、お願いします♪
ブロックエディタを使う
最近のWordPress（バージョン 5以降、2018年12月以降）では、Gutenberg（グーテンベルグ）というブロックエディタが標準で内蔵されています。
標準で搭載しているブロックエディタを使えば、完成したイメージに近い編集画面で簡単に作成できます。
ただブロックエディタは今までのテキスト中心のクラシックエディタと大きく違うので使い方に慣れることが必要です。
ブロックとは
記事内の文章や画像や表などを管理する単位がブロックです。
ブロック単位で配置の調整ができるので、今までのようにHTMLやCSSの知識がなくても編集できます。
段落や表などがブロックとしてページに追加され、ブロック単位で移動や削除ができます。
上の画像はブロックごとに赤の点線で囲っています。
表を作成
ページ編集画面（投稿や固定ページなど）を表示します。
表は現在のカーソル位置の真下に挿入されるので、表を挿入したい位置の真上にあるブロックをクリックしてカーソルを移動しておきます。
※表の挿入はブロック単位で行われるので、カーソルはブロック内であれば文末でなくても構いません。
※カーソル位置の指定がない場合は一番下に表が追加されます。
画面左上ロゴの右隣にある＋のボタン、「ブロックを挿入ツールを切り替え」をクリックします。
「テーブル」をクリックします。
「行数」「カラム数（列数）」を指定して、「表を作成」ボタンを押します。
表が作成されるので、自由に内容を記述しましょう。
※セル間の移動にキーボードの矢印キー「←」「↑」「→」「↓」が使えます。表計算ソフトとは違い、「Tab」キーではセル間の移動はできません。
※「キャプションを追加」をクリックすると表の下に文章を追加できます。
表の行や列を追加・削除
編集したい表の中の基準にしたいセルをクリックします。
今回は「りんご」の下に行を追加したいので、「りんご」のセルをクリックします。
下の画像の赤丸で囲ったブロックツールバーの「表を編集」ボタンをクリックします。
「行を下に挿入」をクリックすると「りんご」の下に行が追加されます。
同じように、カーソル位置を基準にして行や列を挿入あるいは削除を行います。
※表の下のキャプションをクリックした場合、基準となるセルが選択されていないので、「表の編集」ボタンをクリックしても挿入や追加のメニューを選択できません。
[PR] WordPressで挫折しない学習方法を動画で公開中
表の位置を変更する
表は他の文章や画像と同じブロックで作成されますので、後から位置を簡単に変更できます。
移動したい表の中をクリックします。
下の画像の赤丸で示した「∧（上に移動）・∨（下に移動）」をクリックすると、ブロック単位で表が移動します。
もう1つの方法として、上の画像の緑の丸で囲った「ドラッグ」でマウスポインタが手の形になったらドラッグして表のブロックをページ内で移動できます。
ブロックの間で移動したいところに青の線が表示されたらマウスのボタンを離します。
表の移動ができました。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
表計算ソフトで作った表を使う
すでに資料があったり、表計算ソフトの操作に慣れている人向けです。
今回は「Google スプレッドシート」での操作を例に解説しますが、他のMicrosoft ExcelやMicrosoft Wordでも同様の手順でWordPressに表を移せます。
※「Google スプレッドシート」を利用するにはGoogleアカウントが必要です。
※Microsoft ExcelやMicrosoft Wordを使う場合は、すでにそのアプリがインストールされているパソコンでの使用を前提としています。
※表を作成してコピーできる無料アプリやクラウドサービスでも構いません。
まず、Google スプレッドシートで作成した表をコピーします。
WordPressに貼り付ける前に、「ビジュアルエディター」であることを確認してください。
挿入したい場所に貼り付けます。
更新すると、記事に反映されます。
表を作成できるアプリに慣れている方は、この方法で簡単に表を挿入できます。
HTMLを記述する
HTMLを直接記述する方法です。
エディタの「コードエディター」を利用して、<table>～</table>タグで表を挿入します。
HTMLで編集するには編集画面を「コードエディター」に切り替えます。
編集画面の右上にある3つの点の「オプション」ボタンから「コードエディター」をクリックします。
以下の画面が「コードエディター」です。
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>
以下はHTMLを入力した画面です。
もし表の行を足したい場合は、<tr><td>で囲まれた部分を増やします。
サイト上で確認すると、下記のように表示されました。
以上、3つの方法を紹介しました。
まずは自分で作成可能な方法で表を挿入してみてください。
さらにWordPressを活用したい場合は、WordPressのギャラリー機能を使う方法もあわせてご覧ください。
表を書くことができました！
よかったね♪WordPressで表を書きたくなる場面って結構あるから、覚えておくと良いね♪
はい♪
【参考】セルを結合する
この記事を執筆した時点では、Gutenberg（グーテンベルグ）の表でビジュアルエディターからセルの結合を行うことができません。
表計算アプリなどから結合されたセルがある表を貼り付けても正しく貼り付けられません。
表のセルを結合するには「クラシック」ブロックを使って、旧WordPressの表を追加する方法があります。
※「クラシック」ブロックを使って表を作成するには、プラグイン「Advanced Editor Tools」の有効化が必要です。
※セルを結合するには、コードエディターでHTMLコードを直接編集する方法もあります。
「クラシック」ブロックとは
Gutenberg（グーテンベルグ）による編集画面になる以前のWordPressと同じ操作でページ内要素を編集できるブロックが「クラシック」ブロックです。
標準の「クラシック」ブロックでは表の挿入ボタンがありませんが、「Advanced Editor Tools」プラグインを追加して旧WordPressの表を挿入できます。
「Advanced Editor Tools」プラグインによりセルの結合はもちろん、セルごとに罫線の種類や色や高さを設定もできます。
※「Advanced Editor Tools」プラグインで結合できるセルは「クラシック」ブロックに挿入された表だけです。「テーブル」ブロックのセルは結合できません。
「クラシック」ブロックで表を作成するには
標準の「クラシック」ブロックでは表を追加できないので、「Advanced Editor Tools」プラグインをインストールして、旧WordPressの表を追加できるようにします。
※表計算ソフトなどで作成した表をコピー貼り付けする場合は、プラグインがなくても結合されたセルがある表を「クラシック」ブロックに貼り付けられます。
「Advanced Editor Tools」プラグインのインストール
最初に「Advanced Editor Tools」プラグインのインストールと有効化を行います。
WordPress管理画面の「プラグイン」から「新規追加」を選択します。
キーワードに「Advanced Editor Tools」と入力し、Advanced Editor Toolsプラグインの「今すぐインストール」をクリックします。
インストール終了後、プラグインを有効化します。
「クラシック」ブロックに表を作成する
Advanced Editor Toolsプラグインが有効化できたら、記事投稿画面で「クラシック」ブロックを追加します。
編集画面に追加された「クラシック」ブロックをクリックします。
下の画像赤丸部分の「テーブル」ボタンをクリックし、「テーブル」メニューからマス目を表示します。
マス目の上でマウスを移動し、クリックして行数と列数を決めます。
上の画像では5行2列の表を作成しています。
※「テーブル」ボタンが表示されない場合、「Advanced Editor Tools」プラグインが有効化されていません。
5行2列の表が「クラシック」ブロックに作成できました。
表の入力を行います。
「クラシック」ブロックでセルを結合する
「クラシック」ブロックの表にある結合したいセルをドラッグして選択します。
「テーブル」から「セル」の「セルの結合」をクリックします。
※上の画像は「テーブル」メニューから操作していますが、「テーブル」ボタンでも同じです。
選択したセルが結合されました。
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
