How do i create tables in a blog or blogger or blogspot

 How do i create a Simple Table in Blogger Posts:

       First of all we are going to start with a table with 3 columns and 5 rows including a header row also(3x5). Then I will show you step by step how to add different features to the table including extra rows, a background color to the header, a border, a caption, change the size of the table, center align the table and more.Following are some important steps to remember and they are:

1. In Blogspot or Blogger open either a new post or an existing post that you wish to add a table to
   
   
2. On the right side of the Blogger editor below title Click on the Edit HTML tab.
   
   
3. Write the following code in HTML editor which will produce the simple table having 3 columns and 5 rows as shown below:
   
   
   

..................................................................................

<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Serial No</th>
<th>Employee</th>
<th>Salary</th>
</tr>
<tr>
<td>01</td>
<td>Muzammil</td>
<td>9000</td>
</tr>
<tr>
<td>02</td>
<td>Zulfikar</td>
<td>10000</td>
</tr>
<tr>
<td>03</td>
<td>Muwahhid</td>
<td>6000</td>
</tr>

<tr>
<td>04</td>
<td>Moutaqid</td>
<td>4000</td>

</tr>
</table>

......................................................................

Serial No	Employee	Salary
01	Muzammil	9000
02	Zulfikar	10000
03	Muwahhid	6000
04	Moutaqid	4000

• Make changes to the table to suit your own Blogger template if necessary by changing the following:
  
  

  <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">

  
  
  • Border width (blue)
    
  • Border color (black)
    
  • Background color (red)
    
  • Table width (orange) Can be a percentage or actual width e.g 500px
    
  
  
• Now we are going to fix an annoying problem in Blogger which renders too much white space above the table. We do this by adding the following styling denoted in red directly above the table tag and adding a closing </div> at the end of the table code:

           <style type="text/css">.nobrtable br { display: none }</style>

           <div class="nobrtable">                             ( before the above code)

            .......

           </div>                                                          (at the end of above code)

• Let's add some further styling to our table header to improve the look of our table as denoted in red. Change the background color and color attributes to suit your own color scheme if you wish
  

<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">  

 after the first line table (above code)

     * Now let's add another row to our table for Blogger so you can see how this is done

                                                                   <tr>

<td>Table Cell</td>

<td>Table Cell</td>

         <td>Table Cell</td></tr>

    * In this step we are going to center the contents of our Blogger table. This can be done in several              ways but we are going to take a short cut here by assigning a style to every table row

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>

<div class="nobrtable">

   * Now we are going to jazz up our Blogger table by adding alternating colored rows to improve                readability and appearance. By far the easiest way to do this is to assign a class.

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}</style>

........

........

<tr class="alt">

......

......

<tr class="alt">

    * It is also easy to add a caption to your Blogger table. For a caption above the table simply add the           caption line as shown in red. For a caption below the table add the caption line in red and a style as         shown in blue

    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-        color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%"              cellpadding="3" cellspacing="3">
    <caption>A Blogger Table Caption</caption>
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">

    * One more important property needs to be addressed in our new Blogger table to improve the look.         We can reduce the double border into a single one. The easiest way to do this is to change the                 cellspacing to zero as denoted in red. Or, alternatively we can apply the border collapse property to         our table as shown in blue. Note: Border collapse may not be supported by all browsers                           particularly if the cellspacing attribute is defined also)

      <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-       color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
     <div class="nobrtable">
     <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-                           collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
     <caption>A Blogger Table Caption</caption>
     <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">

      * Now our table is ready for insertion.

...................................................................................