Ready? Now we can start to play with the table. In most cases, there is not much point in having a table which consists of 1 row and 1 cell. So, we will start off by making table of 1 row and 2 cells.
<TABLE BORDER=5 WIDTH=80% HEIGHT=80>
<TR>
<TD>A</TD>
<TD>Table</TD>
</TR>
</TABLE>
which will look like:
A Table As you can see, the browser shows the cells as different sizes because we have not instructed it as to the size of each cell. So, we need to add a "WIDTH" attribute to the <TD> tag. You can do this as percentages, but just make sure that your additions are correct or it could end up looking a little bit strange. Try doing:
<TABLE BORDER=5 WIDTH=80% HEIGHT=80>
<TR>
<TD WIDTH=50%>A</TD>
<TD WIDTH=50%>Table</TD>
</TR>
</TABLE>
which will look like:
A Table Use the "WIDTH" attribute and practice changing the width of the cells like:
<TABLE BORDER=5 WIDTH=80% HEIGHT=80>
<TR>
<TD WIDTH=70%>A</TD>
<TD WIDTH=30%>Table</TD>
</TR>
</TABLE>
which will look like:
A Table Now add another cell like this - and don't forget to give it a percentage also, and remember do your additions properly - it should total 100%
<TABLE BORDER=5 WIDTH=80% HEIGHT=80>
<TR>
<TD WIDTH=33%>Tables</TD>
<TD WIDTH=34%>are</TD>
<TD WIDTH=30%>fun</TD>
</TR>
</TABLE>
which will look like:
Tables are fun Now we can add another row. To do that we need to repeat the tags from <TR> to </TR> which should, hopefully, look like this:
<TABLE BORDER=5 WIDTH=80% HEIGHT=80>
<TR>
<TD WIDTH=33%>Your</TD>
<TD WIDTH=34%>table</TD>
<TD WIDTH=30%>should</TD>
</TR>
<TR>
<TD WIDTH=33%>look</TD>
<TD WIDTH=34%>like</TD>
<TD WIDTH=30%>this</TD>
</TR>
</TABLE>
which will look like:
Your table should look like this However, it is not really necessary to put the "WIDTH" attribute in the second row as the attributes of the first row will automatically apply to the second row. So take "WIDTH" out of the second row and you should end up with:
<TABLE BORDER=5 WIDTH=80% HEIGHT=80>
<TR>
<TD WIDTH=33%>Your</TD>
<TD WIDTH=34%>table</TD>
<TD WIDTH=30%>should</TD>
</TR>
<TR>
<TD>look</TD>
<TD>like</TD>
<TD>this</TD>
</TR>
</TABLE>
which will look like:
Your table should look like this Now take out all the "WIDTH" and "HEIGHT" attributes and see what happens. You should end up with:
<TABLE BORDER=5>
<TR>
<TD>Your</TD>
<TD>table</TD>
<TD>should</TD>
</TR>
<TR>
<TD>look</TD>
<TD>like</TD>
<TD>this</TD>
</TR>
</TABLE>
which will look like:
Your table should look like this Have a play with these until you think you've got it, and then we will continue.
Back to #htmlhelp page
Created and maintained by Marion McCreadie
Created 14 December 1998