Tables are an old school way of displaying information on a web page. I’ve used tables since I started working with HTML back in 1994.  With the creation of CSS, tables quickly became an old way of displaying columnized data. However, it is still one of the most effective ways of displaying columns and tables in a web page.

Unfortunately, when it comes to WordPress there isn’t a table function built into the text editor that allows you to quickly insert a table in a post or page.  Sure there are some plugins for inserting tables into posts, but many of them are just to clumsy to use. So, first let’s look at how to create a table in WordPress manually.

In the WordPress text editor, you’ll find two tabs in the top right corner: Visual and Text. You’ll want to be in the Text tab to insert the codes needed to create a table. Once in the Text tab, locate the place in your document that you want to insert a table. Copy and paste or type the following lines of code into the Text editor.

  1. <table border="0">
  2. <tr>
  3. <td></td>
  4. <td></td>
  5. </tr>
  6. <tr>
  7. <td></td>
  8. <td></td>
  9. </tr>

 

Unfortunately when you view this table in a post or page, you’ll notice the table is left justified. Trying to highlight the table to use the left, center, and right justification buttons will only highlight the text or data in the table, not the table itself.

A B
C D

So how do you center the table between the left and right margins of a post?

Changing the table command in the first line of code to include an align=center will allow centering of the table between the left and right margins in most cases.

<table border="0" align="center">

Which produces the following result.

 

A B
C D

If the CSS in your WordPress template is formatting tables you may also have to edit the CSS style template to allow for centering of tables. Here are a few formatting tricks when the align=center does not work.

Check the CSS template for any table formatting that is changing the table. If it is, try adding margin:0 auto; to the CSS table formatting.

Centering Text and Images in a Table in WordPress

Unfortunately sometimes the data in the table will not line up properly either vertically or horizontally. Using the align=center technique in either theortags should solve this problem for horizontal, left to right centering.

To line up data in a table vertically, use the following technique.

Add the following styling code in either the td or tr tags

<td style="vertical-align: top;"><td style="vertical-align: middle;"><td style="vertical-align: bottom;">   

 The above commands should vertically align data in a table.

 Hopefully, the above tricks will help you center text and images in tables in WordPress.

 

Tagged with:

Filed under: TutorialsWeb Site Tasks

Like this post? Subscribe to my RSS feed and get loads more!