Make Colorful Tables in BlogSpot


blogspot tablesBlogSpot blogs are rich with options that gives you freedom to design and create whatever you want using CSS and HTML. Blogger post editor doesn't has the option of creating HTML tables but no worries we can make tables with rows and columns ourselves and not just dull grey tables, fully customized tables with background colors and smooth and neat edges and borders. This  tutorial will be divided in two parts for simplicity. The first part will give you basics of understanding the structure of tables and the second part will let you customize the tables. After reading both parts you will be able to create MS Excel type style sheets and much more.

UPDATE: Part 2 has been publish: Change Border colour and Border size of HTML Tables

Live Demo

How To Create HTML Tables For Blogger Blogs?

This is how a simple table code with 2 rows and 2 columns looks like,

<table border="1" cellspacing="0" cellpadding="2" width="400"><tbody>


   <tr>
      <td>Row 1, Column 1</td>

      <td>Row 1, Column 2</td>
    </tr>

    <tr>
      <td>Row 2, Column 1</td>

      <td>Row 2, Column 2</td>
    </tr>


  </tbody></table>

 

This code will create the following table,

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Now lets understand some basics of this HTML structure:

Understanding every basic is not required for you as bloggers so I would be sharing things that may not create confusion and yet prove really helpful.

(1)  The starting and ending brown highlighted areas shows the start and end of your table structure. Where I have set border="1" and if you don't want borders then set border="0". There you can also see cellspacing and cellpadding. Just let let as it is. To set width of the table you will need to control width="400"

(2)  The tag <tr> indicates a row and tag <td> indicates a column. In the above table you can see two columns in a single row. This is because I have added two <td> tags inside <tr> and </tr> . This part of code is represented by,

<tr>
      <td>1</td>

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

 

If you wish to add 3 columns to a single row then we would add <td> thrice ,

<tr>
      <td>Column-1</td>

      <td>Column-2</td>

       <td>Column-3</td>
    </tr>

What if you want 2 Rows and each row contains 4 columns? Here goes the complete code,

<table border="1" cellspacing="0" cellpadding="2" width="400"><tbody>

<tr>
      <td>Column-1</td>

      <td>Column-2</td>

       <td>Column-3</td>

           <td>Column-4</td>


    </tr>

<tr>
      <td>Column-1</td>

      <td>Column-2</td>

       <td>Column-3</td>

       <td>Column-4</td>


    </tr>

  </tbody></table>

Two <tr> tags because we created two rows and 4 <td> tags in each row because we want 4 columns. The result would be,

Column-1 Column-2 Column-3 Column-4
Column-1 Column-2 Column-3 Column-4

 

That's all for this post. The next post will take you a level further in letting you understand how to add backgrounds to each table cell and I am sure you will like it more.

You will also like,

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

19 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Hello Mohammad, a request! Can you please write a post on how to style the way posts are shown in the home pages and how to make the post image thumbnails look good just like your blog?

    ReplyDelete
  2. Good Post. i can't understand cell spacing and padding ?

    ReplyDelete
  3. I have a lot of blogs and I am also thinking of turning them all into dofollow blogs. It helps to have good comments and get vistitors into my blogs.

    web hosting

    ReplyDelete
  4. @ Mohmd, I'm also requesting for the same tutorial as Ayush and Ankit. I'll really prefer only to show a snippet of posts on my homepage and allow readers to 'read more' just like how you homepage is organized. But I'll like to keep it simple just the way it is now. I hope this doesn't mean I've to opt for a new template? Is there a tweak to ensure only a snippet is visible on the homepage?

    ReplyDelete
  5. Amazing Article Man,
    I Will Surely Use It In My Site http://MaherHackers.com

    ReplyDelete
  6. Hi Mohammad!
    A wonderful blog and always very helpful article!
    I often put links to your material on his blog.
    Tell me please - how to close the indexing of links "more" (read more)
    With respect and gratitude!
    Sergey

    ReplyDelete
  7. @Ayush @Ankit

    Ok brothers. Request accepted. I will be writing on it soon. :>

    @hari
    Cellspacing it the total space/gap between one cell and another. Cellpadding is the gap between text and borders of a cell. :)

    @Felix
    I got your point buddy and I will post an easy tutorial on how to display neat images on summary.

    @Retliff
    Most welcomed buddy. For read more keep it as it is as it wont effect rankings because it is an internal link however you may wish to nofollow the tags and label links. Please read this:

    http://www.mybloggertricks.com/2011/08/please-add-nofollow-tags-to-all-blogger.html

    http://www.mybloggertricks.com/2011/08/nofollow-blog-comments-save-blogger.html

    ReplyDelete
  8. nice...



    go here

    www.mediafirerockz.blogspot.com
    or
    www.mediafirerockz.co.cc


    for free Hd movies,mediafire downloads,games,software

    ReplyDelete
  9. Thank you for sharing these stuff. I'm very new to the blogger concept and I have no idea about codes or anything like that. But I was able to make tables following your instructions.

    ReplyDelete
  10. I like to make friends with you,haha.


    ----------------------------------------------------------------------------------------------------------------------------------------
    Rc Helicopter|Mini Rc Helicopter|Rc Helicopters|Rc Helicopter Reviews

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

    ReplyDelete
  12. I'll put this to work. I just red a post on how to create a table on a post without html coding. But this one seem cool. If it isn't too problematic, then i'd stick to it.

    ReplyDelete
  13. Good tutorials there. Easy to use and adapt to.

    Thank you for sharing them.

    ReplyDelete
  14. I change the background color to many colors..but the background is alway white? is there an explanation for this?

    ReplyDelete
  15. This is so creative and still incredibly adorable blog. Great !!Fire Engine Kids Bed

    ReplyDelete
  16. Luciana is one of the most promising music artists in UK. She got a number of trendy hits in her name within a short period of time. Her latest works such as I’m still hot, U B The Bass were instant hits at the market. Being a great fan of her, thanks for sharing more details about her. vaporizer australia

    ReplyDelete
  17. thanks for this table creating idea

    ReplyDelete