ADVANCED TABLES #
Basic Table:
This is the basic code for a table of 3 columns and two rows:
<table width="450" border="1" height="80">
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#999999"> </td>
<td bgcolor="#666666"> </td>
</tr>
<tr>
<td bgcolor="#666666"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#999999"> </td>
</tr>
</table>
That looks something like this:
Merging cells:
It is possible to make much more complicated tables by merging cells. This gives you infinitely more possibilities when laying out a webpage. Here are two fairly straightforward examples:
1/
2/
In the first table I’ve merged the two cells in the right hand column. To do this I must instruct the table division <td> to go across 2 rows by adding rowspan=”2”; i.e. <td rowspan=”2”>. I also have to remove one table division in the bottom row, giving the following table code:
<table width="450" border="1" height="80">
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#999999"> </td>
<td bgcolor="#FFFFFF" rowspan="2"> </td>
</tr>
<tr>
<td bgcolor="#666666"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
</table>
In the second table I’ve taken one table division across all three columns on the bottom row. The instruction to do this is <td colspan=”3”>, making the full table code:
<table width="450" border="1" height="80">
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#999999"> </td>
<td bgcolor="#666666"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="3"> </td>
</tr>
</table>
Now see if you can work out how to make the following table:
| #CCCCCC |
#999999 |
#FFFFFF |
| #666666 |
On a practical level this allows you to break up the page giving you separate places to put different blocks of text and graphics.
However you can use it to do much much more. You can see where I created a piano
keyboard on a page using tables in html at www.geocities.com/jazzthebear/residents.html