COLSPAN and ROWSPAN

Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up. For example, we might want to create header cells for each department in our table of names and phone numbers. In this table, the header cells in the first and fifth rows span across two columns to indicate the department for each group of names.
<TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2>Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> <TR> <TH COLSPAN=2>Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TABLE>

</TR> </TR> </TR> </TR> </TR> </TR>

which gives us: Production Raha Mutisya 1493

Shalom Buraka 3829 Brandy Davis Sales Claire Horne Bruce Eckel Danny Zeman 4827 7246 5689 0283

It often happens with multiple-column cells that a little color helps to set off the headers, giving the table a more visually organized look. Let's add some color to the headers using BGCOLOR.
<TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>

<TR> <TD>Bruce Eckel</TD> <TR> <TD>Danny Zeman</TD> </TABLE>

<TD>7246</TD> </TR> <TD>5689</TD> </TR>

which gives this table: Production Raha Mutisya 1493

Shalom Buraka 3829 Brandy Davis Sales Claire Horne Bruce Eckel Danny Zeman
ROWSPAN

0283

4827 7246 5689

sets how many rows a cell spans. ROWSPAN can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts in. It's particularly useful in this situation to add borders to the table during the design process, even if the table won't ultimately use borders. This table code creates two header cells which span three rows each:
<TABLE BORDER=2 CELLPADDING=4> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>

which creates

Raha Mutisya

1493

Production Shalom Buraka 3829 Brandy Davis Claire Horne Sales Bruce Eckel Danny Zeman 0283 4827 7246 5689

Note that in the two rows after each header, the first cell in the row ends up in the second column because the first column is taken up by the multi-column cell.

Table Borders: The Basics

The most basic issue concerning table borders is if there should be any borders at all. That issue is settled with the BORDER attribute to the <TABLE ...> tag. By default, tables do not have borders. For example, this code, which does not have any attributes in the <TABLE ...> tag, produces a table with no borders:
<TABLE> <TR> <TD>watermelon</TD> <TD>grapes</TD> </TR> <TR> <TD>peaches</TD> <TD>bananas</TD> </TR> </TABLE>

which gives us watermelon grapes peaches bananas To give the table borders we add the BORDER attribute to the <TABLE ...> tag:
<TABLE BORDER>

which gives us this table watermelon grapes peaches bananas sets the width of code creates a table with
BORDER <TABLE BORDER=10>

the outer border. So, for example, this an outside border width of 10:

which gives us this table watermelon grapes peaches bananas Note that BORDER sets the width of the outside border. The width of the inside borders are set with CELLSPACING.

Attribute for <TABLE ...>

CELLSPACING = integer

Usage Recommendation use it

CELLSPACING sets the amount of space between the cells of a table. If the borders are visible, CELLSPACING controls the width of the internal borders. So, for example, the following examples demonstrate CELLSPACING when it is absent, when it it set to 2, and

when it is set to 10.

this code
<TABLE BORDER>

produces this peaches cherries walnuts almonds peaches cherries walnuts almonds peaches walnuts cherries almonds

<TABLE BORDER CELLSPACING=2>

<TABLE BORDER CELLSPACING=10>

Attribute for <TABLE ...>

WIDTH = "width expression"

sets the width of the table. The width can be expressed either as an absolute value in pixels, or as a percentage of the screen width. If the width is not given, the browser
WIDTH

will use built in routines to determine what width looks best (according to the browser programmer's tastes). Some examples: A common value for WIDTH is 100%, which gives the table a nice full-page look.
<TABLE BORDER WIDTH=100%> <TR><TD>peaches</TD><TD>cherries</TD></TR> <TR><TD>walnuts</TD><TD>almonds</TD></TR> </TABLE>

peaches walnuts
<TABLE BORDER WIDTH=65%>

cherries almonds cherries almonds

peaches walnuts

For tables that are less than 100%, putting the table inside <CENTER ...> often looks better than leaving the table left aligned:
<CENTER> <TABLE BORDER WIDTH=50%> </CENTER>

peaches walnuts

cherries almonds

Attribute for <TABLE ...>

BGCOLOR = color expression

sets the background color of the entire table. For example, this code creates a table with a background color of yellow:
BGCOLOR

this code
<TABLE BGCOLOR=YELLOW> <TR> <TD>lemons</TD> <TD>grapefruit</TD> </TR> <TR> <TD>bananas</TD> <TD>pineapple</TD> </TR> </TABLE>

produces this lemons grapefruit bananas pineapple

You can also set the background colors of rows with <TR BGCOLOR="..."> and of individual cells with <TD BGCOLOR="...">.

Netscape and MSIE have different ways of displaying the background color. MSIE fills the entire table with the background color. Netscape only fills the cells, but not the spaces between the cells, resulting in an annoying block of individual colored cells:

MSIE

Netscape

You can kludge around the Netscape bug by enclosing the table in a one-cell outer table: this code
<TABLE BGCOLOR="#CCCC99"><TR><TD> <TABLE> <TR> <TD>lemons</TD> <TD>grapefruit</TD> </TR> <TR> <TD>bananas</TD> <TD>pineapple</TD> </TR> </TABLE> </TD></TR></TABLE>

produces this lemons grapefruit bananas pineapple

Attribute for <TABLE ...>

BACKGROUND = "URL"

Usage Recommendation

This effect is done better with styles. See Table Background Colors and Images sets a background image for the table. Suppose, for example, that you want to set this image as the background image for your table:
BACKGROUND

Set BACKGROUND to the URL of the image:

<TABLE CELLPADDING=8 CELLSPACING=0 BACKGROUND="deepsea.gif">

which gives us this table: blah blah groovy dude yeah yeah right on

Notive that we run into the classic problem with background images: the letters don't show up against the background. To fix this you could go to a lot of trouble using the <FONT ...> tag to set the letters to white in every table cell, but that's a lot of messy work. Instead let's do it the easy way and just use styles. First, we'll put a set of style rules in the <HEAD> section of the document:
<STYLE TYPE="text/css"> <!-.deepsea, .deepsea TD, .deepsea TH { background-image: url('deepsea.gif'); background-color:blue; color:white; font-family: sans-serif; font-weight:600; } --> </STYLE>

These rules state that for any element with its class set to deepsea, or any <TD ...> or <TH ...> within a deepsea element, there are several rules:

the background image is deepsea.gif

the background color is blue the font color is white the font style is sans-serif (which shows up better against dark backgrounds) the font weight is 600 (which makes it bolder to show up against the dark

background) Now we set the table to the deepsea class. Notice in the following code that we don't need to set the font colors for each individual cell:
<TABLE CELLPADDING=8 CELLSPACING=0 CLASS="deepsea">

<TR> <TD>blah blah</TD> <TD>yeah yeah</TD> </TR> <TR> <TD>groovy dude</TD> <TD>right on</TD> </TR> </TABLE>

which gives us this table: blah blah groovy dude yeah yeah right on

For more information about table background colors and images see Table Background Colors and Images.

Attribute for <TABLE ...> ALIGN = LEFT | RIGHT

sets which side of the page the table will rest on. ALIGN makes the table behave much like a graphic image: text can wrap around the table, you can set horizontal and vertical space from the table, and you can use <BR ...> to move past the table.
ALIGN

Attributes for <TABLE ...>

HSPACE = integer VSPACE = integer

and VSPACE indicate the amount of horizontal and vertical space to put between the table and surrounding text. They must be used in conjunction with ALIGN=LEFT or ALIGN=RIGHT. These attributes are only recognized by Netscape.
HSPACE

sets the amount of horizontal space between the table and surrounding text. The following examples demonstrate HSPACE when it is absent, when it is set to 10, and when it is set to 50.
HSPACE

this code
<TABLE BORDER ALIGN=LEFT>

produces this Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. fruit state watermelon Georgia apples Washington blueberries New Hampshire Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada

(no HSPACE)

<TABLE BORDER

ALIGN=LEFT HSPACE=10>

yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. fruit state watermelon Georgia apples Washington blueberries New Hampshire Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. fruit state watermelon Georgia apples Washington blueberries New Hampshire

<TABLE BORDER ALIGN=LEFT HSPACE=50>

sets the amount of vertical space between the table and surrounding text. VSPACE can be confusing because the space below the table can't break in the middle of a line. The space below the table will almost never be the actual value of VSPACE, it will usually be a little more. The following examples demonstrate HSPACE when it is absent, when it is set to 10, and when it is set to 50.
VSPACE

this code
<TABLE BORDER ALIGN=LEFT>

produces this Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. fruit state watermelon Georgia apples Washington blueberries New Hampshire Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. fruit state watermelon Georgia apples Washington blueberries New Hampshire Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. fruit state watermelon Georgia apples Washington blueberries New Hampshire

<TABLE BORDER ALIGN=LEFT VSPACE=10>

<TABLE BORDER ALIGN=LEFT VSPACE=50>

Attribute for <TABLE ...>

HEIGHT = "height expression"

Usage Recommendation don't use it sets the height of the table. HEIGHT should almost never be used. It's best to let the browser determine the necessary height of the table based on the table's contents.
HEIGHT

This code creates a table that is 300 pixels high:

<TABLE HEIGHT=300 BORDER=1> <TR> <TD>lemons</TD> <TD>grapefruit</TD> </TR> <TR> <TD>bananas</TD> <TD>pineapple</TD> </TR> </TABLE>

which produces this table: lemons grapefruit bananas pineapple

Table Border Colors

In this section we'll look at setting the colors of table borders. First we'll look at setting the borders to a single color. In the next page we'll look at setting the light and dark shades of the border. The color of the table borders as a whole is set with the BORDERCOLOR attribute of the <TABLE ...> tag. For example, this code sets the border to red: this code
<TABLE BORDER=10 BORDERCOLOR=RED> <TR> <TD>carrots</TD> <TD>garlic</TD> </TR> <TR> <TD>celery</TD> <TD>onions</TD> </TR> </TABLE>

produces this carrots garlic celery onions

Netscape and MSIE have very different ways of rendering BORDERCOLOR. Netscape maintains the 3-D appearance. MSIE renders all borders as the same color, making the border appear flat. MSIE also sets the color of the inner borders. Browser How The Table Appears

MSIE

Netscape

In the next page we'll look at how get a little more control over the border colors.

Table Borders: Light and Dark

In the previous example we set a single color for all the borders of the table. In this page we'll look at setting the "light" and the "dark" borders separately. Note that currently only MSIE recognizes the markup necessary to set the light and dark borders separately. (See Table Borders: All Three Border Color Attributes At Once about putting all three attributes in the tag.) Visual web browsers such as Netscape and MSIE render table borders with a three-dimensional appearance. They do this by making the top and left borders lighter than the bottom right borders, This makes the table look like it is partly under a light source with and partly in shadow. If you visualize a light source above and to the left of the table it's easier to remember which borders are light and which are dark.

We set the light and dark borders with BORDERCOLORLIGHT and BORDERCOLORDARK. So, for example, this code sets the light borders to yellow and the dark to blue:
<TABLE BORDER=10 BORDERCOLORLIGHT=YELLOW BORDERCOLORDARK=BLUE> <TR> <TD>blah blah blah</TD> <TD>yeah yeah yeah</TD> </TR> <TR> <TD>whatever whatever</TD> <TD>right on!</TD> </TR> </TABLE>

which gives us this table: blah blah blah yeah yeah yeah whatever whatever right on!