Aug 252014
 
Article WordPress

The support offered by a default WordPress installation to insert HTML tables in the content of a blog  is minimal, but can be greatly improved with the help of some plugins. This post presents some of the existing alternatives for this purpose.

Where to use tables ?

If a web designer is asked about HTML tables, it is likely that the answer will be that HTML tables is something obsolete that should be avoided.

This answer is only partially true. For a long time, HTML tables where (mis)used to design the layout of web pages. It was not uncommon to find pages where tables were nested up to seven or eight levels deep, increasing the size of the HTML code and making it difficult to maintain.

Later, the combination of the use of <div> elements and CSS style sheets made the use of HTML tables for the layout of web pages to become obsolete.

But HTML tables are still the best option to display the kind of information that they were originally intended to hold: data tables.

Handling tables in WordPress

A default WordPress installation does not provide any help for the creation or edition of tables. To insert a table in a post or page, the editor must be switched to Text mode, and the HTML code of the table directly typed in. For instance:

And the resulting table is rendered depending mostly on the CSS in the theme used for the blog:

Name Age Address
John Doe 37 27, Main Street
Eleanor Smith 23 6, Independence Ave.

The text color and background color, the border type, etc. will be determined by the default values in the theme used.

With no additional software, the only way to change these values is to edit the post in text mode, and embed the required CSS in the table elements:

For instance, to change the background color of the first row, and add a border:

This modifies the rendering of the table:

Name Age Addresss
John Doe 37 27, Main Street
Eleanor Smith 23 6, Independence Ave.

The “MCE Table Buttons” plugin

The procedure of editing the HTML code and embed the CSS style every time we want to modify somehow the rendering of the table requires acquaintance with these formats, it is cumbersome, and it is error prone. Fortunately, these is a plugin “MCE Table Buttons” that adds to to editor toolbar a set of controls for the edition of tables.

The plugin is easily installed by selecting “Plugins > Add new” from the left sidebar, and performing a search for “MCE Table Buttons”. Once installed and activated, the toolbar shows a table icon that gives access to the table editing menu:

table-edit-button

When one option in the table editing menu is chosen, a popup form is displayed, allowing to modify the corresponding settings:

  • Table properties
    • width, height
    • cell spacing, cell padding
    • border size
    • caption
    • alignment
  • Row properties
    • Row type
    • Alignment
    • Height
  • Cell properties
    • width, height
    • cell type (Cell, Header cell)
    • scope (None, Row, Column, Row Group, Column Group)
    • alignment

The “TinyMCE Advanced” plugin

Instead of  installing the MCE Table button plugin, we might choose to install the “TinyMCE Advanced” plugin. This plugin is a Jumbo plugin that install 15 TinyMCE plugins, including the same “Table” TinyMCE plugin installed by the “MCE Table Buttons” WordPress plugin:

  • Advanced HR
  • Advanced Image
  • Advanced Link
  • Advanced List
  • Context Menu
  • Emotions (Smilies)
  • Date and Time
  • IESpell
  • Layer
  • Nonbreaking
  • Print
  • Search and Replace
  • Style
  • Table
  • Visual Characters
  • XHTML Extras.

Once installed, the plugin needs to be configured. Selecting “Settings > TinyMCE Advanced” in the left menu, the configuration window displayed allows the user to choose which buttons to show in the editor toolbar. Buttons are added, removed and rearranged by drag and drop.

There is also an option in this window to display a toolbar menu. The toolbar menu gives access to many of the functionalities of the plugin without adding the corresponding buttons, helping to unclutter the toolbar from too many buttons:

tinymce-config-toolbar

 

 

The next image shows the look of the editor toolbar, after adding the toolbar menu and some buttons to choose the font family, font size, text color, text background color, etc.

In this example, the table editing menu appears as one of the options in the toolbar menu, and has also been added as a button in the second row of buttons.

TinyMCE-Advanced-Toolbar

 

 

 Posted by at 5:24 pm

 Leave a Reply

(required)

(required)