How to create table in Blogger

In this article we will learn "How to create a table in a Blogger"

1. To create a basic table of row 2 and column 2

•  In the Blogger go to a new post or an existing post where you want to create a table
• Click on "HTML" tab on your blogger editor
• Below code can be used to create a basic table of 3 rows and 2 columns.

Header Row 1	Header Row 2
Row1 Col1	Row1 Col2
Row2 Col1	Row2 Col2

<table border="2">
<tbody>
<tr>
<th>Header Row 1 </th>
<th>Header Row 2 </th></tr>
<tr>
<td>Row1 Col1 </td>
<td>Row1 Col2 </td>
</tr>
<tr>
<td>Row2 Col1</td>
<td>Row2 Col2 </td>
</tr>
</tbody>
</table>

• Format  the table using cell spacing ,cell padding and change of background and border color can be done by adding attributes  bordercolor="#151B54" style="background-color : #BCC6CC"  in  table tag <table border ="2">

Background color and border color can be added to the table with the attributes

<table border="2" cellpadding ="3" cellspacing ="3" bordercolor="#151B54" style="background-color : #BCC6CC" > .The table looks as below.

Header Row 1	Header Row 2
Row1 Col1	Row1 Col2
Row2 Col1	Row2 Col2

• The table can be formatted as per your blog style by changing the attributes values

<table border="2" cellpadding ="3" cellspacing ="3" bordercolor="#151B54" style="background-color : #BCC6CC;" > 

Your code should look like this

<table border="2" cellpadding="3" cellspacing="3" bordercolor="#151B54" style="background-color: #bcc6cc;">

<tbody>
<tr><th>Header Row 1 </th>
<th>Header Row 2 </th>
</tr>
<tr>
<td>Row1 Col1 </td>
<td>Row1 Col2 </td>
</tr>
<tr>
<td>Row2 Col1</td>
<td>Row2 Col2 </td>
</tr>
</tbody></table>

• Further to change the row header color add the code in the tr tag of the Header row        <tr style="background-color: #fbb917; color: #810541;">

Your code should look like this

<table border="2" cellpadding="3" cellspacing="3" bordercolor="#151B54" style="background-color: #bcc6cc;">

<tbody>
<tr style="background-color: #fbb917; color: #810541;" ><th>Header Row 1 </th>
<th>Header Row 2 </th>
</tr>
<tr>
<td>Row1 Col1 </td>
<td>Row1 Col2 </td>
</tr>
<tr>
<td>Row2 Col1</td>
<td>Row2 Col2 </td>
</tr>
</tbody></table>

Header Row 1	Header Row 2
Row1 Col1	Row1 Col2
Row2 Col1	Row2 Col2



• You might see white space above the table to remove the extra space above the table .Add the <style> tag above the table and enclose the table with div tags.

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

<div class="TableSpace">
<table border="2" cellpadding ="3" cellspacing ="3" bordercolor="#151B54" style="background-color : #BCC6CC" >
<tbody>
<tr>
<th>Header Row 1 </th>
<th>Header Row 2 </th></tr>
<tr>
<td>Row1 Col1 </td>
<td>Row1 Col2 </td>
</tr>
<tr>
<td>Row2 Col1</td>
<td>Row2 Col2 </td>
</tr>
</tbody>
</table>
</div>