Make Colorful Tables in BlogSpot

Pin It

BlogSpot 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,

• How to create Text Boxes?

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

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 »

Thanks for making this possible! Kindly Bookmark and Share it.