Tables Course

 

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
Yankees 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
Yankees 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
Yankees 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
Yankees 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
Yankees 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.