Tournas Dimitrios

Creating Tables in WordPress July 7, 2011

Tables are building blocks to present content in a structured way . In the simplest terms , tables are made up of rows and columns , and all rows have the same columns . A bit of jargon : rows are known as records and columns are fields . Each field can store a specific type of data , such as a number, date , picture or a piece of text . Of course you know what a table is all about , I had to make a smooth introduction 🙂

Bloggers that use WordPress.com are used to structure their tables by plain HTML code , it’s not so hard as it sounds . Those that use an self-hosted WordPress website can use a nice plugin to create table in just a few clicks . WP-Table Reloaded can be used to create simple to very sophisticated tables . A comfortable backend let’s you create a ” library ” of pre-constructed tables . Each table is assigned a unique ID , pasting that ID inside a post , page or module ( side-bar , footer … ) will display the pre-constructed table with that specific ID-number . Each table can assigned a unique ” Class – name ” , so it can styled independently with CSS . And to make this plugin even more tempting , importing / exporting tables in CSV , HTML and XML is only a few clicks .

After installing / enabling of this plugin a new configuration board , for constructing – configuring new tables , is accessible through Dashboard -> Tools -> Wp-Table Reloaded . I won’t go through each option available in this panel , you have to explore them by yourself . As mentioned in previous paragraph each table can assigned a ” Class name ” so it’s customization can be done through CSS .

The following screenshot demonstrates a practical example . I created two custom tables , one of this table is displayed in the sidebar only on specific pages . Let’s see the steps :

Creating custom Tables through the administration board ( I won’t go through this process ) . Each table , after it is created , is referenced by it’s unique ID .

The Class-name ” my-customtable ” is the name we assigned to the table during construction . Referencing this Class-name with CSS is done by prefixing it with the “ wp-table-reloaded ” keyword .

My CSS knowledge is very basic , yours may be better 🙂

A bad practice would be to assign the CSS styling directly on the Style file of the pluginWP-root/wp-content/plugins/wp-table-reloaded/css/datatables.css
But future updates of the plugin may over-write this file .

The table in the main content area is displayed by pasting the table-ID when editing the article / page .