Unfortunately, one important feature missing in WordPress is the ability to create tables in posts and pages. I am not talking database tables here, but the ability, for instance, to place text into two columns – See the picture below.

WordPress - Use of Tables

I have done some research, but the plugins I found were either very complex and/or provided a myriad of unwanted features. Really, the easiest way is to place HTML code into your post or page, but get me right, this is not a course on HTML programming. Most bloggers blog – that’s the purpose of running a blog. We don’t want to waste valuable time with writing code.

There are two simple ways of adding a table to a WordPress blog:

1. Use an HTML editor, create the table of your liking, and copy and paste the code.

2. Use (and possibly extend) the code as shown in the following.

Table with two columns (based on the image above):

<table width="100%">
  <tbody>
  <tr>
    <td width="49%" valign="top">&nbsp;</td>
    <td width="2%">&nbsp;</td>
    <td width="49%" valign="top">&nbsp;</td>
  </tr>
  </tbody>
</table>

You can take the above code and paste it into your post/page at the position where you want the table to reside, but you must do this in HTML editing mode, i.e. switch from “Visual” to “HTML.”

Note: I have tried to add code for cell spacing and cell padding, but it turns out, these settings have no effect. Instead I created two columns (see the “<td…” code sequence) of width = 49%. The 2% width column in between serves as a small gap between the columns.

When you switch back to Visual editing mode you should see the following:

WordPress Table

Now, feel free to fill the cells with any content, whether it is text or images. Just be aware that the cell width is limited, and you might need to adjust the size of your images according to your theme.

The following shows the extended code for three columns:

<table width="100%">
  <tbody>
  <tr>
    <td width="32%" valign="top">&nbsp;</td>
    <td width="2%">&nbsp;</td>
    <td width="32%" valign="top">&nbsp;</td>
    <td width="2%">&nbsp;</td>
    <td width="32%" valign="top">&nbsp;</td>
  </tr>
  </tbody>
</table>

Note: There are cases where you find that you are unable to place text after the table. If that happens, you will need to switch back to the HTML editing mode, and add a new line behind the table code such as:

:
</table>
&nbsp;
:

Note: “&nbsp;” represents the HTML code for a blank space/new line.

For more complex design that involve features such as cell merging, It would be prudent to use an HTML editor, and copy and paste the code.

Advertisement

Link-Assistant.Com SEO PowerSuite

SEO PowerSuiteSEO PowerSuite is the de facto standard software for anyone who promotes websites. Check out why this toolkit is THE best deal you can get if you need effective and proven SEO software.

There’s a definite science and a definite art to making websites rank #1, which is SEO, or search engine optimization. When it’s done right, your business gets found by thousands of new people daily — and secures you new levels of online profits and success.
Tagged with:
 

Leave a Reply

*

Anti-Spam Protection by WP-SpamFree