--> Make Colorful Tables in BlogSpot | Experience Lab - Online business creation and development guide for bloggers and startups

Make Colorful Tables in BlogSpot

BlogSpot blogs are rich with options that gives you freedom to design and create whatever you want using CSS and HTML. Blogger post editor d...

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,

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Make Colorful Tables in BlogSpot
Make Colorful Tables in BlogSpot
http://lh6.ggpht.com/-h1llKFC4owg/Tmdq_VttVAI/AAAAAAAAE84/gOYHe8Cd6-s/image%25255B11%25255D.png?imgmax=800
http://lh6.ggpht.com/-h1llKFC4owg/Tmdq_VttVAI/AAAAAAAAE84/gOYHe8Cd6-s/s72-c/image%25255B11%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/09/make-colorful-tables-in-blogspot.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/09/make-colorful-tables-in-blogspot.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy