Table based website structure
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.
Recent Comments