Tag Archive for Guides

Adding Tables To A Post

We occasionally get asked about how to create tables in posts like this

column 1 Coumn 2 column 3
row 1
row 2
row 3
row 4

It is easier than it looks, you could create your table in your favourite word processing package and just copy and paste it in to your blog, but this will probably give you some strange results with fonts & text sizes that may break in different browsers.

The more elegant solution is to create the table manually so you get just the bits of code you need.

Unfortunately there is no easy way to do this in the in built editor on a wordpress.com site so you have to hand craft the code, but don’t panic this is not as daunting as it sounds.

To create the table above I used this HTML code:

<table width=”90%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td>column 1</td>
<td>Coumn 2</td>
<td>column 3</td>
</tr>
<tr>
<td>row 1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>row 2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>row 3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>row 4</td>
<td></td>
<td></td>
</tr>
</table>

 

To get it to work and so the code does not look like it does above, you must paste it in to the HTML tab of the create / edit post or page window. If you don’t then you will just see the code as it is above rather than the table at the top of the page.

A bit of information about the code to help you understand it better and to help you adapt it for your requirements.

<table width=”90%” cellspacing=”0″ cellpadding=”0″> <- this sets your table up to be 90% of the width of the page with no spacing or padding around the cells.

I always make the table less than the width of the page as it looks nicer, make sure you use a % and not pixel width. Pixel (a number without the %) is a set width and if you change your theme at any time the width of the table could be bigger than the width of the page and it will break and look ugly.
<tr> <- this tells the table it is a new row
<td> <- this creates a new column, what you put in here will show up in the first cell as long as it is before this -></td>
</tr> <- this closes the row

All you do is repeat the code for each row you need.

The number of columns on each row needs to be the same other it will start to cause problems.

Feel free to copy, adapt and use the bit of code above or you could ask Google to find you a HTML Table Generator.

You can of course go it to great detail with your tables and set rows to different heights or columns to different widths, add padding etc. You can find out how to do this by asking google

  • Newsletter sign up

  • New posts sign up