Draac.Com's Tables Course

• Table Talk !
• Table Tricks
• Html Test Bed

Draac.Com's Tables Course

Page 3 - Tables Course
You Can Build Your Whole
Web Site Using Tables.

• Attributes For The Table Data Cell

These tags shown below will effect
the table data cells <TD>
or the table headings <TH>.
Here are some of the attributes that can be
used within the table data cells or table headings.

Attribute Description

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

BACKGROUND="URL" Specifies background
image for the cell.

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

COLSPAN="#" Specifies how many
columns of the table
this cell should span.

ROWSPAN="#" Specifies how many
rows of the table
this cell should span.

WIDTH="#" Specifies the cell
width in terms of the
number of pixels
or percentage.

HEIGHT="#" Specifies the cell
height in terms of the
number of pixels.

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

• Adding The Attributes To The Table Cell

We will continue with the last table from page two.
Adding the attributes for the table cells & headings.
You will see these effects on each of the cells.
Lets first ALIGN the table cell's contents.

<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH>Team</TH>
<TH>City</TH>
</TR>
<TR>
<TD ALIGN="CENTER">Red Sox</TD>
<TD ALIGN="CENTER">Boston</TD>
</TR>
<TR>
<TD ALIGN="CENTER">Yankees</TD>
<TD ALIGN="CENTER">New York</TD>
</TR>
</TABLE>
The Result Is:

Team City

Red Sox Boston

Yankee New York

We have centered the contents of the table cells.
Next add BGCOLOR to the table cells & headings.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">City</TH>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
Red Sox</TD>
<TD ALIGN="CENTER" BGCOLOR="slategray">
Boston</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="slategray">
Yankees</TD>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
New York</TD>
</TR>
</TABLE>
The Result Is:

Team City

Red Sox Boston

Yankee New York

We now have colored the table cells and headings.
In this next example we will add a new
table data cell and use the COLSPAN
to span it across the two cells above it.
Note that I closed the table row before
adding the new table data cell.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">City</TH>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
Red Sox</TD>
<TD ALIGN="CENTER" 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">
Great Baseball Rivals</TD>
</TR>
</TABLE>
The Result Is:

Team City

Red Sox Boston

Yankee New York

Great Baseball Rivals

We have added a new table data cell and used
the COLSPAN attribute to span it across
the two table data cells above it.
In this new table data cell we created,
lets add the HEIGHT attribute to the cell.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">City</TH>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
Red Sox</TD>
<TD ALIGN="CENTER" 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">
Great Baseball Rivals</TD>
</TR>
</TABLE>
The Result Is:

Team City

Red Sox Boston

Yankee New York

Great Baseball Rivals

Notice the HEIGHT of that cell is now altered.
Again we will use this last table data cell
to add the VALIGN attribute to see what it does.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">City</TH>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
Red Sox</TD>
<TD ALIGN="CENTER" 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

Now the text in that table data cell
is vertically aligned at the bottom of the cell.
Play around with alignment, cell sizes and colors.
When your ready move onto the next lesson.

Back------Next

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