tutor

TABLE LESSON NO 3

LETS TALK TEXT

Here is the text we will use for our discussion,

The official record will be reviewed by the Appeals Commission

and here is the image we will use

<img src="referee.gif" width=110 height=123 alt=ref>
referee

What we want to do is to have the text aligned to the RIGHT of the IMAGE. There are a few ways to accomplish this.
<IMG SRC="referee.gif" WIDTH=110 HEIGHT=123> The official record will be reviewed by the Appeals Commission
refereeThe offical record will be reviewed by the Appeals Commission

Speaking of appeal. This doesn't have too much!!!

We could use the <P> paragraph tag with the ALIGN=RIGHT attribute

<IMG SRC="referee.gif" WIDTH=110 HEIGHT=123> <P ALIGN=RIGHT>The offical record will be reviewed by the Appeals Commission
referee

The offical record will be reviewed by the Appeals Commission


As you can see, the text did align right, but the result was not very satisfactory. Too far right and too low.
Lets try aligning the image LEFT and then write the text
<IMG SRC="referee.gif" WIDTH=110 HEIGHT=123 ALIGN=LEFT>The offical record will be reviewed by the Appeals Commission

refereeThe offical record will be reviewed by the Appeals Commission


This is an improvement, but as you can see the text is to close to the image and a little too high. The height can be easily fixed by inserting the appropiate no of <BR>'s preceeding the text.

<IMG SRC="referee.gif" WIDTH=110 HEIGHT=123 ALIGN=LEFT><BR><BR>The offical record will be reviewed by the Appeals Commission

refereeThe offical record will be reviewed by the Appeals Commission

That's got the height problem solved.
Now lets use the hspace attribute to move the text over.

<IMG SRC="referee.gif" WIDTH=110 HEIGHT=123 ALIGN=LEFT hspace="35"><BR><BR>The offical record will be reviewed by the Appeals Commission

refereeThe offical record will be reviewed by the Appeals Commission
NOTE..hspace places an equal space on each side of the image.

Color can be expressed in three ways
NameHexRGB
Linen#faf0e6rgb(250,240,230)
RGB are the three primary Web and TV colors
Names can be used wherever colors can be used such as BACKGROUND and TEXT attributes. Hex values are more widely used a they provide more subtle color usage.
You can find the RGB values in The Professor's List of Colors and a color selection from the Color Cube. Both offer a wide selection of color variants.
Since we are talking TABLES, lets use one to align some text. Here is how we will align text to the LEFT

<TABLE BGCOLOR="blue" WIDTH=350 BORDER=5>
<TR><TD>
<TABLE BGCOLOR="black" WIDTH=350>
<TR><TD align=center>
<FONT COLOR=WHITE>Here is<p>How we align<p>
text to left<p>of<p>The Professor</FONT>
</TD><TD>
<IMG SRC="grad.gif" WIDTH=152 HEIGHT=199>
</TD></TR></TABLE>
</TD></TR></TABLE>
spacer
Here is

How we align

text to left

of

The Professor

tutor

Style used for this table

.tableblu{ border:5px solid blue; width:350px; border-spacing:0px; }
.tableblu td{ padding:0px; }
.tableblack{ background-color:#000000; width:350px; border-spacing:0px; }
.tableblack td{ padding:0px; text-align:center; color:#ffffff; }

<TABLE class=tableblu2>

Here is how we will align text to the Right of The Professor

<TABLE BGCOLOR="blue" WIDTH=350 BORDER=5>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR="black" WIDTH=350>
<TR><TD ALIGN=CENTER>
<IMG SRC="grad.gif" WIDTH=152 HEIGHT=199>
</TD><TD ALIGN=CENTER>
<FONT COLOR=WHITE>Here is<p>How we align<p>text
to right<p>of<The Professor</FONT>
</TD></TR></TABLE>
</TD></TR></TABLE>


spacer
tutor Here is

How we align

text to right

of

The Professor

Style used for this table

.tableblu{ border:5px solid blue; width:350px; border-spacing:0px; }
.tableblu td{ padding:0px; }
.tableblack{ background-color:#000000; width:350px; border-spacing:0px; }
.tableblack td{ padding:0px; text-align:center; color:#ffffff; }

<TABLE class=tableblu2>

You may also use a TABLE in a <TD> cell. Here is the table we will use.

<TABLE BGCOLOR="blue" BORDER=5>
<TR><TD ALIGN=CENTER>
<IMG SRC="grad.gif" WIDTH=152 HEIGHT=192>
</TD></TR></TABLE> 		spacer
tutor

Style used for this table

.tableblu2{ background-color:#0000ff; border:5px solid blue; border-spacing:0px; }
.tableblu2 td{ padding:0px; text-align:center; }

<TABLE class=tableblu2>

Now we will make a table to demonstrate how to put text to the LEFT of an IMAGE and to the RIGHT of the image.

The table will have a red background color with 3 TD cells which will provide the red border and a width of 360 pixels.

  1. 1st cell will have a black background color
  2. 2nd cell will have a blue background color
  3. 3rd cell will have a black background color
360 was chosen as it is a multiple of three, which is the number of cells. Something to take into consideration when assigning table widths. The TD cell widths do not have to be specified as the browser will compute them based on the table width. Unless, of course, there are stylistic reasons to do so.

<table bgcolor=red width=360><tr><td>
<table bgcolor=black>
<td align=center>
<FONT COLOR="white">This is how we put text to the left
</TD>
<TD align=center bgcolor=blue>
<IMG SRC="grad.gif" WIDTH=152 HEIGHT=192> </TD>
<TD align=center>
<FONT COLOR="white">This is how we put text to the right
</FONT>
</TD></TR></TABLE> 		spacer
This is how we put text to the left This is how we put text to the right

Style used for this table

.tablered{ border: red solid; background-color:#ff0000;
width:360px; border-spacing:5px; }
.tableblacktwo{ background-color:#000000; }
.tableblacktwo .td1{ background-color:#000000;
color:#ffffff; text-align:center; }
.tableblacktwo .td2{ background-color:#0000ff;
color:#ffffff; text-align:center; }
<TABLE class=table4red>

In case you were wondering why the record was being sent to the Appeals Commission

The referee decided, upon viewing the replay, that the official referee record would be reviewed by the Appeals Commission
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