WordPressの投稿やページにテーブルを追加することで、データを整理し、読者が情報を消化しやすくすることができます。WordPressは、HTMLコーディングを必要としない簡単なツールを提供することで、このプロセスを簡素化しています。
このガイドでは、WordPressでテーブルを簡単に作成・管理する方法を紹介します。テーブルを挿入する基本的な方法だけでなく、ソートや検索などの高度な機能でテーブルを強化する方法も学びます。すべてプラグインは必要ありません。
この投稿が終わるころには、コンテンツのプレゼンテーションと機能性を向上させるためにテーブルを効果的に使用する知識が身についていることだろう。
動画チュートリアル
文章での説明がお好きな方は、このまま読み進めてください。
WordPressブロックエディターでテーブルを作成する
WordPressでは、初期設定のブロックエディターを使ってテーブルを追加するのがとても簡単です。
投稿やページを新規作成するか、既存の投稿やページを編集するだけです。コンテンツエディターに入ったら、「+」マークをクリックして新規ブロックを追加し、テーブルブロックを選択します。
テキスト」セクションで見つけることができるし、検索バーに「テーブル」と入力することもできる。
次に、表のカラム数と行数を選択するプロンプトが表示されます。どちらも初期設定は2です。
テーブルのカラムや行は後でいつでも追加・削除できるので、正確な数が100％わからなくても心配しないでください。
行数とカラム数を入力し、「テーブルを作成」ボタンをクリックするだけです。
するとブロックが表をジェネレータで生成し、画面に表示する。
表のセルに文字を入力すると、各セルのコンテンツ量に応じて自動的にリサイズされます。
セルを固定幅にしたい場合は、このオプションを右側に設定できます。ここでは、テーブルのヘッダーやフッターセクションを追加することもできます。
設定パネルから「スタイル」タブに切り替えることもできます。
WordPressテーマには、テーブルブロックのスタイルがたくさん用意されているかもしれませんし、背景色やテキスト色を選ぶこともできます。
新しい行やカラムを追加したい場合は、表の追加したい箇所のセルをクリックするだけです。次に「表の編集」ボタンをクリックする。
テーブルに行やカラムを追加したり削除したりするオプションがたくさん表示されます。
初期設定では、テーブルのカラムのテキストは左寄せになっています。
列の内側をクリックし、’Change Column Alignment’ボタンをクリックすることで変更できます：
投稿やページ内のテーブル全体の配置を変更することもできます。
アライメントの変更」ボタンをクリックし、リストからオプションを選択するだけです。
これらのオプションは、投稿エリアの通常の境界を超えてテーブルを表示させることができることに注意してください。
投稿日:WordPressのサイト上では奇妙に見えるかもしれませんので、投稿やページをプレビューして、テーブルがどのように表示されるかを確認してください。
これは、私たちのデモサイトに表示されるように「ワイド幅」に設定されたテーブルです：
ご覧のように、投稿エリアの左右の余白を越えて広がっている。
Gutenbergエディターにビルトインされているテーブルツールは、テーブルの表示に多くの柔軟性を与えてくれます。テーブルブロックを使って、読者にデータをわかりやすく表示することができます。
しかし、このブロックには検索フィルターやカスタマイザーなどの高度な機能はない。
また、サイドバーウィジェットや他のページなど、WordPressサイトの複数のエリアで同じテーブルを効率的に使用することもできません。
高度なテーブルを作成するには、WordPressのテーブルプラグインを使用する必要があります。
TablePressプラグインを使ってテーブルを作成する
TablePressは、市場で最高のWordPressテーブルプラグインの一つです。無料のプラグインで、テーブルを簡単に作成・管理できる。さらに、テーブルを区切り編集したり、大量の行を追加することもできる。
もしあなたが、テーブル機能を持たない過去のWordPressクラシックエディターを使っているのであれば、TablePressは投稿やページにテーブルを追加する最良の方法でしょう。
まず、TablePressプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
WordPressダッシュボードにTablePressメニュー項目が表示されます。TablePress ” 新規追加で新しいテーブルを作成します。
テーブルの名前を入力し、行とカラムの数を決めます。テーブルの行やカラムは後でいつでも追加したり削除したりできる。
テーブル名、行、カラムを追加したら、「Add Table」ボタンをクリックしてテーブルを作成します。
次に、テーブルの情報が表示される画面と、コンテンツを追加できるエリアが表示されます。
表のセルに必要なデータを入力するだけです。
行やカラムの追加や削除、並べ替えを行うには、テーブル内で右クリックするだけです。オプションメニューが表示され、そこでさらに変更を加えることができます。
テーブル操作」などの詳細オプションは、「テーブルコンテンツ」エリアの下にある。
ここから、行の追加、削除、複製ができます。
テーブルオプション」では、ヘッダー行やフッター行を追加することができます。
また、テーブル名と説明を表示する場所を決めることもできる：
最後に、「サイト訪問者のためのテーブル機能」セクションで様々なオプションを設定することができます。
これらの設定により、読者がフィルター、検索、ソートできるレスポンシブテーブルを作成できます。
テーブルが完成したら、「変更を保存」をクリックします。
その後、Tableショートコードをコピーしてください。次のステップで必要になります。
テーブルを表示したい投稿またはページを編集し、エディターにショートコード・ブロックを追加する。
その後、先ほどコピーしたショートコードをショートコード・ブロックに追加する。
更新または変更を保存することを忘れないでください。
一方、クラシックエディターを使っている場合は、ショートコードをそのまま投稿に追加するだけです：
将来テーブルを変更したい場合は、ダッシュボードのTablePressに戻って変更することができます。テーブルを使用している投稿やページは自動的に更新されます。
TablePress では、スプレッドシートや CSV ファイルからデータをインポートすることもできます。同様に、TablePress のテーブルデータを CSV ファイルにエクスポートし、Microsoft Excel や Google Sheets などのスプレッドシートプログラムで開くことができます。
この投稿が、HTMLを使わずにWordPressの投稿やページに表を追加する方法を学ぶのに役立てば幸いです。WordPress で目次を作成する方法や、WordPress のエキスパートが選ぶ最高のテーブルプラグインもお勧めです。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis says
Cannot add table to latest version of WORDPRESS
There is no +
WPBeginner Support says
The + is still in the current version of WordPress, if you are using a builder or similar tool instead of the block editor, that is the most common reason why you would not see it.
管理者
Ralph says
I use wordpress default tables and while they work great on desktop browser, on the phone everything is messed up. It only allow like 10 characters max and turn nice table into rubbish.
Is there a way to do something with it? Like not squish but scale? Table would be smaller but readable or the same size but we can swipe it?
WPBeginner Support says
It heavily depends on how your table is organized, you may want to look into TablePress for more control over the tables.
管理者
Shafi says
Is there a way to show html without it being rendered in the front-end ? like i wanna show in the table cell, and i want the output as however, the table is treating it as if there’s an image. How do i solve that
WPBeginner Support says
It would depend on the method used but in your toolbar when you have a cell selected you should have the option of setting it as inline code for what you’re wanting to do
管理者
Warren Contreras says
The table is exactly what I need, but only if you can input number and display a column sum in the botom row,
WPBeginner Support says
For what you are wanting, you would want to use TablePress
管理者
Yemi says
Is there a way to break the long table into pages whereby users can click next
WPBeginner Support says
To separate the content in your tables into different pages, you want to use TablePress and its pagination options.
管理者
Anita says
The background colors don’t work because you need to backspace the quotations and type in your own quotations. I found it by accident. If someone else has already figured that out my apologies but I wasn’t going to go through over 100 comments to check.
WPBeginner Support says
Thank you for sharing that should someone run into the background color not working for them
管理者
Andre Victor says
Hi. I have an existing table with data of 6 columns and 750 rows. It would be difficult to re-type into blank table in WordPress page. Please advise how I can either import the entire table (can be Excel or Word) or copy and paste the cells’ contents into blank table.
WPBeginner Support says
You would want to take a look at TablePress and the import options available to bring in your table.
管理者
Margaret says
Hi! I am wondering if it is possible to simply copy->paste a table from an existing document into WordPress? I have tried this and it doesn’t appear to work, but I am wondering if there is a trick to it that I am missing. Thanks!
WPBeginner Support says
It would depend on the document but we would normally recommend recreating the table in WordPress
管理者
Nicole says
Hi! I want to learn more about WordPress!!
WPBeginner Support says
Our site should be able to help you then
管理者
Jim Gharib says
Classic editor does have table functionality and a plugin is not needed when using that editor. Check it out.
WPBeginner Support says
You would need to use a plugin to enable the classic editor and normally that would require using HTML
管理者
Matthews Otalike says
Oh my word, thanks for the guidance on creating tables on WordPress and other resources you have been availing to us. Kudos to you.
WPBeginner Support says
You’re welcome, glad our guide was helpful
管理者
TheFrugalChoice says
Helpful post that I can use in my personal finance and financial independence blog.
WPBeginner Support says
Thank you
管理者
Monique Robinson says
Great article and great plugin. Straight and to the point. Thanks very much.
WPBeginner Support says
Glad you liked our article
管理者
Annapurna agrawal says
Hi
I have installed the tablepress plugin.
i have issue for user capability. In the user role plugin, i haven’t granted permission to “edit_other_user_tables”. But my contributor user role can still edit other’s table and delete it as well.
How should i avoid access to other’s table?
WPBeginner Support says
You would want to reach out to TablePress to see if there is a built-in or recommended method for preventing editing of other tables.
管理者
Nabil Nawaz says
Great article.. how can we make parent child in this ? like 1st column’s 1st cell is parent cell and next to it we have information for it’s child info.. like three rows are need to be explained for that 1st cell next to it
sumit kumar gupta says
Sir when we click on the TablePress option in Visual editor then only list of table is showing in front of me. No Table creation option is available in Visual Editor. What should I do for create a new table in Post editor?
Wyce Ghiacy says
Thanks for the video.
What would you recommend to embed a formatted Excel sheet and collect data from registered WP users? (Like monthly usage reports, and the excel sheet also calculates the quarterly/yearly usage)
Louise Wooding says
HI
Thank you for the video. I have created my table and chose Insert Image in one of the cells. It did let me choose the image but it then entered the URL to it rather than the image itself. Have I missed out a step??
Thank you.
Louise
Tom Cullen says
Awesome Share, thank you!
Owolabi says
This is a nice article boss.
Thanks for sharing.
But I do have a question.
Is there no plugin I can install that can bring the insert table option into the icons on my wordpress post?
Thanks as I await a reply
Ravi Kanani says
I want to add a table of specification in which first column is same for all post and second column is different.
How can I add this type of table in post??
Susan Hawthorne says
It would be very nice if, in the article about TAblePress it said that you have to upgrade to a business plan to use a plugin!!!!!!!!!!!!
WPBeginner Support says
Hi Susan,
You are probably using WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
管理者
Barbara says
Is there any way to bold some lines of text in the table? Its all plain text, wish there was an easy way to add bold text
Abee says
just add an html text at the word
Michael Carter says
Actually, you can use CSS if you are ok with it. Use The words you want to emphasize …
banks dada says
Thanks a million for this plugin. All i needed was to prepare the list on excel and import it into wordpress.
Sweet and time saving tool.
Bless you guys for this piece
Sadha says
Hi, I would like to create links in the table that forward to another page and pass the row number through or any field from the row. How would I do this?
Options I can think of which are not straight forward
1) Use localStorage\sessionStorage
2) Pass the value in the URL but then the next page needs to read this on load – maybe not a bad idea ?
Molly Greger says
Wow! such a fantastic tool!! BUT: the colors are so pale I cant see a thing?? How can I change the colors fo rows/columns?
varalakshmi says
Thank you……This is helpful to me up to some extent. I satisfied with your post.
Alex Nicholson says
Think this only works for users of WordPress.org. Is there any similar guide for those like me who use WordPress.com especially where I can use a coloured background to the cells in a table?
Ray says
Hello
I was trying to make an interactive table similar to this that would use a query picking data from a database.
I am using wordpress with a mysql/phpmyadmin database.
My query works in phpmyadmin but does not show values in wordpress?
SELECT * FROM `MyTablename` WHERE 1
Do i need to use a list or print command or database name?
Jhon Carl says
I am having the same issue with you. Did you find a way to this already?
Carolyn says
I would definitely recommend this plugin. A reminder to blogger when moving from one hosting service to another: don’t forget to back up the tables. There’s no way to recover the data. And if you know how can you share the info.
Dimitar says
I recently was struggling to figure out how to add good-looking tables so this will be very helpful, thank you for publishing this.
WPBeginner Support says
You are welcome
管理者
Omar Khan says
How to create tables on tag/category page
Paco Gimenez says
Hi guys,
Thank you very much for support.
This tablepress is interesting.
I was looking a system to do something like that:
In i have a table with some information and colums. table1 for example.
I want when i press some region in my map, i can load an url, like /map#section
Can i do something like load same table in another order? by some colum o something? instead of click in a column, click in a region and load the same url but with the “#” of this table in the order required.
Thank you very much for support.
Ben K says
Thought about updating the screenshots on this article?
Divine says
Thanks WP. You guys are the best! 4.5stars
Arindam says
Thanks for the info. I was wondering if the shortcode will have any SEO value. Is it likely that a table displayed with a shortcode will appear in Google Featured Snippet?