How to Add Table 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.

---

---

4 Ways to 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

Related: How to use post formats in WordPress?

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 visual 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 bar to see 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.

2. Using HTML and CSS

The second way is to use HTML <table> tags to create tables. For example, paste the below code under WordPress text editor to add a simple table.

<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 visual editor with the copy pasted table.

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.

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.
• 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 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 very easy to use interface.
• Stable without consuming more resources.
• Can create data tables with filtering and search box.
• Import function from Microsoft Excel.
• Can customize individual tables with CSS from the dashboard.

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

You can also directly insert the created tables within the post editor. The 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 a addon plugin. This is also available free from the same developer. You can use the same shortcode with additional parameters to make the tables responsive.

Related: 6 ways to find if a site uses WordPress CMS.

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 to 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