How to Create a Table in HTML for your Blog Posts

Last updated on 28 December 2024

This post may contain affiliate links. If you make a purchase with one of these links, I recieve a small commission at no additional cost to you. Read the full Affiliate Policy.

One of the things that I always wondered when I was new to blogging (okay, and until recently) was how bloggers managed to get several images in their blog posts, all lined up neatly across the post, rather than just down the post. It wasn’t until really this past year or so that I discovered the wonders of creating a table in HTML. With a table, you can insert images or text straight into each ‘box’ and everything will line up beautifully. Unsure what I mean? Here a few examples:

Example 1: Table with text only

“Hello Table!

You’re so handy!”

“Why, thank you! I aim to please.”

 

Example 2: Table with images only

 

Example 3: Table with images and text

Hello Image. You’re on the right of this table column.

As you can see, all those images are lined up beautifully, and yet are still treated as separate images. This is really handy if you have a lot of photos that you would like to share, but would rather them smaller than the full width of your blog post area, and don’t want to fluff around with joining the multiple images together with another program like Photoshop or [insert your favourite photo editing website/software here]. So, how do we create this table? Easy peasy.

Whether you’re working with Blogger or WordPress (or another hosting platform), there will be an option to type out and create your blog post in HTML form, rather than in ‘normal’ form (in Blogger it’s called ‘Compose’). Select this option. Now, it may look scary, but I promise it’s not. Without deleting any of the coding that’s already there, creating your post, or moving it around, find where you want to place your table.

If you struggle with this (seriously, coding just looks like jimble jamble – probably not a saying, but let’s make it catch on, okay?), then head back to the ‘normal’ view of creating your post, and type something like TABLE HERE in the text line where you want to place your table. Then head back to the HTML, and find TABLE HERE. You can delete that now. In it’s place, copy and paste this code:

<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>

To understand what we’re looking at here, here’s a bit of break down of the code:

<table> and </table> indicate where the table will begin and end. When you see a / in coding, that means stop, or the end. <table> begins the table and then </table> ends it. See bold below.

<tr> and </tr> create the rows. In the coding below, there is just one row. Again, it begins with <tr> and finishes the row with </tr>. See blue text below.

<table>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

<td> and </td> show each column, or box across your table. Right now, there are two different columns (see red coding above). You can tell this because there is one <td> tag, followed by a closing </td>, and then the exact same again. When adding text or images into your table, you’re going to be inserting or typing it between the column tags <td> and </td>.

Whenever you start a row or column (<td> or <tr>), you must close it with the same tag, adding the / to the beginning, within the < >.

Now that you know the elements of a table, you can fill it in! Type in your text, or pop your image in where you want it to go. For example, if you want a picture in the top row, on the right hand side, and writing on the left (like the example 3 above), you would do this:

<table>
<tr>
<td> TYPE TYPE TYPE HERE </td><td> INSERT IMAGE HERE </td></tr>
</table>

Obviously you would actually insert an image there, which you can do from Blogger or WordPress, or you can use a website like Photobucket to upload your photo to, and then find the HTML code for that image, and paste it in there. If we were to look at this in the normal view, it would look like the 3rd example at the beginning of this post.

Say you wanted to have two, or three,  rows, instead of just one. All you would need to do is add this following code between the last </tr> and the </table>.

<tr>
<td> </td>
<td> </td>
</tr>

Now you have another row (the blue tags above), and two more columns or boxes also (indicated with red above). If you want more columns across your table, you would add another set of:

<td> </td>

…to your coding, creating something that looks like this, which now has two rows, each with three boxes/columns each:

<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

In the normal view, this table, with data added between the <td> </td>, would look like this:

To see what this looks like in action, head on over to the DIY and Craft page, or the Book Reviews. In those pages, I’ve used this technique or table in HTML to create the page, with multiple images and links, which look tidy and not all over the place.

I hope this tutorial and these tips have helped you and you now know how to create a table in HTML!