HTML Tables Made Easy with the TablePress Plugin 4


A Popular Plugin

Regardless of the type of website you have created, you will no doubt have already come across the need to position data in a grid-like fashion. HTML tables are perfect for presenting facts and figures in rows of columns.

When it comes to positioning images in a gallery like layout, you can use CSS to float graphics across the page and at some point I will include the code that shows you how to do this. And if you are keen to learn how to do so in the meantime, then you might find these 2 very popular books from Amazon quite useful; one is shown right and another at the bottom of this post.

 

HTML and CSS: Design and Build Websites

But, if you have a WordPress site, then the easiest method, and the one that I now use all the time to present tabular data, is to use a table plugin.

If you are looking for some help on the actual HTML needed for tables then the book to the right can certainly help and I have included some code sample at the end of this post.

Otherwise, if you don’t wish to embark on any back end programming then read on.

TablePress – The Table Plugin for WordPress

I have looked at a number of WordPress plugins, but the one that I now use, and can highly recommend, is the free TablePress plugin. I think the developer has done a great job in coming up with something really useful and it appears from the rating shown above (at the time of publication of this post) that I am in good company with respect to my liking of the plugin.

Best Features of the TablePress Plugin

  • Visitors to your page can sort on a designated column.
  • The rows can be presented with alternating colours.
  • If you need many rows in your table of data, there is the option to provide pagination.
  • It comes with a search box at the top so that readers can search for a particular term in your table, such as a product name.
  • You can display a table caption at the top.
  • You can decide if you want the first row to be used to display column headings.
  • etc.

How to Install  the TablePress Plugin

You can either visit the developers’ website or you can install the plugin from within your WordPress dashboard via these steps:

  1. From the left menu of your dashboard, click on Plugins.
  2. Click Add New from the top of the Plugin screen.
  3. In the search box, type TablePress and click Search Plugins.
  4. You should then see the TablePress plugin listed first. Click on Install Now.
    You’ll be prompted with “Are you sure you want to install this plugin?”
    Click OK.
  5. From the next screen, click Activate Plugin.

You should now see TablePress listed in the left menu of your dashboard.

 Creating Your First HTML Table

You create and modify your tables separately from your content page, article or post. You are provided with what is referred to as a shortcode. This is a simple line of code that you paste into your web page.  Anytime you need to make an adjustment to your table, it automatically updates on your web page because of this shortcode.

TablePress Plugin Steps

StepActionScreenshot
1Click TablePress from the left menu.
2Click Add New.
3Enter a Table Name, the description is optional.
Enter how many rows and columns you would like. You can always insert more in the future or delete as required.
Click Add Table.
4You will now see the shortcode listed. This is the line of code that you copy and paste into your web page. You can do this now or when you have finished entering the data in your cells.
5You will see tips provided as you go such as this one that reminds you that you can drag rows and columns to reorder them if required.
Now you can enter the data that you want in the cells provided.
6Decide on the Table Options & Features that you prefer from those listed under the table designer.
You can preview your table and save at any time.

As you can see, I have set out the  steps needed to create your table using this table plugin. But I haven’t used all of the features such as sorting because sorting lends itself better to tabular data.

Styling Your Table Cells

By default you will find that the contents of each cell are left aligned.

If you are not used to CSS styles, you might find it a little tricky at first trying to figure out how to center some of your content. So let’s work at simplifying this requirement.

From within the TablePress set up screen, you will see some options in the top menu. Click on Plugin Options and you will be taken to another screen

 

Styling HTML Tables

From this screen you can click on documentation and then CSS Selectors, Styling to see some examples of the types of styles that you can enter into the Custom CSS box.

But, again if you are not used to adding some of your own code and just want something simple to go on with, then you could use the following code which will center the content in each of the cells in the nominated column, in this case column 2:

.tablepress .column-2 { 
text-align: center; 
}

If you wanted that column to be a set width as well as centered, you could use the following:

.tablepress .column-2 { 
text-align: center; 
        width: 200px;
}

 

If you would like to learn more about CSS styling, this text from Amazon (Book or Kindle format) has proven to be very, very popular with readers:

CSS3: The Missing Manual

How to Code Your Own HTML Tables

Now if you don’t have a WordPress site and don’t have access to a WYSIWYG editor, then the following  can show you how to create a table to store tabular data such as monthly sales figures or specials that you are promoting.

Code for a simple 2 x 2 HTML table

This table has 2 rows and 2 columns.

HTML Tables Code

The finished table would look like this:

Table on HTML Web page

Have fun with your web page layouts, tables and graphics.  Keep in mind that posts and articles that include graphics tend to be read more by visitors to your site. But you still need to aim for fast-loading pages as well.


Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

4 thoughts on “HTML Tables Made Easy with the TablePress Plugin