jump to navigation

Creating Tables in WordPress July 7, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

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 .
  • Configuring the sidebar to display the table :  Dashboard -> Appearance-Tab -> widgets .
  • Drag/ drop a Text box into the sidebar ( or any other module like footer ) . This Text-box can execute HTML or PHP  code .
  • Paste the following code in the Text box and press ” Save ”  .
    if(is_page(84)) {
    $table = '  [table id=2 /] ' ;
    echo $table ;
  • The ” is_page” conditional statement recognizes the ID of the page . Read my article , how to find the ID of a page . The ”  table id=2 ” references our custom pre-constructed table .
  • Positioning and Styling of the custom table : During creation of the table , we had the option to define a custom ” Class -name” . CSS will style and position the table through this ” Class-name ” .
  • Open WP-Root /wp-content/themes/your-themeName/style.css  file and paste the following code
    .wp-table-reloaded.my-customtable {
    width: 250px;
    float: right;
    top: -345px;
    left: -14px;
    background: #E64444

    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 plugin
    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 .


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s