|
<!-- ~~~~~~~~~~~~~ CODE ~~~~~~~~~~~ -->
<table style="width: 200px;
margin-left: auto; margin-right: auto;
text-align: left;" border="1"
cellpadding="2" cellspacing="2">
<tr>
<td colspan="2" rowspan="1"
style="vertical-align: top;
text-align: center;">
1&2
</td>
<td style="vertical-align: top;
text-align: center; text-align: center;">
3
</td>
</tr>
<tr>
<td colspan="3" rowspan="1"
style="vertical-align: top;">
One Row
</td>
</tr>
<tr>
<td colspan="1" rowspan="2"
style=" vertical-align: middle;
text-align: center;">
4 &7
</td>
<td colspan="2" rowspan="1"
style="vertical-align: top;
text-align: center;">
5 & 6
</td>
</tr>
<tr>
<td style="vertical-align: top;
text-align: center;">
8
</td>
<td style="vertical-align: top;
text-align: center;">
9
</td>
</tr>
</table>
|
How it looks in the browser
1&2
|
3
|
One Row
|
4 &7
|
5 & 6
|
8
|
9
|
Tables are layed out in grids. This one is 3 columns wide and 3 rows in depth.
Joining the cells together on the same row as in cell 1 and 2 - the code is:
<td colspan="2" rowspan="1" ....>
We are spanning 2 columns on 1 row.
Joining the cells on two rows as in 4 and 7 - the code is:
<td colspan="1" rowspan="2" ...>
We are spanning 2 rows on 1 column.
To link three cells together on one row the code is:
<td colspan="3" rowspan="1" ...>
Keep in mind that diffrent tables will have differing amounts of
columns and rows. It helps to use a border at first and count them up
for yourself and then set the border to 0 for the correct look and feel
of the webpage.
|
