How to Arrange Uploaded Pictures in a Table on Blogger

• 
  

 
 
 
 
 

Google Blogger doesn't have a tool to let users quickly lay out images inside a table. To arrange your pictures in tabular format, you must edit the post in HTML mode and code the table manually. Use tables to display pictures that you need to show side by side, such as with before-and-after comparisons or an instructional article.

1. 1.

   Log in to your Blogger account. Check if you are using the updated Blogger interface or the old one. The new interface has a white-colored theme, an orange pencil button for the "new post" link and a drop-down menu next to the "post list" icon. The old interface has blue links and a blue "new post" button. Click the pencil icon under the blog title if you use the new Blogger interface. Otherwise, click "New Post" in the old interface.

2. 2.

   Click "HTML" in the new interface or "Edit HTML" in the old interface.

3. 3.

   Enter the HTML table code as follows. In this example, the table is aligned to the center, has a 1-pixel space between cells and a gap of 5 pixels between the cell wall and cell content.

   <table align="center" cellspacing="1" cellpadding="5"><tbody><tr><td></td></tr></tbody></table>

4. 4.

   Click between the cell tags <td> and </td>.

5. 5.

   Add the HTML image tag as follows:

   <img src="" alt="" />

6. 6.

   Click between the quotations in the image tag. Type a text label and the exact URL of the first picture you want to display in the table as follows.

   <img src="image url here" alt="Image text here" />

7. 7.

   Insert another pair of <td> and </td> tags after </td> as shown below. This creates another table cell next to the first one.

   <table align="center" cellspacing="1" cellpadding="5"> <tbody> <tr> <td><img src="image url here" alt="Image text here" /></td> <td></td> </tr> </tbody> </table>

8. 8.

   Enter the URL of the second picture in the second table cell. The code should now look similar to:

   <table align="center" cellspacing="1" cellpadding="5"> <tbody> <tr> <td><img src="image url here" alt="Image text here" /></td> <td><img src="image2 url here" alt="Image2 text here" /></td> </tr> </tbody> </table>

9. For making next row in the table just copied same code and paste the code to next line after hitting enter key.

10. 9.

    Click "Preview" to see how the table of images appears in your blog. Click "Save" in the new interface or "Publish Post" in the old interface to save the changes.

Note: In table if some images showing very small than change the image.