4 Ways to Add Tables in WordPress

Tables are one of the easy ways to showcase structured content on a web page. It will also considerably improve the readability of the content. Earlier WordPress does not offer any default provision to add tables on Classic editor. However, you have a table block in Gutenberg editor to easily insert tables on your pages. In addition, there are many other ways to add simple and complex tables to your WordPress site. Remember, table of content is completely different from adding tables. Check out our tutorial on how to insert automatic table of content in WordPress post.

Insert Tables in WordPress

In this article we will discuss the following ways to add table in WordPress site:

• Copy from Word Processing
• Using HTML table tags and customizing it with CSS
• Using plugin
• Gutenberg table block

1. Copy Table from Word Processing Software

Generally, you can create tables with Microsoft Word / Excel / PowerPoint or any other equivalent word processing software. You can just copy and paste the table content from Excel or Word to the WordPress editor. The table will be showing with the lightgrey color border on the editor. The visual look of the table on a published article may vary based on the style of your theme and below is how it will look on a default theme.

If you are using Classic editor, tables created using copy and paste method are not responsive. As you can see in the picture above, it overlaps with the site’s sidebar. So this method can be used for very small tables may be with two columns. However, it will work properly when pasting the content in Gutenberg editor. You will see a horizontal scroll bar to view the content stretching beyond the width on the published post.

Ensure the “Paste as text” button is NOT pressed in Classic editor during copy/paste to retain the HTML tags, otherwise only the plain text content will be pasted. Also, remember to paste the table content in “Visual” mode.

2. Using HTML and CSS

The second way is to use HTML <table> tags to create tables. For example, paste the below code under “Text” mode in Classic editor. With Gutenberg, you can simply paste the HTML code inside “Custom HTML” block. This will convert the code into a table similar to any HTML editor.

<table style="height: 205px;" width="551">
<tbody>
<tr>
<td width="185"><strong>Heading 1</strong></td>
<td width="185"><strong>Heading 2</strong></td>
<td width="185"><strong>Heading 3</strong></td>
<td width="185"><strong>Heading 4</strong></td>
</tr>
<tr>
<td width="185">Cell 1</td>
<td width="185">Cell 2</td>
<td width="185">Cell 3</td>
<td width="185">Cell 4</td>
</tr>
<tr>
<td width="185">Cell 5</td>
<td width="185">Cell 6</td>
<td width="185">Cell 7</td>
<td width="185">Cell 8</td>
</tr>
</tbody>
</table>

The table on the published article will exactly look same as in the copy/paste method. But the HTML tables can be customized with HTML table attributes or with CSS. For example, you can add border color, background color, change font size, change the width of the cells, merge cells, etc. which can’t be done on the WordPress editor with the copy pasted table.

Disadvantages of Copy/Paste and HTML Table

Though the above two methods are relatively easy to use, there are many practical problems when using with Classic editor.

• Tables are not responsive if you are using with Classic editor (for example – on custom post types).
• Creating multiple tables with uniform look is difficult task and the display on the published site will vary based on the theme you use.
• Customizing needs more technical knowledge of using HTML / CSS and also adding CSS needs additional work.
• Complex data tables can’t be created.

The solution is to use Gutenberg table block or use a plugin for this purpose.

3. Creating Tables Using Plugin

When you want to have a uniform look of all the tables throughout your site, it is a good idea to find a plugin to do that task. Search for “table” in WordPress plugin repository to find thousands of free plugins. We tested couple of them and recommend “TablePress” due to the following reasons:

• More than 4k five star rating by users with >800k active installations.
• Simple, free and easy to use interface.
• Stable without consuming more resources.
• Can create data tables with filtering and search box.
• Import tables from Microsoft Excel.
• Can customize individual tables with CSS from the dashboard.

Once you installed and activated the plugin, navigate to “TablePress > Add New” menu to create a new table. Each table when saved will generate a shortcode like [table “ltID” not found /]
which can be embedded anywhere on you site.

You can also directly insert the created tables within the post editor. Tables created are responsive and you can customize individual tables with custom CSS if you need. The advantage of using plugin is that you can create data tables with search box, sorting and filtering options. Below is an example table created with TablePress which has sorting, pagination and search features.

In order to add responsiveness to TablePress tables, you need to install an add-on plugin. This is also available free from the same developer. You can use the same shortcode with additional parameter like [table “ltID” not found /]
to make the tables responsive.

4. Using Gutenberg Table Block

WordPress introduced Gutenberg block editor from version 5.0. There are many drag and drop blocks included in Gutenberg as part of WordPress core. With this, now you can easily insert buttons, tables, social icons and many other beautiful blocks.

• Click on the + icon on the top left corner of the editor and select “Table” block.

• Choose number of rows and columns for your table.

• Customize the table settings to add header, stripes and colors.

You can anytime add or delete rows / columns in the table. Below is a sample table created with Gutenberg table block.

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Final Words

As explained above, there are many methods available to insert tables in WordPress site. You can also use tables to show comparison of products and insert affiliate links to earn money. However, you need to use plugins or Gutenberg table block for creating larger and responsive tables.