Web Design Experiments: How to Add a Table to Blogger Blogspot Post

Sunday, May 6, 2012

How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 1)

The latest visual Blogger's post editor is still lacking the "Insert Table" option. Adding this option (for example, like the one available in the Google Sites's editor of the page content) would be quite useful for the users, especially those how are unfamiliar with HTML coding. Until this option is added (if ever), the only way to insert a table in a Blogger post is trough the HTML Editor. But, writing manually an appropriate HTML code for a table, can be a tedious, time consuming task, even for simple tables like these:

Tables with borders

1x4 table

7x1 table

3x4 table

Tables without borders

1x4 table					6x1 table


3x4 table

Using Tables for Arranging Images

Adding two or more images in a Blogger post that are nicely aligned, using only the "Insert Image" option, can be quite frustrating. The solution is: create an appropriate table which will serve as a placeholder for those images.

First of all, make sure that the outer width the of desired arrangement will not exceed the width of the post text (as in Figure 1).

post text width
	outer width of the arrangement
	image 1		image 6	image 8
	image 1
	image 2	image 3
	image 4	image 5	image 7
Figure 1

If the outer width of the arrangement approximately equals the post text width, which is the same for every post, or if you don't mind if the whole group of images is aligned at left, then you may skip the Step 1.

Step #1: Adding the initial code in the HTML editor in the Blogger's post editor

If the outer width of the arrangement is less then the post text width, then it would be nice if the whole group of images is centered. Open the HTML editor, add a few empty lines below the text where you what to place the a group of images and, copy and paste the following code:

<table style="text-align: center; width: 99%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">
INNER TABLE
<br>
</td>
</tr>
</tbody>
</table>

The visible result after Step #1:

INNER TABLE

Tip #1: Replace, if necessary

the value 99 in 99% with a smaller one (or replace 99% with, for example, 500px, 650px - the values expressed in % do not function well in some browsers); for the basic example that follows, this value is 90%
the value 0 in border="0" with 1, 2 or more if you want a visible outer border for the whole group of images
top with middle or bottom

Step #2: Generating the code for the INNER TABLE

The Basic Example

Here is a group of six images, all with same width and height, arranged in 2 rows and 3 columns.

Note: Each image is placed in cell of a table with 2 rows and 3 columns. A tiny, light-grey colored border with a shadow should be visible around every image in the above group. But these borders are not borders of any of the used tables. They are automatically added around every image in all off the posts in this blog. If you are using a Blogger template, go to: Blogger's Template Designer >> Advanced >> Images to see these settings.

In this step, still working in the HTML editor, the text INNER TABLE was replaced with the following code:

<table style="text-align: center; margin-left: auto; margin-right: auto;">
<tr>
<td>IMAGE 1</td>
<td>IMAGE 2</td>
<td>IMAGE 3</td>
</tr>
<tr>
<td>IMAGE 4</td>
<td>IMAGE 5</td>
<td>IMAGE 6</td>
</tr>
</table>

The visible result after Step #2:

IMAGE1	IMAGE2	IMAGE3
IMAGE4	IMAGE5	IMAGE6

The above code, with the exception of description style="text-align: center; margin-left: auto; margin-right: auto;" , was generated with one of the simplest online HTML code generators: Multitoolbox's Table generator and editor.

Of course, instead IMAGE1, IMAGE2, etc, you can enter any text.

Step #3: Adding the images

The Basic Example - continued

Now, working inside the visual editor or inside the HTML editor, select IMAGE1 and click on the "Insert Image" icon to add the image that you want to appear instead of IMAGE1. Repeat this for IMAGE2, IMAGE3, etc. If you haven't used this option before, follow this elementary tutorial.

Other simple online HTML table code generators

Here is an example of a group of four images arranged in one row.