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:
THE REST OF THE TABLE CODE WILL GO IN HERE
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.
To create another row of cells, just repeat this HTML code again.
Putting it all together
<table cellspacing=”20″ align=”center”>
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.
Thank you! Have pinned. x
Oh! So this is how I can get my instagram posts to be all lined up and centred!?
Thank you – I had thought this week that I would have to work out how to do this – and – as ‘luck’ would have it – you have already worked it out!
Exactly! I wanted to use it on some new pages but it will work for your instagram posts too. You’re welcome!
Thanks really handy will have to remember this one. Have book marked it.
Thanks so much!
Brigid | The Inspired Notebook says
I’m so glad I discovered your blog via Facebook. This is exactly the info I need for my own blog and bookshop site. and a google search some time back didn’t really help at all. Perfect that I stumbled across this today. Thankyou!!
You’re welcome, Brigid! Glad to help
Deb @ Home life simplified says
Brilliant tutorial as always – pinned!
Just wanted to say thank you for this tutorial. Its not perfect but I created a basic table to show case the birthday party ideas I have had. Will look at the next post about tables when I get time. Thanks for showing how it works and sharing the how tos.
You’re very welcome! Glad it helped
Lia Angelina says
thanks for the tutorial!
umm, can you make tutorial about like automatic table? like where we can fill in form and then the data will automaticly appered ??? thanks for helping!