Lesson 2
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Edwin</TD>
</TR>
</TABLE>
Forms a table having 300 pixel width and 75 pixel in height with Edwin as content.
Puts Edwin & Tom in the same row. The row is now split into two cells. When no instructions are given to the browser, each cell may (but not always) be different in size.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Edwin</TD>
<TD>Tom</TD>
</TR>
</TABLE>
The out put will be as
It's often a fine idea to specify how big each cell is. Make sure your arithmetic is correct or what people see may be drastically different than what you want them to see!.
You can specify width of cells in a row for better formatting of a row.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Edwin</TD>
<TD WIDTH=150>Tom</TD>
</TR>
</TABLE>
This gives cells of 150 pixel width with Edwin and Tom as data.
The WIDTH attributes can also be expressed as a percentage.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=50%>Edwin</TD>
<TD WIDTH=50%>Tom</TD>
</TR>
</TABLE>
Here the two cells are of 150 pixel in width.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Edwin</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Richard</TD>
</TR>
</TABLE>
Here the data Edwin, Tom and Richard are placed in a row of 300 pixel width. Edwin is placed in a cell having 60 % of 300 = 180 pixel in width. The rest are placed in two cells of 60 pixel in width. See the output.
Adds a second row in the table with data Lara, Daisy and Moly. The WIDTH attributes in the first row carry over to the second row.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Edwin</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Richard</TD>
</TR>
<TR>
<TD>Lara</TD>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
The out put will be as
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
Moly |
When Moly leaves, we still have a perfectly good table, it just has an empty spot.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Edwin</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Richard</TD>
</TR>
<TR>
<TD WIDTH=60%>Lara</TD>
<TD WIDTH=20%>Daisy</TD>
</TR>
</TABLE>
The out put will be as
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
View the output in browser. What we may want to do, just to keep the browser from guessing, is to actually leave that empty cell there and just put a blank space in it ( ). Normally for a simple table this isn't necessary, however as your tables become more complex, the less guessing the browser has to, the better off you'll be.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Edwin</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Richard</TD>
</TR>
<TR>
<TD WIDTH=60%>Lara</TD>
<TD WIDTH=20%>Daisy</TD>
<TD WIDTH=20%> </TD>
</TR>
</TABLE>
The out put will be as
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
|
This will form a perfect table with an empty cell.
CELLPADDING and CELLSPACING are used up front in the <TABLE> tag. CELLPADDING is the amount of space between the border of the cell and the contents of the cell.
<TABLE BORDER=3 CELLPADDING=12>
<TR>
<TD WIDTH=60%>Edwin</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Richard</TD>
</TR>
<TR>
<TD WIDTH=60%>Lara</TD>
<TD WIDTH=20%>Daisy</TD>
<TD WIDTH=20%>Moly</TD>
</TR>
</TABLE>
The output will be as
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
Moly |
The default value of CELLPADDING is normally 1. The reason it is 1 and not 0 is so that any text in the cells won't be banging up against the borders. (Although you could specify 0 if you wanted to).
If we substitute CELLSPACING for CELLPADDING we get a slightly different effect.
<TABLE BORDER=3 CELLSPACING=12>
<TR>
<TD WIDTH=60%>Edwin</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Richard</TD>
</TR>
<TR>
<TD WIDTH=60%>Lara</TD>
<TD WIDTH=20%>Daisy</TD>
<TD WIDTH=20%>Moly</TD>
</TR>
</TABLE>
The output will be as
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
Moly |
The default value for the CELLSPACING attribute is usually 2.
We can, of course, use these attributes in combination.
<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
<TR>
<TD WIDTH=60%>Edwin</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Richard</TD>
</TR>
<TR>
<TD>Lara</TD>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
The out put will be as
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
Moly |
And, to see what it would look like, we can set them both to 0. Make the change to
<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0> and view the output.
Whenever a whole page, or large portions of a page just "disappear", the culprit is usually one or more missing </TABLE> tags. Make sure all closing tags are in an html code (especially /TABLE).
Always include closing tags in table - cell </TD>, row </TR> and table </TABLE> tags.
<--BACK
NEXT-->
|
