Draac.Com's Tables Course

• Table Talk !
• Table Tricks
• Html Test Bed

Draac.Com's Tables Course

Page 2 - Tables Course
Tables Offer The Best
Control Over Your Web Site.

• Lets Expand Our Basic Table

There are tags that will enhance
our basic table from lesson one.
First lets explore the <TABLE> tag itself.
These tags below are some of the basic
attributes that can be be used within
the table formating tag of <TABLE>

Attribute Description

ALIGN="___" Aligns the table to the
LEFT, RIGHT or CENTER
(* see notation below)

BACKGROUND="URL" Specifies background
image for the table.
(** see notation below)

BGCOLOR="color" Sets background color
by rrggbb or color name.
(** see notation below)

CELLSPACING="#" Inserts specified space
between cells.
It's value is in pixels.

CELLPADDING="#" Inserts space between the
cell border and
the cell contents.
It's value is in pixels.

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

* Note: The align center does not work with MSNTV.
MSNTV users must center align using <center> & </center>
on either side of the whole table code itself.
**Note: These attributes vary depending on browser preferences.

• Adding The Attributes To The Table

Lets add a few of these attributes to our
sample table from page one of the lessons.

Team City

Red Sox Boston

Yankee New York

Our sample table from page one.
We will explore a few of these attributes one
at a time so you will see each of the effects.
First lets add the CELLSPACING to the table.

<TABLE BORDER=1 CELLSPACING="10">
<TR>
<TH>Team</TH>
<TH>City</TH>
</TR>
<TR>
<TD>Red Sox</TD>
<TD>Boston</TD>
</TR>
<TR>
<TD>Yankees</TD>
<TD>New York</TD>
</TR>
</TABLE>
The Result Is:

Team City

Red Sox Boston

Yankee New York

Our table now has thicker cellspacing.
Next lets add the CELLPADDING to the table.

<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15">
<TR>
<TH>Team</TH>
<TH>City</TH>
</TR>
<TR>
<TD>Red Sox</TD>
<TD>Boston</TD>
</TR>
<TR>
<TD>Yankees</TD>
<TD>New York</TD>
</TR>
</TABLE>
The Result Is:

Team City

Red Sox Boston

Yankee New York

Cellpadding is just what it describes,
padding around the content of the table's cells.
Next lets add a BGCOLOR to the table.

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

Team City

Red Sox Boston

Yankee New York

We now have colored the background of the table.
Finally, lets add a WIDTH to the table.

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

Team City

Red Sox Boston

Yankee New York

Our table is now set at 75% of the page's width.
Experiment with the values of the above attributes.
When your ready move onto page three
of the lessons, there is more to learn.

Back------Next

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