TABLE LESSON NO 2

Lets make a Cake

We are going to make a Table with the <TR> Table Row having 4 cells. Here is the DATA

Lets
Make
Some
Cake

When no instructions are given to the browser, each cell may (but not always) be different in size. It's a good idea to specify how big each cell is. Cell widths maybe expressed as an absolute value or as a percentage. Make sure your MATH is correct and that the SUM of the cell widths ADD UP to the Table width. or what people see may be drastically different than what you want them to see!

Lets, first, express WIDTH as an absolute value;

<TABLE BORDER=3 WIDTH=320 HEIGHT=80>
<TR>
<TD WIDTH=80>Lets</TD>
<TD WIDTH=80>Make</TD>
<TD WIDTH=80>Some</TD>
<TD WIDTH=80>Cake</TD>
</TR>
</TABLE>

Lets

Make

Some

Cake

and now as a percentage.

<TABLE BORDER=3 WIDTH=320 HEIGHT=80>
<TR>
<TD WIDTH=25%>Lets</TD>
<TD WIDTH=25%>Make</TD>
<TD WIDTH=25%>Some</TD>
<TD WIDTH=25%>Cake</TD>
</TR>
</TABLE>

Lets

Make

Some

Cake

Notice that the data assumed the DEFAULT alignment

Here are the Ingredients we will use to make the Cake,

Flour
Milk
Sugar
Eggs

<TABLE BORDER=3 WIDTH=320 HEIGHT=80>

<TR>
<TD WIDTH=25%>Lets</TD>
<TD WIDTH=25%>make</TD>
<TD WIDTH=25%>Some</TD>
<TD WIDTH=25%>Cake</TD>
</TR>

<TR>
<TD>Flour</TD>
<TD>Milk</TD>
<TD>Sugar</TD>
<TD>Eggs</TD>
</TR>

</TABLE>

Lets	make	Some	Cake
Flour	Milk	Sugar	Eggs

Notice that the WIDTH attributes in the first row carry over to the second row.

Next are a couple of attributes called CELLPADDING and CELLSPACING. Both are used up front in the <TABLE> tag.

CELLPADDING=number

This adds a padding of pixels to the data contained in the cell equal to the number specified in the attribute. Just like most framed pictures have a space between the picture and the frame.