How to add stylish table to free blog blogger post

Summary: This useful article teaches you that  how you add table in Blogger Blog Post and how you change Rows, Columns, Colors, in the table because table is very important in Blogger Blog and you have never seen like this article

By this article you will teach that how you add Table in Blogger Post. This Blogger tutorial give details how to place a table into a Blogger post. You will learn how to make tables in Blogger sorting from a simple table to a more complex table with irregular colors. Now you will begin with a necessary table and slowly add CSS styling to the table to get better the look and functionality awaiting we have build the table pictured directly below. No knowledge of CSS and HTML is unspecified so this Blogger tutorial is suitable for complete blogging basic knowledge.

I think tables are very useful method to show information mostly tabulated information. Tables are very nice when you wish to line up information so that it is simple to read and be grateful for. You can insert text, hyperlinks and even images to a table which create them very useful for there information. No easy way as yet to insert tables in Blogger Blog because table button is not provided. Now I give you step by step suggestions and tips how you insert table in Blogger Blog post easily. If you want to insert table with 4columns and 4 rows alongwith header and how to insert additional rows, columns a and changing of colors to the header, a border, a caption, change the size of the table, center align the table and more other useful options.

1.   First go to www. blogger.com open dashboard and open  a new post and then click on the Edit HTML tab on your Blogger editor and where you want to insert table copy and paste it the following code on that place. For more information please look at the picture has given below:

Now see the above picture insert table code after </div> and when you close the below code enter </div> in the end of table code for more information look at the follow table and code with carefully.

Table Header	Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell

<table border="2" bordercolor="#FAAC58" style="background-color: #FAAC58" width="100%" cellpadding="3" cellspacing="3">
          <tr>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>


          </tr>
          <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          </tr>
          <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
         <td>Table Cell</td>
          </tr>
          <tr">
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          </tr>
          </table>

2. Insert some further styling to our table header to improve the look of our table as denoted in orange according Blogger template. Change the background color and color attributes to suit your own color scheme if you wish and as you like.

<style type="text/css">.nobrtable br { display: none }</style> <div class="nobrtable">
<table border="2" bordercolor="#FAAC58" style="background-color: #FAAC58" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color: # FAAC58; color: # 000000; padding-top:5px; padding-bottom:4px;">


          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
          </tr>
          <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          </tr>
          <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          </tr>
          <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          <td>Table Cell</td>
          </tr>
          </table>></div>

3.  In this procedure I am going to center the contents of  Blogger Blog table. This can be done in several methods but  going to take a short cut here by assigning a style to every table row of the table with good style and also going to ballet up our Blogger table by inserting alternating colored rows to improve readability and appearance. By far the easiest way to do this is to assign a class. For more information see the picture has given below:

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #FF0000; color: red;}</style><div class="nobrtable"> <table border="2" bordercolor="#FAAC58" style="background-color: #FAAC58" width="100%" cellpadding="3" cellspacing="3"><tr style="background-color: #D7DF01; color: #ffffff; padding-top:5px; padding-bottom:4px;">

          <th>Table Header</th>

          <th>Table Header</th>

          <th>Table Header</th>

          </tr>

          <tr class="alt">

          <td>Table Cell</td>

          <td>Table Cell</td>

          <td>Table Cell</td>

          </tr>

          <tr>

          <td>Table Cell</td>

          <td>Table Cell</td>

          <td>Table Cell</td>

          </tr>

          <tr class="alt">

          <td>Table Cell</td>

          <td>Table Cell</td>

          <td>Table Cell</td>

          </tr>

          </table>

4. Look at the above code change color of header and rows according your desire as you like. I have already discussed that change the colors and styles according your template design and you can change rows and color of headers and rows columns any time look at the table related with above code. 

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

5.  Now you want to add caption in Blogger table It is also simple  to insert  a caption. For a caption in the table simply add the caption line as shown below the table according your Blogger template format. For a caption look at the following code and table how I have add caption in the Blogger table.

A Blog Blogger Training Table Caption

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

6.    Now see the above table and go to ahead and insert your  your data to your new Blogger table. Filling in each instance of "Table Header" and "Table Cell" with your own data. The information you insert to the Blogger table can be text, hyperlinks or even an image as you like according your choice and then save your changes to the Blogger table by saving and publishing your post finally.

Troubleshooting and Solving Problems in the Tables

Now you have seen the above codes and tables how you solve the problems in codes and tables. 

1.  Go to www.google.com and search "HTML color Codes" and then select the color and get its code and go to the table and change the codes with carefully for example I want to change color code #FAAC58 to another code it must be select the code from HTML Color codes and change it with your choice of Color.

2.  Change the Headings and Table cell according your data and save it properly and also maintain your Blogger post table according your templates settings.  

I hope this useful article will be more profitable for new blogger owners and if you like it give me more suggestions and leave your comments.