How to Add Table in WordPress?
Tables are one of the easy ways to showcase structured content on a web page which also improves the readability considerably. Though WordPress does not offer any default provision to add tables on visual editor there are many ways to add simple and complex tables to your WordPress site. In this article we will discuss about the following ways to add table in WordPress site:
- Copy from Word Processing
- Using HTML table tags and customizing it with CSS
- Using plugin
Copy Table from Word Processing Software
Generally tables are created with Microsoft Excel / Word / 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 twenty-sixteen theme.
WordPress Table Created with Copy Paste from Microsoft Word
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.
Ensure the “Paste as text” button is NOT pressed during copy/paste to retain the HTML tags, otherwise only the plain text content will be pasted.
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.
Disadvantages of Copy/Paste and HTML Table
Though the above two methods are relatively easy to use, there are many practical problems in using them on your WordPress site.
- 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.
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 2.2k five star rating by users with >300k downloads.
- 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.
WordPress TablePress Plugin Options
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. Below is an example table created with TablePress which has sorting, pagination and search features.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 5 | Cell 6 | Cell 7 | Cell 8 |
