How to create tables in WordPress with a plugin or HTML and CSS

Sometimes you need to present information in tables or you want to show text or images in two or more columns in a post on your blog or website. Let’s see how to do this in WordPress.

Two-column text can add interest to an otherwise visually dull page of text. It should not be used all the time for all the text, but it can be used occasionally.

Sometimes tables are essential, such as when presenting various types of data. For example, a list of products, descriptions and prices looks great in a table, sales by product or area, average rainfall per country, download options for an e-product like an ebook, and so on. There is no limit to the types of information that can be displayed in tables.

The question is, how do we present information in tables in WordPress?

There are several methods, so let’s take a look at them, starting with old-style HTML tables.

Old-style HTML tables

In the early days of the web, tables were the only way to design page layouts and text and images were put in the columns or cells of tables. A typical web page today with a main body area and a small sidebar on the right would be a two-column table.

HTML tables still work today and while you don’t need them for page layout, you might want to use them to display items in rows and columns. Here is the code for a simple table with two columns and two rows.

<table width="300" border="1" cellpadding="5">
<tbody>
<tr>
<td>Top left</td><td>Top right</td>
</tr>
<tr>
<td>Bottom left</td><td>Bottom right</td>
</tr>
</tbody>
</table>

This must be typed in using the text tab in the WordPress post editor, not the visual tab. Here is the result of entering the above code:

Top left	Top right
Bottom left	Bottom right

I don’t want to go too deeply into HTML, but knowing a bit can help a lot, so here are the important bits:

• <table… – this is where we specify the width in pixels or as a percentage of the page width, we can choose the thickness of the border or have no border with 0, and cellpadding adds space between the cell contents and the border.
• <tr> – the start of a table row.
• <td> – the contents of a cell (table data)

Basically you create a row with <tr> and specify the table cells with <td>. Another row could be added by inserting this between the two existing rows or after the last one. For example:

<tr>
<td>Middle left</td><td>Middle right</td>
</tr>

Top left	Top right
Middle left	Middle right
Bottom left	Bottom right

Hey, where did those colours come from? Once you have created a table in text mode, you can switch back to the Visual tab and use the usual editor toolbar controls to change the text, make it bold or italic, set the colour and so on. Just create a table with dummy text and then edit it.

If you wanted three columns you would just add another <td>Some text</td> to each row. Other items can be added, such as a heading row, table contents can be centred and more, but you probably don’t want to hand code everything.

Use an HTML table generator

It would be a pain if you had to create tables by typing code, so fortunately, you don’t have to and HTML Table Generator is a handy website that lets you create the code by pointing and clicking.

1. Click and drag over the grid to select the table size
2. Set the border, width and padding
3. Copy the HTML and paste it into the Text tab in WordPress
4. Switch to the Visual tab, click in the table cells and enter the text you want

It is easy to use provided you can copy and paste and it is a handy tool for making old style HTML tables.

Style tables with CSS

There are many tweaks to make the table better and instead of old style codes, you should be using CSS instead. So instead of typing

<table width="80%">

you would enter

<table style="width: 80%;">

Other items can be added using styles like these:

• width: 80%;
• border: 2px dotted red;
• padding: 10px;
• background-color: yellow;

Add them to the table like this:

<table style="width: 80%; border: 2px dotted red; padding: 10px; background-color: yellow;">

Now the table looks like this:

There are many CSS customisations that can be used, but it becomes more and more complicated.

Create tables with shortcodes

I looked at the HTML and then showed an easy HTML table generator. It is useful to know a bit of background information, but it is not essential because there are easy ways to create tables in WordPress using plugins.

I am quite happy typing in code and it saves having yet another plugin cluttering up the system and possibly creating problems. However, not everyone wants to code, so here is a simple way to create tables with the Shortcodes Ultimate plugin for WordPress.

[ su_row ]
[ su_column size="1/2" ] Left column [ /su_column ]
[ su_column size="1/2" ] Right column [ /su_column ]
[ /su_row ]

That is one row and two columns, each half the width. Note: I had to put spaces around each [ and ] to get the code to display in WordPress. When doing it for real, there should be no spaces.

More rows could be added in the same way, but any amount or type of content can be inserted into a column, so if you had three items and wanted two columns you could simply do this:

[ su_row ] 
[ su_column size="1/2" ]Bag of Apples
Bag of Oranges
Bag of Pears[ /su_column ] 
[ su_column size="1/2" ]$3.00 per kg
$2.75 per kg
$3.21 per kg[ /su_column ] 
[ /su_row ]

The shortcodes can be typed in manually but a simpler way is to click the Shortcodes button in the WordPress post editor and then click Columns. One more click of the mouse and the code is entered.

The only downside is that it looks messy and confusing in the WordPress post editor. It does work though.

Use a tables plugin

There are several plugins that are designed to make tables easy and the most popular is TablePress. Some plugins are designed for pricing tables or data tables.

Go to Plugins in the sidebar and click the Add New button, then type tables into the search box. Install the TablePress plugin and then activate it.

TablePress creates tables outside of the WordPress post editor. Select TablePress in the sidebar and then select the Add New tab to create a new table. Enter the name, a description, and the number of rows and columns.

Add the table and then a gazillion configuration options appear. Among all the options is a table to enter the data to show. I won’t go into all the options but rest assured almost everything you could wish for is included.

Any number of tables can be created, customised and saved. TablePress adds a button to the post editor and when clicked, it displays a list of all the tables you made. Select the one you want and it is inserted into the post. Here is what the table looks like in the post (it’s a screenshot, not the real thing).

Default settings were used and nothing was changed. It is pretty good and the columns can be sorted by clicking the headers, you can choose how many entries to show if there are a lot of them and you can search for items..

If you wanted to change a table, it can be edited by going to TablePress in the sidebar. Mouse over the table and then click the Edit link below. Changes are not required to the post, just the table in TablePress.

TablePress is brilliant and is packed with features. It is recommended if you have a lot of tables and want to do complicated things with them and let users sort and search. Is it worth installing the plugin for the occasional simple table? I would HTML code it, but for anything more, use a plugin.