How to Create Table in the Blog Post

Skip to the Step!
HTML Code Basic Command to Create a table :

HTML Code	Information
<table>...</table>	Command to create table
<tr>...</tr>	Command to create row
<td>...</td>	Command to create Column
border, width, align, bgcolor	Additional command to setting border, table width, text align, and background color

Well, We will create 1x4 (1 Row 4 Columns) Table! Following is the codes :

<table border="1"> <tr> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> <td>Content 4</td> </tr> </table>

So, the table will appear as following :

Content 1

Content 2

Content 3

Content 4

Then, We will try to change the above basic code to beautify the appearance of the table. Let's we make the width table to 550 pixels, change background color, and align text ! The codes are as following :

<table border="1"width="550"bgcolor="f5f5f5"> <tr> <td align="center"><b>Content 1</b></td> <td align="center"><i>Content 2</i></td> <td align="center"><u>Content 3</u></td> <td align="center">Content 4</td> </tr>

Result :

Content 1

Content 2

Content 3

Content 4

And we will create 2x4 Column! Codes are here :

<table border="1"width="550"></br> <tr bgcolor="f5f5f5"></br> <td align="center"><b>Content 1</b><td></br> <td align="center"><i>Content 2</i><td></br> <td align="center"><u>Content 3</u><td></br> <td align="center">Content 4<td></br> </tr> <tr> <td align="left">Type text here<td> <td align="left">Enter image script like this : &lt;a href=&quot;http://s1100.photobucket.com/albums/g420/Ferdi_Setiawan/?action=view&amp;amp;current=BenderaASEAN.gif&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://i1100.photobucket.com/albums/g420/Ferdi_Setiawan/BenderaASEAN.gif&quot; border=&quot;0&quot; alt=&quot;Photobucket&quot;&gt;&lt;/a&gt;</i><td> <td align="left">Image result: <a href="http://s1100.photobucket.com/albums/g420/Ferdi_Setiawan/?action=view&current=BenderaASEAN.gif" target="_blank"><img src="http://i1100.photobucket.com/albums/g420/Ferdi_Setiawan/BenderaASEAN.gif" border="0" alt="Photobucket"></a> <td align="left">Don't Fill this Column !</td> </tr> </table>

The result is :

Content 1		Content 2		Content 3		Content 4
Type text here		Enter image script like this : <a href="http://s1100.photobucket.com/albums/g420/Ferdi_Setiawan/?action=view&amp;current=BenderaASEAN.gif" target="_blank"><img src="http://i1100.photobucket.com/albums/g420/Ferdi_Setiawan/BenderaASEAN.gif" border="0" alt="Photobucket"></a>		Image result:	Don't Fill this Column !

Hopefully useful!