| WordPress

How to Make Beautiful Tables in WordPress

Tables are often the best way to display complicated information but they can be difficult to make attractive.

Tables can be used to display information that needs to be compared in order for it to make sense. But sometimes they can be difficult to read and even harder to put into documents. Updating them can also be difficult if information needs to be reorganized or updated.

TablePress is an easy-to-use plugin for WordPress. It lets you create and manage beautiful tables without having to code anything. You can embed tables into posts, pages, or text widgets using a shortcode.

To install the "TablePress" plugin:

  • Go to Plugins and click on the Add new below it on the left-hand sidebar.
  • Search for ‘tablepress’
  • Click Install now.
  • Click Activate.

How to Make Beautiful Tables in WordPress

  • After activation, you will see ‘TablePress’ on the left-hand sidebar. Click here to create your first table.

Here you can give your table a name - this is just so you know which table to embed later - and how many rows and columns you want. This can all be changed later so feel free to experiment.

  • Now you can add the content that you want to put in the table. Remember to give each column a title.

Below this section, you can make changes or additions to your table.

If you want to add a column:

  • Go to the Table manipulation section
  • Select a column where you would like the column to appear
  • Under Selected columns, click Insert.

To move the column, hover over the column until you see a four-arrowed icon and then click and move the column into place. You can move rows around in the same way.

four error icon

Further down the page, you can select various table options.

By default, the first row is selected as a heading, but you can unclick this if you don’t want it to be a heading.

Also, alternate rows have different background colors. This makes tables easier to read. The color changes again when the user hovers over a row. All this can be switched on or off and manipulated with CSS.

By using the DataTables javascript library, you can also allow your users to sort and search your tables.

To insert the table into a post or page you can use a shortcode.

From the list of all tables, you can easily grab the shortcode by clicking on Show Shortcode.

Take the shortcode, eg, [table id=1 /] and paste it where you want it to appear.

Your page now shows a beautiful table without the need for any coding.

If you want to change the colors you can go to Plugin Options under TablePress on the left-hand side and add your own styles to the Custom CSS block.

For example:

.tablepress .odd td { background-color: #ff0000; }

.tablepress .even td { background-color: #00ff00; }

 

Now you can have whatever colors you like by just changing the color codes.

Conclusion

The "TablePress" plugin for WordPress makes it really easy to create and manage beautifully looking tables.


About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.