I will explain how to put a “table” in WordPress .
If you run a WordPress site, you will often want to include a table.
Includes a table to make it easier for the reader to understand visually than to convey it in a long sentence .
As a result, you can expect the effect of extending the staying time, indirectly having an SEO effect, and improving the target achievement rate (sales, number of applications, etc.).
However, there are many people who are shy about putting a table in WordPress, saying that it seems to be difficult to remember and difficult to remember.
In fact, inserting a table is very easy, and even beginners can create beautiful tables.
In this article, I’ll show you three basic ways to insert a table in WordPress .
- How to insert a table with the basic function of WordPress
- How to make a table in Excel and copy and paste
- How to create a table with the plugin “Table Press”
At the end of the article, we also explain some caveats that are common to those who have just learned how to insert a table.
Please refer to this article and try inserting a table.
How to insert a table with the basic function of WordPress
Not long ago, the mainstream way to insert a table into WordPress was to enter the code in HTML or insert it as a plugin.
However, the latest WordPress editor (block editor, Gutenberg) allows block input, so you can easily create a table with only the default functions .
From here, I will explain how to insert a table in WordPress with images.
First, open the editor by adding or editing a new article.
Select “Add Block” where you want to insert the table.
You will be given a choice of blocks that you can insert, so select “Table”.
When you select a table, a screen for entering “Number of columns” and “Number of rows” is displayed.
- Number of columns ⇒ Number of columns
- Number of lines ⇒ Number of lines
Enter and click Create Table to insert the table.
Depending on the theme you are using in WordPress, inserting a table will make the cells easier to understand.
Select the cell you want to enter and enter the text.
You can also change the number of rows and columns after inserting the table.
Select a table and a menu will appear.
Click “Edit Table” in the menu to see the options below.
- Add line above
- Add line below
- Delete line
- Add column to the left
- Add column to the right
- Delete column
Select the content you want to change and it will be reflected in the table.
How to create and copy and paste in Excel
In WordPress, you can also copy and paste a table created in Excel and insert it.
First, create the table you want to insert in Excel.
Select the table you created and copy it.
You can easily copy using the shortcut key “Ctrl + C” (“Command + C” on Mac).
Paste it where you want to insert WordPress.
You can easily paste using the shortcut key “Ctrl + V” (“Command + V” on Mac).
If there is no problem, it will be automatically displayed in the table block.
Tables created in Excel can also be edited in rows and columns in the same way as when inserted with the basic function.
You can also edit the contents of the table, so make corrections as necessary.
How to create a table with the plugin “TablePress”
From here, I will show you how to insert a table with the plugin ” TablePress ” .
TablePress makes it easy to create the following tables that are difficult to implement with block input or Excel.
- Sort function
- Search function
- Merge cells
- Bulk change
When using the same table on multiple pages, it is difficult to manually modify each one, but you can change them all at once using TablePress.
It is possible to prevent omission of corrections, and above all, the editing time can be greatly reduced.
Next, I will explain how to create a table with TablePress with images.
Create a table with TablePress
First, install the TablePress plugin in WordPress.
After activating the plugin, “Table Press” will be displayed in the menu of the management screen.
This time we will create a new table, so click “Table Press” ⇒ “Add new table”.
Here, decide the name of the table and the number of rows and columns (the name of the table is the name when managing the table, so it is OK if it is easy for you to understand).
After completing the input, click “Add Table” to complete the table formwork.
About table settings
Before inserting the table, we will explain the basic setting method for creating an advanced table .
TablePress settings are roughly divided into the following three.
- Table operation
- Table options
- DataTable JavaScript library features
All you have to do is check or enter numbers, so setting is easy.
Let’s take a look with images one by one.
First is the “table operation” item.
With table operations, you can do the following:
- Insert link
- Insert image
- Add / copy / delete matrix
- Merge cells
Use this when you want to change the table itself.
It is easy to use, “Click the item you want to reflect in the table operation item” ⇒ “Click the part you want to reflect the contents of the table”.
In this table, I did the following:
- 2 lines added ⇒ 2 new lines are added
- Click in the same column (rowspan) and click cell A6A7 ⇒ “# rowspan #” will be added to A6A7
* “# Rowspan #” means to combine with the above cell
If you are a first-time user, you may find it difficult to set, but let’s actually touch it and gradually get used to it.
The next thing to set is “table options”.
The table options mainly allow you to make design-related settings.
For example, the following settings can be reflected just by checking.
- Add a heading row to the table
- Alternate row colors
- Make the line highlight when you hover over it
- Display table name / description
Change the settings according to the table you want to create.
The final setting is “DataTable JavaScript Library Features”.
You can use the features of the DataTable JavaScript library to add features such as:
- Sorting the table
- Table search function
- Setting the maximum number of tables to be displayed
- Table scroll
However, please note that it cannot be used together with the “cell merge” explained in the table operation.
Let’s use the functions of the DataTable JavaScript library properly as needed.
Don’t forget to save your settings with “Save Changes” when you’re done.
How to insert the created table
After completing the settings, insert the table.
This time, as a reference, I will create it with the following table contents.
| event name | 〇〇 Tournament |
|---|---|
| event date | 〇 October 〇 |
| place | 〇〇 Park |
| Admission fee | 〇〇 yen |
| Precautions | ① ～ |
| # rowspan # | ② ～ |
| # rowspan # | ③ ～ |
When you have finished entering the table contents, copy the “[table id = 〇 /]” of “Short code: [table id = 〇 /]” at the top of the table.
After opening the editor with Add or Edit WordPress, select Add Block where you want to insert the table.
You will be given a choice of blocks that you can insert, so select “Shortcode”.
When the shortcode block is displayed, paste the “[table id = 〇 /]” you copied earlier.
When you save or update, the table will be inserted as shown above.
This completes the table insertion using TablePress.
“[Table id = 〇 /]” can be diverted to multiple pages, and if you change the table settings of TablePress, you can modify all the corresponding tables.
If you want to create an advanced table or use the same table over and over again, try using TablePress.
Things to note when inserting a table into a WordPress article
When inserting a table with WordPress, the design often collapses when it is displayed on a smartphone .
Especially for those who have just learned how to operate the table, it is easy to overlook it, so be careful.
If the design is broken, it will be very difficult for the reader to see, and there is a high possibility that it will be withdrawn .
It’s easiest to check on your smartphone, but it’s a hassle to check on your smartphone every time after editing on your computer.
Therefore, I will introduce a method to easily check the smartphone display on a computer .
Pay attention to the width of the smartphone display
The most common pattern of the design of the smartphone table is the above pattern, which is judged to be okay on the computer.
To check the smartphone display on your computer, open the verification tool by selecting “Google Chrome browser” ⇒ “Right click” ⇒ “Verification”.
When the validation tool opens, select “Toggle device toolbar” from the menu.
Since it is displayed responsively, select the corresponding device (iPhone X this time) from the responsive.
Now you can check the design when displayed on your smartphone.
You can see that line breaks are made on the way, making it difficult to see.
There are ways to write programming code to make it easier to read, but here’s how anyone can easily adjust it.
Insert appropriate line breaks to make it easier to see
An easy way for anyone to adjust for table collapse is to look at the balance and insert line breaks.
WordPress line breaks can be done with “Shift + Enter”.
Insert a line break in the table inserted this time as shown below.
If you display it on your smartphone in this state, you can eliminate the collapse of the design.
Depending on the WordPress or plugin you are using, you can also adjust the design in the following ways.
- Make letters smaller
- Allows side-scrolling
- Set the width of the column
These methods are a little more difficult, so if you’re still learning how to insert a table, use line breaks to balance the table.
How to insert a table in a WordPress page Summary
This time I explained how to insert a table in WordPress .
I introduced the following 3 patterns of insertion methods.
- How to insert a table with the basic function of WordPress
- How to make a table in Excel and copy and paste
- How to create a table with the plugin “Table Press”
Any method can be easily implemented by anyone .
Moreover, once you remember it, you can use it whenever you want to insert a table in WordPress.
If you find a place to put a table, let’s actively practice the method you learned this time.
Table of Contents