tutor

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
that we will put in each cell.

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

"ALIGN=LEFT VALIGN=MIDDLE"


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

Flour
Milk
Sugar
Eggs
and we will put them in their own <TR> Table Row.

<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.

CELLSPACING=number
This separates the cells with a number of pixels specified in the attribute. Just like a lane in a bowling alley has a gutter on each side.


CELLPADDING

<TABLE BORDER=3 CELLPADDING=12>
<TR>
<TD>Lets</TD>
<TD>Make</TD>
<TD>Some</TD>
<TD>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

The default value for this attribute is 1 so that any text in the cells won't be banging up against the borders.


If we substitute CELLSPACING for CELLPADDING we get a slightly different effect.

<TABLE BORDER=3 CELLSPACING=12>
<TR>
<TD>Lets</TD>
<TD>Make</TD>
<TD>Some</TD>
<TD>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

The default value for the CELLSPACING attribute is 2.


We can, of course, use these attributes in combination.

<TABLE BORDER=3 CELLPADDING=12 CELLSPACING=12>
<TR>
<TD>Lets</TD>
<TD>Make</TD>
<TD>Some</TD>
<TD>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


The Professor's Table

Introduction

Lesson No 1Lesson No 2Lesson No 3Lesson No 4Lesson No 5

DESIGN BY

THE PROFESSOR

tee hee

beseen counter