HTML Guide
More Tables

Tables can help with layout but you must be precise. Tables come in all sizes and in a variety of shapes. Sketching your table beforehand can help you to write the HTML required.

eg

<table width="300" border ="box">
<tr>
<td width="100">1</td>
<td width="200">2</td>
</tr>
<tr>
<td colspan="2" width="300">3</td>
</tr>
</table>

eg

<table width="400" border ="box">
<tr>
<td width="200">1</td>
<td width="200" rowspan="2">2</td>
</tr>
<tr>
<td width="200">3</td>
</tr>
</table>

Jazzing Up Your Tables

Adding attributes to the <td> tag can change the look of your table.

Alignment	<td align="left/right/justify/center"> </td> <td valign="top/middle/bottom"> </td>
Width & height	<td width="% or pixels"> </td> <td height="% or pixels"> </td>
Colour	<td bgcolor="colorname"> </td>

Exercise 11

Open up the page in which you created your timetable. (Exercise 10). Add attributes to improve the look of your tables. Consider colour, alignment and the dimensions of your table cells. Save, view and print your work.

Exercise 12

Locate the mini web site that you created in Exercise 5. You are going to use tables to improve the layout of the site.

The page layout should be produced with a table shaped like the one shown below. Make sure that you set the borders of the table to zero and that the table fills the full width of the page.