Create a HTML Table in your Blog Post

 

Do you want to create a blog post with a pretty list of items and pictures, all lined up nicely and not wrapping the text around the pictures? I wanted to the other day. I found out I needed to create a Table. I know how to do that in word processing documents but I have never worked out how to do it on a blog post… until now!

How to Create a HTML Table in a Blog Post

There may be more than one way to do this but this way is to use some HTML code to create the table. Then you can add your text and pictures.

You need to add the HTML code into the HTML tab of your blog post editing screen – look in the top right on WordPress or the top left on Blogger.

Let’s grow our table step by step:

cellspacing=”20″ align=”center”>

<tbody>

THE REST OF THE TABLE CODE WILL GO IN HERE

</tbody>

</table>

Start with the code above to set up the Table outlines. Two lines go at the start to open the table, and two lines go at the end to close off the table.

The cellspacing controls how far apart your boxes (or cells) will be. I have 20 pixels between mine in this code, but if you leave that out all together there will be no space between them.

The align code decides where the table is aligned within the page. I like things “center” but you could use “left” or “right” instead. It won’t change the text alignment within the individual cells, just the alignment of the entire table.

Creating the cells

The cells are created in rows. <tr> goes at the start of a row and </tr> at the end of the row. Each cell has <td> at the start and </td> at the end. The cells will be the size of the largest thing you put in them. So if you put a picture in that is 125×125 pixels then the cell will be 125×125 too.

<tr>

<td>First cell</td>

<td>Second cell</td>

<td>Third cell</td>

</tr>

To create another row of cells, just repeat this HTML code again.

Putting it all together

<table cellspacing=”20″ align=”center”>

<tbody>

<tr>

<td>First cell</td>

<td>Second cell</td>

<td>Third cell</td>

</tr>

<tr>

<td>First cell</td>

<td>Second cell</td>

<td>Third cell</td>

</tr>

</tbody>

</table>

This code will create a table with 2 rows of three columns or cells. Like this:

 

First cell	Second cell	Third cell
First cell	Second cell	Third cell

When I paste that code into my HTML tab to create the table, this is what it will look like in the Visual Tab.

 

Then I can edit it in the Visual Tab just as if I were editing any blog post. The dotted lines let you see where the cells are but they won’t appear in the published post. I can delete the words and change them to other words. I can delete the words and change them to picture – just by adding a picture as I would in any other post. Here’s some pictures and words added:

 

How to Blanket Stitch	Making a Text Button	Clothes Peg Planes

 

The pictures in this table are 150×150 and the text has been made bold and centred just as you would make any text bold and centred.

These are the basics of creating your table. Look out another day soon for more about tables: how to add lines, how to create headings and more.