Draac.Com's Tables Course

• Table Talk !
• Table Tricks
• Html Test Bed

Draac.Com's Tables Course

Page 4 - Tables Course
For More On Tables Visit
Table Talk Here At Draac.Com.

• Attributes For The Table Row

These tags shown below will effect
the table row <TR>.
Here are some of the attributes that can be
used within the table row.

Attribute Description

ALIGN="___" Aligns the cell content to the
LEFT, RIGHT or CENTER

BGCOLOR="color" Sets background color
by rrggbb or color name.

VALIGN="___" Controls vertical
alignment within the cell.
Values are TOP, MIDDLE, BOTTOM

• Adding The Attributes To The Table Row

We will continue with the last table from page three.

Lets ALIGN the table row contents.
For this lesson, I have removed the alignment
attributes in the table data cells of the
table row we will be working with.
Since this table row attribute will effect each
table data cell across that table row.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">City</TH>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#98fb98">Red Sox</TD>
<TD BGCOLOR="slategray">Boston</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="slategray">
Yankees</TD>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
New York</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="tan"
COLSPAN="2" HEIGHT="75" VALIGN="BOTTOM">
Great Baseball Rivals</TD>
</TR>
</TABLE>
The Result Is:

Team City

Red Sox Boston

Yankee New York

Great Baseball Rivals

Our table looks the same but we now have
centered aligned all the table data cells
in the second table row with a single attribute
within the table row.
Fool around with the table row attributes.
I think you get the idea now how to add
the attributes to each of the table tags.

• Adding Images To Your Tables

We have been using text in our table data cells
but images can be used as well. These images
will respond to the attributes in the same way
our text did.
Here are the two images for you to save
to use in our lessons .
Save: Red Sox Logo -- Yankees Logo
Lets add images of the team logos in place
of the city names that we had in text form.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">Team Logo</TH>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#98fb98">Red Sox</TD>
<TD BGCOLOR="slategray">
<IMG SRC="redsox.gif"></TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="slategray">
Yankees></TD>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
<IMG SRC="yankees.gif"></TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="tan"
COLSPAN="2" HEIGHT="75" VALIGN="BOTTOM">
Great Baseball Rivals</TD>
</TR>
</TABLE>
The Result Is:

Team Team Logo

Red Sox red sox

Yankees yankees

Great Baseball Rivals

We have just added two images to the
table data cells. Any item can be added
to a table data cell. Try adding your
web page counter or a banner to the cells.

• A Finished Look To The Table Example

In this final example of our table.
I took the liberty of adding some font attributes,
i changed a few colors and added new a image,
to give our example it's final look.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue"
WIDTH="75%">
<TR>
<TH BGCOLOR="white">
<FONT SIZE="5" COLOR="darkblue">
Team
</FONT>
</TH>
<TH BGCOLOR="white">
<FONT SIZE="5" COLOR="darkred">
Team Logo
</FONT>
</TH>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="darkblue">
<FONT SIZE="4" COLOR="white">
<B>
Boston
<BR>
Red Sox
</B></FONT>
</TD>
<TD BGCOLOR="darkred">
<IMG SRC="redsox.gif" WIDTH="68" HEIGHT="68"
ALT="red sox">
</TD>
</TR>
<TR>
<TD ALIGN="center" BGCOLOR="darkred">
<FONT SIZE="4" COLOR="white">
<B>
New York
<BR>
Yankees
</B></FONT>
</TD>
<TD ALIGN="CENTER" BGCOLOR="darkblue">
<IMG SRC="yankees.gif" WIDTH="68"
HEIGHT="68" ALT="yankees">
</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="white"
COLSPAN="2" HEIGHT="150">
<IMG SRC="baseball.jpg" WIDTH="208"
HEIGHT="68" ALT="baseball banner">
<P>
<FONT SIZE="3" COLOR="darkblue">
<B><I>Great Baseball Rivals</I></B>
</FONT>
</TD></TR></TABLE>
The Result Is:

Team Team Logo

Boston
Red Sox red sox

New York
Yankees yankees

Great Baseball Rivals

What do you think of the final example ?
As you have learned, you can do a lot with tables.
It is a great way to organize text and images
on your web pages.
For more on tables and what they can do,
Visit Table Talk here at Draac.Com.

Back------Home

Draac.Com Is Hosted By ValueWeb
Register UK domain names at Domain Names UK