Adding Tables in Blogs

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">
<table border="1" bordercolor="#000000" width="100%" cellpadding="3" cellspacing="0">
<tr>
<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>
</tr>
<tr>
<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>
</table>
</div>

Let's add some further styling to our table header to improve the look of our table.
Modify the following section
<tr style="background-color:#5555FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>

Now we are going to jazz up our Blogger table by adding alternating colored rows to improve readibility and appearance. Also text alignment to center. 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><div class="nobrtable">
<table border="1" bordercolor="#000000" width="100%" cellpadding="3" cellspacing="0">
<tr>
<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>
</div>