How to Make a Table in a Blog Post

For new bloggers making a table is not straight forward especially if you are not very familiar with the scripting language. Though it is still possible to use other applications like words or paint to insert a table in a blog, for those who prefer using the scripting method. The following is a quick tutorial on how to go about doing it.

Tables are simply defined by <table> tag. The headings are defined by <th> tag, rows with  <tr> tag and each of the table row is divided into cell/column with <td> tag which stands for table data.

For an example, I am going to make a table with three row and two cells.  First, I need to specify whether I want my table to have a border or not. This is defined by the tag <table border="1">. You can increase the border thickness by simply adding the border no "1" to a higher number like “3” or even “0” if you prefer not to have any border. My HTML code will look like this;

<table border=”1”> (opening tag of the table)

<tr> (starting tag of the first table row)
<td> Blogger Ideas and Tips </td> (insert data that you want to be in the first cell of row 1.
<td> Blogger Ideas</td>(insert data that you want to be in the second cell of row 1.
</tr> (closing tag of the first table row)
 

 <tr> (starting tag of the second table row)
<td> Blog Spot</td> (insert data that you want to be in the first cell of row 2.
<td> Blogging </td>) (insert data that you want to be in the second cell of row 2.
</tr> (closing tag of the second table row)

 <tr> (starting tag of the third table row)
<td> Tips</td> (insert data that you want to be in the first cell of row 3.
<td> Ideas</td>) (insert data that you want to be in the second cell of row 3.
</tr> (closing tag of the third table row)
</table> (closing tag of the whole table)

This is the correct code of the table above;

<table border=”1”>

<tr>
<th> Blog Ideas and Tips </th>
<th> Blog Ideas </th>
</tr>

<tr>
<td> Blogger ideas and tips </td>
<td> Blogger ideas</td>

 <tr>
<td>Blog Spot</td>
<td> Blogging</td>
</tr>

<tr>
<td> Tips</td>
<td> Ideas</td>
</tr>
</table>

The table  look like this;

Blogger Ideas and Tips	Blogger Ideas
Blog Spot	Blogging
Tips	Ideas

The table Headers
The headers are defined by <th> tag.  In all browsers, the header text is usually displayed in bold and centered. To make a table header, insert the header tag on top of the table. The HTML code of the above table with the header will look like this:

<table border=”1”>

<tr>

< th> Blog Ideas and Tips </th>

< th> Blog Ideas </th>

< /tr>

< tr>

< td> Blogger Ideas and Tips </td>

< td> Blogger Ideas</td>

< tr>

< td>Blog Spot</td>

< td> Blogging</td>

< /tr>

< tr>

< td> Tips</td>

< td> Ideas</td>

< /tr>

< /table>

The table will look like this after inserting the header tag;

Blog Ideas and Tips	Blog Ideas
Blogger ideas and tips	Blogger ideas
Blog Spot	Blogging
Tips	Ideas

If you want to insert one more cells (columns) on your table, the code could look like this;

<table border=”1”>

<tr>

<th> Blog Ideas and Tips </th>

<th> Blog Ideas </th>

<th> SEO</th> (new column header)

</tr>

< tr>

< td> Blogger Ideas and Tips </td>

< td> Blogger Ideas</td>

<td> Templates</td> (new column 1st row)

</tr>

<tr>

<td>Blog Spot</td>

<td> Blogging</td>

<td> Site Map</td>(new column 2nd row)

</tr>

< tr>

< td> Tips</td>

< td> Ideas</td>

<td> Adsense</td> (new column 3rd row)

</tr>

</table>

The table after inserting one more column will  looks like this.

Blog Ideas and Tips	Blog Ideas	SEO
Blogger Ideas and Tips	Blogger Ideas	Templates
Blog Spot	Blogging	Site Map
Tips	Ideas	Adsense

You can simply add more columns/rows by use of <td> and <tr> tags.