As we have understood wireframing in the previous tutorial, now we are going to implement it it using <table> tag.
Consider the layouts given below.

Layout – 1

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td> 2 </td>
</tr>
<tr height="50px">
<td colspan="2">3</td>
</tr>
<tr height="400px">
<td width="200px">4</td>
<td>5</td>
</tr>
<tr height="100px">
<td colspan="2">5</td>
</tr>
</table>

Output:

1 2
3
4 5
5
  • Above layout consist of four rows and two columns.


Layout – 2

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td colspan="2"> 2 </td>
</tr>
<tr height="50px">
<td colspan="3">3</td>
</tr>
<tr height="400px">
<td colspan="2">4</td>
<td width="200px">5</td>
</tr>
<tr height="100px">
<td colspan="3">5</td>
</tr>
</table>

Output:

1 2
3
4 5
5

Layout – 3

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td colspan="4"> 2 </td>
</tr>
<tr height="50px">
<td colspan="5"> 3 </td>
</tr>
<tr height="200px">
<td colspan="2"> 4 </td>
<td width="300px"> 5 </td>
<td colspan="2"> 6 </td>
</tr>
<tr height="400px">
<td colspan="4"> 7 </td>
<td width="200px"> 8 </td>
</tr>
<tr>
<td colspan="5"> 9 </td>
</tr>
</table>

Output:

1 2
3
4 5 6
7 8
9

Above layout consist of 5 columns and 5 rows. We can assign width attribute to cell 1, cell 5 and cell 8 as these are the only cells which do not merge more than one cell.

Rules to follow while designing Table based website structure having multi browser compatibility

  • We should not assign width to a cell whose colspan attribute is assigned
  • We should not assign height to a cell whose rowspan attribute is assigned
  • Width can be assigned to <table> and <td> tags.
  • Height can be assigned to <table> , <tr> and <td> tags.
  • If we do not write some content in between <td> and </td> then browser will not allocate space for that cell.