| Multiwingspan Home Page |
| Multiwingspan Games |
| Gnasher @ Multiwingspan |
| Multiwingspan Calendar |
| Multiwingspan Clock |
| About Multiwingspan |
| Visual Basic 6.0 Guide |
| Visual Basic 6.0 Examples |
| Turbo Pascal Guide |
| SWI Prolog Guide |
| Visual Basic 2005 Guide |
| Structured Query Language |
| HTML Design Tasks |
| Introduction To HTML |
| Introduction To CSS |
| Introduction To Javascript |
| AS/A2 Level Computing |
The use of the many table-related tags in HTML can be a complex activity. It is often difficult to see how your table will be rendered. Before creating any HTML table you should always sketch the table on paper.
There are a number of tags associated with tables; the following are almost always required.
| <table> </table> | These tags mark the start and end of the table code. All of the HTML required to produce the structure of the table should be within these tags. |
| <tr> </tr> | Table row tag. The HTML which defines each row (horizontal) of the table should be between these two tags. |
| <td> </td> | Table data tag. The HTML which defines the content of each cell must be placed between these two tags. |
Copy the following HTML into a web page to view the table.
<table align="center" width="50%" border="1">
<tr>
<td width="30%" align="left"><b>Column 1</b></td>
<td width="70%" align="right"><b>Column 2</b></td>
</tr>
<tr>
<td width="30%" height="100" align="center" valign="middle">Row 2</td>
<td width="70%" height="100" align="center" valign="top" bgcolor="green">Row 2</td>
</tr>
</table>
Your table should look like this
| Column 1 | Column 2 |
| Row 2 | Row 2 |
Notice that you can specify height and width as a % of the available area or in pixels. Vertical alignment and cell background colour can also be controlled.
Tables can be used without borders to help with the layout of your page. The following effect can be created using a table with 3 columns and 1 row. The value for border must be set to zero in the <table> tag.
| Image here | Title placed here | Image here |
Using an image of yourself, create the page above. Save, view and print your work.
Use a table to add your timetable to the page that you created in Exercise 9. Create both weeks of your timetable. Remember, the tables for both weeks will have identical tags. Copy, paste and amend your code to save time. No need to work hard when you can work smart.
Return To HTML Guide || Return To Homepage