Tables Course

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

The Result Is:

Team	City
Red Sox	Boston
Yankees	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 t table data cell we created, lets add the HEIGHT attribute to the cell.

The Result Is:

Team	City
Red Sox	Boston
Yankees	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.

The Result Is:

Team	City
Red Sox	Boston
Yankees	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.

Next Prev