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,

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 »

11 comments

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. @Ayush Chand

    Yeah i too request fr dat.. :)

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

    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. 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
  9. Good tutorials there. Easy to use and adapt to.

    Thank you for sharing them.

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

    ReplyDelete
  11. thanks for this table creating idea

    ReplyDelete