TABLES
#
As you go through this exercise keep saving and viewing at key points
Tables:
Using tables.html, the page you’ve just created, above as a starting
block key in the code for a basic table into the content/body area:
<!----table 1---->
<table width="450" border="1" height="80">
<tr>
<td bgcolor="#FF66FF"> </td>
<td bgcolor="#66FF66"> </td>
<td bgcolor="#FFFF66">hello </td>
</tr>
<tr>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FF6666"> </td>
<td bgcolor="#6666FF"> </td>
</tr>
</table>
Save as table.html and view in a browser.
It should look like this:
| hello | ||
Notice that the table has a border and that the cells have different background
colours. This is to help you see what you’re doing. Also notice that tables
are written to go from left to right and then down - like writing in English.
(n.b. The letters mean non-breaking space and they go into
any cell that doesn’t have any other content to allow the Netscape browser
to recognise the background colour.)
Having created your first table type in the following tables after it
(if you want you can save time by copying and pasting a lot of information from
the first table and resetting the values, but notice that we're using <!---comments---->
to highlight where one table begins and another ends):
<br>
<!----table 2---->
<table width="450" border="1" cellpadding="10"
height="80">
<tr>
<td bgcolor="#FF66FF"> </td>
<td bgcolor="#66FF66"> </td>
<td bgcolor="#FFFF66">hello</td>
</tr>
<tr>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FF6666"> </td>
<td bgcolor="#6666FF"> </td>
</tr>
</table>
<br>
<!----table 3---->
<table width="450" cellpadding="10" height="80">
<tr>
<td bgcolor="#FF66FF" width="150" height="40"> </td>
<td bgcolor="#66FF66" width="150" height="40"> </td>
<td bgcolor="#FFFF66" width="150" height="40">hello</td>
</tr>
<tr>
<td bgcolor="#00FFFF" width="150" height="40"> </td>
<td bgcolor="#FF6666" width="150" height="40"> </td>
<td bgcolor="#6666FF" width="150" height="40"> </td>
</tr>
</table>
<br>
<!----table 4---->
<table width="450" cellspacing="10">
<tr>
<td bgcolor="#FF66FF" width="150" height="40"> </td>
<td bgcolor="#66FF66" width="150" height="40"> </td>
<td bgcolor="#FFFF66" width="150" height="40">
<p>hello</p>
</td>
</tr>
<tr>
<td bgcolor="#00FFFF" width="150" height="40"> </td>
<td bgcolor="#FF6666" width="150" height="40"> </td>
<td bgcolor="#6666FF" width="150" height="40"> </td>
</tr>
</table>
<br>
<!----table 5---->
<table width="450" border="1" cellspacing="10"
height="80">
<tr>
<td bgcolor="#FF66FF"> </td>
<td bgcolor="#66FF66"> </td>
<td bgcolor="#FFFF66">
<p>hello</p>
</td>
</tr>
<tr>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FF6666"> </td>
<td bgcolor="#6666FF"> </td>
</tr>
</table>
Save the page and reload on the browser. This will show what height, border,
cell padding and cell spacing instructions do.
They should look like this:
| hello | ||
| hello | ||
|
hello |
||
|
hello |
||
Now experiment by changing some of these values.
Save and view.