HTML Studio's
Html Studio's Web Tutor
Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7

Table Tutor - Lesson 3

Let's go back to plain old Ed.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle">Ed</TD>
</TR>
</TABLE>
Ed

And for the sake of clarity and simplicity let's remove the alignment attributes. We know what will happen because we know what the default values are. By the way, a TAG tells the browser to do something. An ATTRIBUTE goes inside the TAG and tells the browser how to do it.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed

Now we will make our table a fuzz bigger.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed

You should know that fuzz is a technical term. Its full definition is so broad and complicated that it would only be suitable for advanced html students.


Ed's friend Tom is back and this time he wants his own cell.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
</TR>
</TABLE>
Ed Tom

When no instructions are given to the browser, each cell may (but not always) be different in size. 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!

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Ed</TD>
<TD WIDTH=150>Tom</TD>
</TR>
</TABLE>
Ed Tom

These WIDTH attributes can also be expressed as a percentage.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=50%>Ed</TD>
<TD WIDTH=50%>Tom</TD>
</TR>
</TABLE>
Ed Tom

Lets give Ed a bigger cell since he's been here from the beginning.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=80%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
</TR>
</TABLE>
Ed Tom

Now Rick is back and of course he wants his own cell. We need to decide how much of the row we will give him. I suppose 20% is fair. Make sure to adjust Ed's share also.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
</TABLE>
Ed Tom Rick

Three yahoos from across the street see what's going on and they want to be in your table. I think we will give them their own row.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly Moe

The WIDTH attributes in the first row carry over to the second row.


If Moe 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%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly

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 (&nbsp;). Normally for a simple table this isn't necessary, however as your tables become more complex, the less guesing the browser has to to, the better off you'll be.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75 >

<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>&nbsp;</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly  

Let's put Moe back and remove all attributes except BORDER.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly Moe

Next are a couple of attributes called CELLPADDING and CELLSPACING. Both 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>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly Moe

The default value for this attribute 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>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly Moe

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>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly Moe

And, to see what it would look like, we can set them both to 0.

<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>

</TABLE>
Ed Tom Rick
Larry Curly Moe

 

 

 


< Back Next >

Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7


Maintained by Nick Grant < htmlstudio@talk21.com >


Copyright © 2000 Nick Grant. All Rights Reserved.