tutor

TABLE LESSON NO 1

Lets make it look more like a table and give it a border.

<TABLE BORDER=3>
<TR>
<TD><IMG SRC="referee.gif" WIDTH=110 HEIGHT=123"></TD>
</TR>
</TABLE>

Referee


When no sizes are specified the table is only as big as it needs to be. This brings up a good point.

Which way will the table expand as more Data is added?

Lets replace the referee with the following Statement and keep the same table parameters.

You look more like you do now than when I last saw you...:-)

<TABLE BORDER=3>
<TR>
<TD>You look more like you do now than when I last saw you...:-)</TD>
</TR>
</TABLE>

Think about this for a few moments and then go here for the answer.


As, you saw, specifying a Table size was pretty simple. Width can be specified as a percentage of the available screen size or as an absolute. Height could be specified as a percentage. However, as you have seen, the Table will expand vertically to accommodate the data. It is better to use an absolute value when specifying height.

<TABLE BORDER=3 WIDTH=200 HEIGHT=200>
<TR>
<TD><IMG SRC="referee.gif" WIDTH=110 HEIGHT=123></TD>
</TR>
</TABLE>

referee

NOTE:This is also the default alignment for ALIGN=LEFT

Just thought of something. The Professor has a

COOL BACKGROUND

that he would like to show you.


Lets look at the NINE Table alignments. For simplicity, we will only use the <TD> and</TD> tags.

<TD ALIGN=LEFT VALIGN=TOP>1</TD>
<TD ALIGN=CENTER VALIGN=TOP>2</TD>
<TD ALIGN=RIGHT VALIGN=TOP>3</TD>
<TD ALIGN=LEFT>4</TD>
<TD ALIGN=CENTER>5</TD>
<TD ALIGN=RIGHT>6</TD>
<TD ALIGN=LEFT VALIGN=BOTTOM>7</TD>
<TD ALIGN=CENTER VALIGN=BOTTOM>8</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>9</TD>

123
456
789


I will take a second now to show you something else. Images can manipulated in a table data cell. The Professor just happens to have a little ape.gif handy.

<TABLE BORDER=3 WIDTH=100 HEIGHT=100>
<TR>
<TD ALIGN=RIGHT><IMG SRC="ape.gif" WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>

ape

As you can see the ape lined up in the middle.(--The default alignment, if a vertical alignment is not specified.--)

I suppose that now is also a good time to stress that it is good practice to include size attributes with all your image tags. Doing so makes it easier for the browser, as the browser will format the space required, and avoids any nasty little surprises.


Before we go to Table Lesson No 2

lets
tableusing
colored borders

The Professor's Table

Introduction

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

DESIGN BY

THE PROFESSOR

tee hee