Pages

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 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.


The Code for INNER TABLE:
<table>
<tr>
 <td>IMAGE1</td>
 <td>IMAGE2</td>
 <td>IMAGE3</td>
 <td>IMAGE4</td>
</tr>
</table>

11 comments:

  1. I am searching for this from so long a day and finally I got it.Thanks for sharing the information with us and its a great blog.
    Ecommerce Coimbatore

    ReplyDelete
  2. Talk about or Provide your information, designs, recognizable, 3d designs, performs of art, images, etc., earn money, and get used worldwide. Sign-up via e-mail or your group team group group group group media problem here: http://www.ehuub.com/login by selecting category "GRAPHICS, DESIGN, AND MULTIMEDIA", thank you!

    ReplyDelete
  3. This is very elegant blog with great & significant information.Web Design Company

    ReplyDelete
  4. Best SEO Services Affordable Packages and Prices - SEO Experts in coimbatore, chennai Tamil Nadu, India Search engine Optimization Company in india

    ReplyDelete
  5. They wil do attractive webdesign will go a long way in keeping customers interested in your web site, and ultimately your brand.
    website designing companyy bangalore | wesite development company bangalore

    ReplyDelete
  6. I am a regular user of your post, this one also was very interesting and well written. keep sharing the great work
    Web Design Companies Bangalore | Website Design Companies Bangalore

    ReplyDelete
  7. Its become very easy for me to add tables in my all Medical Marketing blogs. I was searching for this since a long time and thanks for this blog I got my solution. Keep up the great work and also write a post about how to add facebook and twitter buttons in blogpost?

    ReplyDelete
  8. It is a great sharing me...I am very much pleased with the contents you have mentioned. I wanted to thank you for this great article. I enjoyed every little bit part of it.Web Design Sydney

    ReplyDelete