Tuesday, December 17, 2013

Blogger: How to manually add simple table to your blog post



Let say do you want to put following table manually in  blog post.


First Name Class Name Points (%)
Akmal Cemerlang 50
Basiran Cengal 94
Chong Wei Dahlia 80
Dang Anum Dahlia 67

You can use MS-Word to create table and paste it in blog editor. Sometime the table that pasted from MS Word does not show properly because browser compatibility. To address this you can use html code to manually add table to your blog post.

Above table when in html code,

<center><table border="1" cellpadding="3">
<tbody>
<tr>
<th>First Name</th>
<th>Class Name</th>
<th>Points (%)</th>
</tr>
<tr>
<td>Akmal</td>
<td>Cemerlang</td>
<td>50</td>
</tr>
<tr>
<td>Basiran</td>
<td>Cengal</td>
<td>94</td>
</tr>
<tr>
<td>Chong Wei</td>
<td>Dahlia</td>
<td>80</td>
</tr>
<tr>
<td>Dang Anum</td>
<td>Dahlia</td>
<td>67</td>
</tr>
</tbody></table>
</center>

To add html code above in your blog. Copy html code above. Go to your blog post editor and click HTML in your editor. Then paste above code in your editor.
( same step http://akmalhussin.blogspot.com/2013/12/how-to-embed-vimeo-video-in-your.html )

To understand above code let consider following code:


<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

It will produce:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

"1" in  border="1" is a border line size. You can put "0" if you do not want the border.
As a result it will be like this:


Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

This code will produce vertical headers:

<table border="1">
<tr>
<th>Name</th>
<td>Akmal</td>
</tr>
<tr>
<th>ID Ref.</th>
<td>1234567890</td>
</tr>
</table>

Result:

Name Akmal
ID Ref. 1234567890

To add caption to the table

<table border="1">
<caption>My Details</caption>
<tr>
<th>Name</th>
<td>Akmal</td>
</tr>
<tr>
<th>ID Ref.</th>
<td>1234567890</td>
</tr>
</table>

Result:

My Details
Name Akmal
ID Ref. 1234567890

To look more organize, add cellpadding to table property

<table border="1" cellpadding="10">
<caption>My Details</caption>
<tr>
<th>Name</th>
<td>Akmal</td>
</tr>
<tr>
<th>ID Ref.</th>
<td>1234567890</td>
</tr>
</table>

Result:

My Details
Name Akmal
ID Ref. 1234567890


To try it offline on your desktop, copy following code and paste it in notepad. 

<!DOCTYPE html>
<html>
<body>
<center><table border="1" cellpadding="3">
<tbody>
<tr>
<th>First Name</th>
<th>Class Name</th>
<th>Points (%)</th>
</tr>
<tr>
<td>Akmal</td>
<td>Cemerlang</td>
<td>50</td>
</tr>
<tr>
<td>Basiran</td>
<td>Cengal</td>
<td>94</td>
</tr>
<tr>
<td>Chong Wei</td>
<td>Dahlia</td>
<td>80</td>
</tr>
<tr>
<td>Dang Anum</td>
<td>Dahlia</td>
<td>67</td>
</tr>
</tbody></table>
</center>

</body>
</html>

 
Save it as html file.

 
Then open it with your internet browser.
 
 


HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table