In this section you will learn how to use
tables to improve your page layout. Please click here
to view the example web page you'll create.
The code to create this table is
displayed below...
<table border="0" cellpadding="0" cellspacing="0" width="70%">
<tr>
<td width="30%" valign="top"><a href="biography.htm">Biography</a></td>
<td width="70%">The first ever recorded interview with the band.
In this transcript they talk about how they met.<br><br></td>
</tr>
<tr>
<td width="30%" valign="top"><a href="albums.htm">List of Albums</a></td>
<td width="70%">This is a list of every album and song The Beatles
ever wrote.<br><br></td>
</tr>
<tr>
<td width="30%" valign="top"><a href="images.htm">Images</a></td>
<td width="70%">This is a collection of Beatles images.<br><br></td>
</tr>
<tr>
<td width="30%" valign="top"><a href="songs.htm">Favourite Songs</a></td>
<td width="70%">These are the lyrics to my favourite Beatles song.<br><br></td>
</tr>
</table>
This code is now explained...
<table border="0"
cellpadding="0" cellspacing="0" width="70%">
This tells the computer that a table is being drawn. This table will
not have a border or any padding - its width will be 70% of the browser
window. The tag </table> is placed at the end of the table.
<tr>
This defines a new row within the table. The closing tag is </tr>.
<td
width="30%" valign="top">
This defines a new cell within the row. The cell defined here is 30% of
the table in width and the text is alligned to the top of the cell. The
closing tag is </td>.
|