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>

98 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
    Replies
    1. Web Design Experiments: How To Add A Table To Blogger Blogspot Post - The Easier Way (Part 1) >>>>> Download Now

      >>>>> Download Full

      Web Design Experiments: How To Add A Table To Blogger Blogspot Post - The Easier Way (Part 1) >>>>> Download LINK

      >>>>> Download Now

      Web Design Experiments: How To Add A Table To Blogger Blogspot Post - The Easier Way (Part 1) >>>>> Download Full

      >>>>> Download LINK WR

      Delete
  2. This is very elegant blog with great & significant information.Web Design Company

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

    ReplyDelete
  4. 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
  5. 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
  6. This comment has been removed by the author.

    ReplyDelete
  7. Informative article on responsive website design!!! With the expansion of mobile phones, most of us access internet from our mobile and other portable gadgets. Having responsive website for your business will help you to target customers widely.
    expert of professional seo services companies in bangalore

    excellent web designer service company in bangalore

    ReplyDelete
  8. Really an interesting and amazing post. Thanks for sharing this wonderful informative article here. I appreciate your hard work.Website Designing Company Bangalore | Web Development Company Bangalore

    ReplyDelete
  9. Hi,

    Thanks for sharing a very interesting article about How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 1). This is very useful information for online blog review readers like this. This is very useful information for online blog review readers like this.

    From,
    WondersMind,
    Web Design Company Bangalore

    ReplyDelete
  10. I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. Webdesign

    ReplyDelete
  11. I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. Webdesign

    ReplyDelete
  12. Merhaba canım,

    Blogunuzu Çok Seviyorum ... Günlük Blogunuzu Görüyorum, Benim İçin Çok Yararlı.

    MEZ BİLİŞİM Dijital Ajans kullanıcı deneyimini ve dönüşümlerini geliştirmeye yardımcı olan en iyi özel SEO, web tasarım ve dijital pazarlama hizmetlerini sunmaktadır.

    Burayı ziyaret edin - https://www.mezbilisim.com/

    ReplyDelete
  13. Nice post!
    Looking for best android app development services in UK USA then visi at 4 Square Logic IT Solutions is one of Top android mobile app development company who provides you best services and work as per your own requirements.

    ReplyDelete
  14. There are certainly a lot of details like that to take into consideration. That is a great point to bring up. I offer the thoughts above as general inspiration but clearly there are questions like the one you bring up where the most important thing will be working in honest good faith. I don?t know if best practices have emerged around things like that, but I am sure that your job is clearly identified as a fair game. Both boys and girls feel the impact of just a moment?s pleasure, for the rest of their lives.

    https://lifdo.blogspot.com/2019/07/lifdocom-pakistans-no-1-online-shopping.html

    ReplyDelete

  15. There are certainly a lot of details like that to take into consideration. That is a great point to bring up. I offer the thoughts above as general inspiration but clearly there are questions like the one you bring up where the most important thing will be working in honest good faith. I don?t know if best practices have emerged around things like that, but I am sure that your job is clearly identified as a fair game. Both boys and girls feel the impact of just a moment?s pleasure, for the rest of their lives.
    https://awahconnections.blogspot.com/2018/05/work-from-home.html?showComment=1564388685610#c400164342334660789

    ReplyDelete
  16. This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post Web Design Agency

    ReplyDelete
  17. https://webdesignexperiments.blogspot.com/2012/05/creating-patterns-and-backgrounds-with_05.html?showComment=1564640300621#c6892815388866278949

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. best different kind of html tables generator can be found here https://htmlcodegenerator.blogspot.com/2019/09/html-table-generator.html

    ReplyDelete

  20. https://intelicle.com/web-design-nottingham/
    Intelicle offers dynamic and cutting-edge web design and development services that are ideal for any project with bespoke and
    complex requirements. Our team develops mobile apps, web portals and e commerce solutions that are easy to maintain and use.
    Furthermore, our SEO and digital marketing team will help you attract your target audience by establishing your business as a
    unique brand.
    web design services
    web development services
    web design services in UK

    ReplyDelete
  21. I am absolutely for this article and simply need to infer that you are truly working superbly. As a Web optimization master, I am dazzled with your compositions. seo service singapore

    ReplyDelete
  22. Keep the balls rolling!! Nice posts you have given for us.
    web development service providers

    ReplyDelete
  23. The rules are productive as, I am the Web optimization master that one needs as every one of the clients ought to welcome the post. seo services delhi

    ReplyDelete
  24. I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy. Web development belize

    ReplyDelete
  25. Thnaks for sharing this content. Adsandurl is one of the best dynamic web designing services in india. Also Our dynamic web designing services in delhi is great. Also our dynamic website development services and dynamic web design services is really excellent. Along with this our dynamic web design company will give you dynamic web design. wanna get an amazing dynamic web development. Wanna know more about create dynamic website and dynamic website visit here.
    dynamic web designing services in india

    ReplyDelete
  26. I am continually amazed by the amount of information available on this subject. What you presented was well researched and well worded in order to get your stand on this across to all your readers.
    web development namibia

    ReplyDelete
  27. Attractive, post. I just stumbled upon your weblog and wanted to say that I have liked browsing your blog posts. After all, I will surely subscribe to your feed, and I hope you will write again soon! κατασκευη eshop

    ReplyDelete
  28. You made such an interesting piece to read, giving every subject enlightenment for us to gain knowledge. Thanks for sharing the such information with us to read this... Web Designing

    ReplyDelete
  29. Thank you so much for this nice information. about the Web Design Islamabad,
    Web Design Islamabad

    ReplyDelete

  30. Hi, this article is really helpful! I also developed different kinds of repsonsive html table generator for blogger posts which helps users to generate HTML responsive table code without html knowledge https://htmlcodegenerator.blogspot.com/2019/10/html-table-generator.html

    ReplyDelete
  31. Web advancement is regularly viewed as simple yet that is generally the front-end part. The back-end part can turn out to be incredibly perplexing relying upon the sort of task you're making.Web Development Courses in lahore

    ReplyDelete
  32. Thanks For Sharing Such An Informative Blog On Website Designing Company ! Really Appreciated Man , Looking For More Updates. The Author Of This Blog Has Very Very Informative Mind, He Can Make More And More Article Like This .Have A Look At Our Services Also - Website Development Company

    ReplyDelete
  33. Wow, this is really interesting reading. I am glad I found this and got to read it. Great job on this content. I like it. Ghana web designers

    ReplyDelete
  34. Thanks A Lot For Sharing Such An Information Regarding Website Designing Company !! Looking For More Updates - Have A Look At Our Services Also - Website Development Company !! The Author Of This Blog Has An Very Very Informative Mind .

    ReplyDelete
  35. When your website or blog goes live for the first time, it is exciting. That is until you realize no one but you and your. Website redesign

    ReplyDelete

  36. If you have a website and want to get designed it then visit us now. On the other hand this is rellay informative article that you have shared with us.

    Web Page Design San Antonio
    Websites Design San Antonio


    ReplyDelete

  37. If you have a website and want to get designed it then visit us now. On the other hand this is rellay informative article that you have shared with us.

    Web Page Design San Antonio
    Websites Design San Antonio


    ReplyDelete

  38. Best seoSingapore

    If you are looking for SEO service in Singapore, you come to the right place. We offer the best SEO (search engine optimization) service in Singapore at an affordable price. Get the cheapest SEO services with us in Singapore.

    to get more - https://oliveasia.com/search-engine-optimization/

    ReplyDelete
  39. Keep up the good work , I read few posts on this web site and I conceive that your blog is very interesting and has sets of fantastic information. web design conversion

    ReplyDelete
  40. thank u for sharing such a unique article... do have a look on Digital Marketing Agency in Bangalore India for professional Search Engine Optimization.
    Visit digitalmarketingseo.in

    ReplyDelete
  41. nice blog , android application development company surat , i am also work of this type of blog. thanks of sharing information.

    ReplyDelete
  42. We fully appreciate the decisive and primordial character of the good realization of the memories. This is the reason why a special and rigorous procedure is put in place. You will thus obtain regular monitoring of your thesis by working in collaboration with your tutor. Indeed, if you have not submitted a plan or problem to your tutor, the latter will have to make a proposal to you within a defined period of time.
    https://www.assignment-homework.com/dissertation/dissertation-writing-services/





    ReplyDelete
  43. I have read your blog really great and knowledge able Post.thank you so much for this waiting for Next blog.
    Web Design Course In Kolkata

    ReplyDelete
  44. I have read all the comments and suggestions posted by the visitors for this article are very fine,We will wait for your next article so only.Thanks! Webdesign SEO Antwerpen

    ReplyDelete
  45. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much. Webdevelopment

    ReplyDelete
  46. Website becomes mandatory for business nowadays. Website creation is easy and useful to develop business in digital world. To create website, buying hosting is very important, before buying hosting read reviews about top web hosting companies, ipage hosting reviews, siteground hosting review, wp engine hosting review, etc

    ReplyDelete
  47. Thank you for this article, Its really helpful for us. We are the Best Interior Designing Studio in Bahrain. Cubic Interiors

    ReplyDelete
  48. Thank you for this article, Its really helpful for us. We are the Best Interior Fit Out Contractor in Bahrain. Cubic Interiors

    ReplyDelete
  49. BrainCandy is one of the leading Web Design Company as well as an SEO Company Based in India. We have been providing a full range of web design and marketing services. Our goal is to find the path to your business success.
    Please keep sharing this types of blog, "Web Design & Web Development Company In Mumbai, India"

    ReplyDelete
  50. THANK YOU ADMIN JI, I LEARNED THAT HOW TO ADD RESPONSIVE TABLE IN BLOGGER POST YOUR ARTICLE IS VERY INFORMETIVE, I AM IMPRESS YOUR WEBSITE, I TOLD THESE WEBSITE MANY MY FRIENDS, LOVE YOU ADMIN JI

    ReplyDelete
  51. hank you so much. This blog is really helpful for me, I’m lucky to find out this informative blog for more refference
    kindly visit our post

    Web development company in chennai

    ReplyDelete
  52. This blog is very helpful and informative for everyone.

    ReplyDelete
  53. Thank you for very informative article Thanks Buddy

    If you are looking for web development services, look no further. Branches Marketing Solutions are a top-rated website development company. We offer custom web development services that meet your goals & budget. Contact us for more info.

    ReplyDelete
  54. We have sell some products of different custom boxes.it is very useful and very low price please visits this site thanks and please share this post with your friends. indian visa

    ReplyDelete
  55. Appreciate it for this great post. I'm glad I found this web site on google. Foreign visitors should apply for Turkey visa online. Online Visa provides fast secure visa services.

    ReplyDelete
  56. You have written an excellent blog. I learned something new from your Blog. Keep sharing valuable information.
    Oracle Database Backup and Recovery
    Oracle Backup And Recovery

    ReplyDelete
  57. This post is so helpfull.Keep updating with more informaion
    Benefits of RPA
    RPA Training

    ReplyDelete
  58. Thank for sharing such a nice post.i think this post is very helpful and knowledgeable.i like it so much.Please visit Office Furniture Miami

    ReplyDelete
  59. Fantastic work.. I appreciate it. The travelers around the world who wish to travel to Azerbaijan need to apply for Azerbaijan evisa through e visa application. Get your visa with super fast processing with 24/7 assistance.

    ReplyDelete
  60. This comment has been removed by the author.

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. This is a topic that’s near to my heart… Many thanks! Where are your contact details though? E Visa for India is you can obtain online without the need of visiting the Indian Embassy and Consulate. India business visa cost depends on your country, you can check india visa site online. You can apply for india business visa registration via mobile phone, computer or desk.

    ReplyDelete
  63. This comment has been removed by the author.

    ReplyDelete
  64. Thank you for sharing very informative information and check it our services never fail to disappoint but do just the opposite and bring the joy
    Content writing services Delhi
    Seo Services Delhi

    ReplyDelete
  65. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article Ac Repair in Mumbai

    ReplyDelete
  66. To be a Xamarin developers, you can take an online course on Pluralsight and LinkedIn Learning. This is a three-month course that helps you learn and enhance your skills. You can also get free tools services and access free training through Visual studio Dev essentials.

    ReplyDelete
  67. You have a unique imagination and have come up with some of the most creative ideas we’ve ever seen.You can also visit my website
    html table generator

    ReplyDelete
  68. Amazing post! Now foreign travelers can apply for an Indian e-tourist visa through an online e visa website with some simple steps.

    ReplyDelete
  69. Good evening everyone, your site looks amazing and everything is good and you post useful information. Thank you.. Lot of people query Can we apply for an e-tourist visa for India? Yes India is open for tourism, You can apply for an online India visa and you can read all news related to India visa on ourIndia visa page.

    ReplyDelete
  70. A home buying guide for first-time buyers with current information and calculators and every step of the buying process. Buying Home in Canada

    ReplyDelete