• Understanding how to use html table tag

Sometime you find it quite tedious and difficult using CSS style sheet to position and align the images and other set of HTML blocks to layout into more than one column. Although it is not recommended to use TABLE tag to layout content columns, some developers are still using it. Most people say using TABLE is cumbersome and not very semantic, but I have to put some TABLE usages for those who couldn't get away with it.

Before you design your web page, try to visualize it in a form of rows and columns to position the contents of your page into different location.

Take a look at the example below.
<table> tag is a set of rows and columns
<tr> tag represents rows
<td> tag represents columns
Of course, every opening html tag must end with closing end tag;

i.e <td> </td> forms one column which MUST reside within <tr> and </tr> tag.
<tr> </tr> forms one row which MUST in turn reside within <table> and </table> tag.

1st Row, 1st Column 1st Row, 2nd Column 2nd Row, 1st Column 2nd Row, 2nd Column

<table border="1"> <tr> <td>1st Row, 1st Column</td> <td>1st Row, 2nd Column</td> </tr> <tr> <td>2nd Row, 1st Column</td> <td>2nd Row, 2nd Column</td> </tr> </table>

You can create multiple rows and columns as many as you want. And you can even create another table into a column cell.
Let's look at the another example.

1st Row, 1st Column	1st Row, 1st Column 1st Row, 2nd Column 2nd Row, 1st Column 2nd Row, 2nd Column
2bd Row, 1st Column	2nd Row, 2nd Column

I just put the another table into 1st Row, 2nd Column cell between <td> and </td> tag.

<table border="1">

<tr> <td>1st Row, 1st Column</td> <td> <table border="1"> <tr> <td>1st Row, 1st Column</td> <td>1st Row, 2nd Column</td> </tr> <tr> <td>2nd Row, 1st Column</td> <td>2nd Row, 2nd Column</td></tr> </table> </td> </tr>

<tr> <td>2nd Row, 1st Column</td> <td>2nd Row, 2nd Column</td> </tr>

</table>

Sometime you will need to have the different layout.
Layout I.

1st Row, 1st Column 2nd Row, 1st Column 2nd Row, 2nd Column

<table border="1" > <tr> <td colspan="2">1st Row, 1st Column</td> </tr> <tr> <td>2nd Row, 1st Column</td> <td>2nd Row, 2nd Column</td> </tr> </table>

Layout II.

1nd Row, 1st Column	1st Row, 2nd Column	1st Row, 3rd Column
2nd Row, 1st Column

<table border="1" >

<tr> <td>1st Row, 1st Column</td> <td>1st Row, 2nd Column</td> <td>1st Row, 3rd Column</td> </tr>

<tr> <td colspan="3">2nd Row, 1st Column</td> </tr>

</table>

Layout III.

1st Row, 1st Column 1st Row, 2nd Column 2nd Row, 1st Column

<table border="1"> <tr> <td>1st Row, 1st Column</td> <td rowspan="2">1st Row, 2nd Column</td> </tr> <tr> <td>2nd Row, 1st Column</td> </tr> </table>

Layout IV.

1st Row, 1st Column 1st Row, 2nd Column 2nd Row, 2nd Column

<table border="1"> <tr> <td rowspan="2">1st Row, 1st Column</td> <td>1st Row, 2nd Column</td> </tr> <tr> <td>2nd Row, 2nd Column</td> </tr> </table>