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:
| 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:
| 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 |
