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 text
  1. Lets
  2. Make
  3. Some
  4. 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 you see may be drastically different than what you expected to see!

Lets, first, express WIDTH as an absolute value;

<TABLE BORDER=1 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" for both tables.

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

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

<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>
<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 and are not required there.

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=1 WIDTH=620 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. Notice that the browser will calculate the cell widths when they are not specified. So choose wisely.

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

<TABLE BORDER=1 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=1 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 Navigation

Introduction

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

DESIGN BY
THE PROFESSOR

home Valid CSS! HTML Hit Counter