Web Design in a Nutshell A Desktop Quick Reference By Jennifer Niederst 1st Edition November 1998 1-56592-515-7, Order Number: 5157 580 pages, $24.95

Sample Chapter 10: Tables

HTML tags for creating tables were originally developed for presenting rows and columns of tabular data, however, designers quickly co-opted them as a valuable tool for controlling the layout of web pages. Tables allow you to create columns of text, hold white space between elements, and constrict the dimensions of the page's content in ways other HTML formatting tags won't.

The HTML 4.0 Specification on tables is a great deal more complex than the previous 3.2 standard. It makes an effort to bring context and structure to table data as well as provide systems for incremental display and display on non-visual display agents (such as speech- and Braille-based browsers). Of course, this is just in its proposal stage as of this writing, so it will take a while to see how browsers will adopt the standards in practical use. To read what the HTML 4.0 Specification has to say about tables, see the W3C's site at http://www.w3c.org/TR/REC-html40/struct/tables.html.

Summary of Table Tags

In this section, browser support for each tag is noted to the right of the tag name. Browsers that do not support the tag aregrayed out. Browsers that deprecate the tag are noted with a superscript D. Tag usage is indicaetd below the tag name. A more thorough listing of attributes for each tag, according to the HTML 4.0 Specification, appears in Appendix A, HTML Tags and Elements.

<caption>

NN: 2, 3, 4 - MSIE: 2, 3, 4, 5 - HTML 4 - WebTV - Opera3

<caption>...</caption>

Provides a brief summary of the table's contents or purpose. According to the W3C HTML 4.0 Specification, the caption must immediately follow the <table> tag and precede all other tags. The width of the caption is determined by the width of the table. The caption's position as displayed in the browser can be controlled with the align attribute (or valign in MSIE).

Attributes

align=top|bottom|left|right|center

Positions the caption relative to the table. This attribute has been deprecated by the W3C 4.0 Spec in favor of style sheet positioning.

summary=text

W3C 4.0 Specification only. Used to provide a longer description of the table's contents that could be used by a speech- or Braille-based web browser.

valign=top|bottom

Internet Explorer 3.0 and higher only. Positions the caption above or below the table (top is the default).

<col>

MSIE: 4, 5 - HTML 4

<col>

Specifies properties for a column (or columns) within a column group (<colgroup>). Columns can share attributes (such as text alignment) without being part of a formal structural grouping.

Column groups and columns were introduced by Internet Explorer 3.0 and are now proposed by the HTML 4.0 Specification as a standard way to label table structure. They may also be useful in speeding the table display (i.e., the columns can be displayed incrementally without waiting for the entire contents of the table).

Attributes

align=left|right|center

Specifies alignment of text in the cells of a column.

char=character

Specifies a character along which the cell contents will be aligned. The default character is a decimal point (language-appropriate).

charoff=length

Specifies the distance to the first alignment character (char) on each line. If a line doesn't use an alignment character, it should be horizontally shifted to end at the alignment position.

span=number

Specifies the number of columns "spanned" by the <col> element (which shares its attributes with all the columns it spans).

valign=top|middle|bottom|baseline

Specifies the vertical alignment of text in the cells of a column.

width=pixels, percentage, n*

Specifies the width (in pixels, percentage, or relative) of each column spanned by the <col> element. It overrides the width attribute of the containing <colgroup> element.

<colgroup>

MSIE: 4, 5 - HTML 4

<colgroup>...</colgroup>

Creates a column group, a structural division within a table that can be appointed attributes with style sheets or HTML. A table may include more than one column group. The number of columns in a group is specified either by the value of the span attribute or by a tally of columns <col> within the group. Its end tag is optional.

Column groups and columns were introduced by Internet Explorer 3.0 and are now proposed by the HTML 4.0 Specification as a standard way to label table structure. They may also be useful in speeding the table display (i.e., the columns can be displayed incrementally without waiting for the entire contents of the table).

Attributes

align=left|right|center

Specifies the alignment of text in the cells of a column group.

char=character

Specifies a character along which the cell contents will be aligned. The default character is a decimal point (language-appropriate).

charoff=length

Specifies the distance to the first alignment character (char) on each line. If a line doesn't use an alignment character, it should be horizontally shifted to end at the alignment position.

span=number

Specifies the number of columns in a column group. If span is not specified, the default is 1.

valign=top|middle|bottom|baseline

Specifies the vertical alignment of text in the cells of a column group.

width=pixels, percentage, n*

Specifies a default width for each column in the current column group. Width can be measured in pixels, percentages, or defined as a relative size (*). For example, 2* sets the column two times wider than the other columns; 0* sets the column width at the minimum necessary to hold the column's contents.

<table>

NN: 2, 3, 4 - MSIE: 2, 3, 4, 5 - HTML 4 - WebTV - Opera3

<table>...</table>

Defines the beginning and end of a table. The end tag is required, and its omission may cause the table not to render in some browsers.

Attributes

align=left|right|center

Aligns the table within the text flow (same as align in the <img> tag). The default alignment is left. The center value is not universally supported, so it is more reliable to center a table on a page using tags outside the table (such as <center> or <div>). This attribute has been deprecated by the W3C 4.0 Specification in favor of style sheet positioning.

background=url

Specifies a graphic image to be tiled in the background of the table. In Internet Explorer 3.0 and higher, the image tiles behind the entire table. In Netscape Navigator 4.0, the tile repeats in each individual frame (although its support is not officially documented).

bgcolor="#rrggbb" or color name

Specifies a background color for the entire table. Value is specified in hexadecimal RGB values or by color name (see Chapter 5, HTML Overview, for more information on specifying colors in HTML).

border=number

Specifies the width (in pixels) of the border around the table and its cells. Set it to border=0 to turn the borders off completely. The default value is 1. Adding the word border without a value results in a 1-pixel border.

cellpadding=number

Sets the amount of space, in number of pixels, between the cellborder and its contents. The default value is 1. For more information, see the "Space Between Cells" section in this chapter.

cellspacing=number

Sets the amount of space (in number of pixels) between table cells. The default value is 2. For more information, see the "Space Between Cells" section in this chapter.

frame=void|above|below|hsides|lhs|rhs|vsides|box|border

Tells the browser where to draw borders around the table. The values are as follows:

void	the frame does not appear (default)
above	top side only
below	bottom side only
hsides	top and bottom sides only
vsides	right and left sides only
lhs	left-hand side only
rhs	right-hand side only
box	all four sides
border	all four sides

When the border attribute is set to a value greater than zero, the frame defaults to border unless otherwise specified. This attribute was introduced by Internet Explorer 3.0 and now appears in the HTML 4.0 Specification. It is not supported by Netscape as of this writing.

height=number, percentage

Specifies the height of the entire table. It can be specified in a specific number of pixels or by a percentage of the browser window.

hspace=number

Holds a number of pixels space to the left and right of an aligned table (same as hspace in the <img> tag).

rules=all|cols|groups|none|rows

Tells the browser where to draw rules within the table. Its values are as follows:

none	no rules (default)
groups	rules appear between row groups (thead, tfoot, and tbody) and column groups
rows	rules appear between rows only
cols	rules appear between columns only
all	rules appear between all rows and columns

When the border attribute is set to a value greater than zero, rules default to "all" unless otherwise specified.

This attribute was introduced by Internet Explorer 3.0 and now appears in the HTML 4.0 Specification. It is not supported by Netscape as of this writing.

summary=text

Provides a summary of the table contents for use with non-visual browsers.

vspace=number

Holds a number of pixels space above and below an aligned table (same as vspace in the <img> tag).

width=number, percentage

Specifies the width of the entire table. It can be specified in a specific number of pixels or by percentage of the browser window.

Internet Explorer 2.0 and higher only

bordercolor="#rrggbb" or color name

Specifies the color of the main center portion of a table border. (Table borders are rendered using three color values to create a 3-D effect.)

bordercolorlight="#rrggbb" or color name

Specifies the color of the light shade used to render 3-D-looking table borders.

bordercolordark="#rrggbb" or color name

Specifies the color of the dark shade used to render 3-D-looking table borders.

<tbody>

MSIE: 4, 5 - HTML 4

<tbody>...</tbody>

Defines a row or group of rows as the "body" of the table. It must contain at least one row (<tr>). The end tag is optional.

"Row group" tags (tbody, thead , and tfoot) were introduced by Internet Explorer and are part of the HTML 4.0 Specification, but all attributes may not be fully supported. The system could speed table display and provide a mechanism for scrolling the body of a table independently of its head and foot. It could also be useful for printing long tables for which the head information could be printed on each page.

Attributes

align=left|center|right|justify|char

Specifies horizontal alignment (or justification) of cell contents.

char=character

Specifies a character along which the cell contents will be aligned. The default character is a decimal point (language-appropriate).

charoff=length

Specifies the distance to the first alignment character (char) on each line. If a line doesn't use an alignment character, it should be horizontally shifted to end at the alignment position.

valign=top|middle|bottom|baseline

Specifies vertical alignment of cell contents.

<td>

NN: 2, 3, 4 - MSIE: 2, 3, 4, 5 - HTML 4 - WebTV - Opera3

<td>...</td>

Defines a table data cell. The end tag is not required, but may prevent unpredictable table display, particularly if the cell contains images. A table cell can contain any content, including another table.

Attributes

align=left|center|right

Aligns the text (or other elements) within a table cell. The default value is left. This attribute has been deprecated by the W3C 4.0 Spec in favor of positioning with style sheets.

background=url

Specifies a graphic image to be used as a tile within the cell. Netscape's documentation does not cover this tag, but it is supported by version 4.0.

bgcolor="#rrggbb" or color name

Specifies a color to be used in the table cell. A cell's background color overrides colors specified at the row or table levels.

colspan=number

Specifies the number of columns the current cell should span. The default value is 1. According to the W3C 4.0 Specification, the value zero ("0") means the current cell spans all columns from the current column to the last column in the table; in reality, however, this feature is not supported in currently available 4.0 browsers.

height=number, percentage

Specifies the height of the cell in number of pixels or by a percentage value relative to the table height. The height specified in the first column will apply to the rest of the cells in the row. The height values need to be consistent for cells in a particular row. This attribute has been deprecated in the W3C 4.0 Specification.

nowrap

Disables automatic text wrapping for the current cell. Line breaks must be added with a <p> or <br>. This attribute has been deprecated by the W3C 4.0 Spec in favor of style sheet controls.

rowspan=number

Specifies the number of rows spanned by the current cell. The default value is 1. According to the W3C 4.0 Spec, the value zero ("0") means the current cell spans all rows from the current row to the last row; in reality, however, this feature is not supported in currently available 4.0 browsers.

valign=top|middle|bottom|baseline

Specifies the vertical alignment of the text (or other elements) within the table cell. The default is middle.

width=number

Specifies the width of the cell in number of pixels or by a percentage value relative to the table width. The width specified in the first row will apply to the rest of the cells in the column and the values need to be consistent for cells in the column. This attribute has been deprecated in the W3C 4.0 Specification.

Internet Explorer 2.0 and higher only

bordercolor="#rrggbb" or color name

Defines the border color for the cell.

bordercolorlight="#rrggbb" or color name

Defines the dark shadow color for the cell border.

bordercolordark="#rrggbb" or color name

Defines the light highlight color of the cell border.

New in HTML 4.0 Specification

abbr=text

Provides an abbreviated form of the cell's content.

axis=text

Places a cell into a conceptual category, which could then be used to organize the table in different ways.

headers=id reference

Lists header cells (by "id") that provide header information for the current data cell. This is intended to make tables more accessible to non-visual browsers.

scope=row|col|rowgroup|colgroup

Specifies groups of data cells for which the current header cell is applicable. This is intended to make tables more accessible to non-visual browsers.

<tfoot>

MSIE: 4, 5 - HTML 4

<tfoot>...</tfoot>

Defines the foot of a table and should contain information about a table's columns. It is one of the "row group" tags introduced by Internet Explorer and proposed in the W3C 4.0 Specification (see <tbody>) and must contain at least one row (<tr>). Its end tag is optional.

Attributes

align=left|center|right|justify|char

Specifies horizontal alignment (or justification) of cell contents.

char=character

Specifies a character along which the cell contents will be aligned. The default character is a decimal point (language-appropriate).

charoff=length

Specifies the distance to the first alignment character (char) on each line. If a line doesn't use an alignment character, it should be horizontally shifted to end at the alignment position.

valign=top|middle|bottom|baseline

Specifies vertical alignment of cell contents.

<th>

NN: 2, 3, 4 - MSIE: 2, 3, 4, 5 - HTML 4 - WebTV - Opera3

<th>...</th>

Defines a table header cell. Table header cells function the same as table data cells (<td>). Browsers generally display the content of table header cells in bold text centered horizontally and vertically in the cell (although some browsers vary). The end tag is optional.

Attributes

The <th> tag uses the same attributes as the <td> tag. See listing under <td>.

<thead>

MSIE: 4, 5 - HTML 4

<thead>...</thead>

Defines the head of the table and should contain information about a table. It must contain at least one row (<tr>). <thead> is one of the "row group" tags introduced by Internet Explorer and proposed in the W3C 4.0 Specification (see <tbody>). Its end tag is optional.

Attributes

align=left|center|right|justify|char

Specifies horizontal alignment (or justification) of cell contents.

char=character

Specifies a character along which the cell contents will be aligned. The default character is a decimal point (language-appropriate).

charoff=length

Specifies the distance to the first alignment character (char) on each line. If a line doesn't use an alignment character, it should be horizontally shifted to end at the alignment position.

valign=top|middle|bottom|baseline

Specifies vertical alignment of cell contents.

<tr>

NN: 2, 3, 4 - MSIE: 2, 3, 4, 5 - HTML 4 - WebTV - Opera3

<tr>...</tr>

Defines a row of cells within a table. A table row as delimited by <tr> tags contains no content other than a collection of table cells (<td>). The end tag is optional.

Attributes

align=left|center|right

Aligns the text (or other elements) within the cells of the current row. This attribute has been deprecated by the W3C 4.0 Spec in favor of positioning with style sheets.

bgcolor="#rrggbb" or color name

Specifies a color to be used in the row. A row's background color overrides the color specified at the table level.

valign=top|middle|bottom|baseline

Specifies the vertical alignment of the text (or other elements) within cells of the current row.

Internet Explorer 2.0 and higher only

background=url of image file

Specifies a graphic image to be used as a tile within the row.

bordercolor="#rrggbb" or color name

Defines the border color for the row.

bordercolorlight="#rrggbb" or color name

Defines the dark shadow color for the row border.

bordercolordark="#rrggbb" or color name

Defines the light highlight color of the row border.

Introduction to Tables

Although there are no true classifications, tables can be used in the following general ways:

Table Usage	Illustration
Data Table This is a table at its most basic (and as the creators of HTML intended)--rows and columns of textual data. Of course, data tables can be much larger and more complex than shown in this example.
Text Alignment Tables are often used to clean up the display of text by creating effects common to print, such as columns, hanging indents, and extra white space.
Page Template Many web designers use a large table as a container to give structure to a page. One common configuration is to create narrow columns for navigational items as shown in this example. A template for a two-column table follows in the "Templates" section of this chapter.
Multipart Image Container Tables can be used to hold together a large graphic that has been divided into separate sections to accommodate animations, rollovers, etc. In the example at right, the border was turned on to reveal the individual sections. Holding images together with tables is discussed at the end of this chapter.

The HTML 4.0 Specification proposal discourages the use of tables for page layout, favoring Cascading Style Sheets with absolute positioning instead. But until style sheets are more universally and consistently supported by the browsers in current use, tables remain a designer's most reliable tool for constructing complex page layouts.

Basic Table Structure

At their most basic, tables are made up cells, arranged into rows and columns. You can control display characteristics for the whole table level, the row level, and for individual cells (there are currently no supported methods for controlling columns as a group).

Rows and Cells

The bare minimum tags for describing a table are <table>, <tr>, and <td>. The following HTML shows the basic structure for a four-cell table:

<TABLE>
<TR>
     <TD>cell 1</TD><TD>cell 2</TD>
</TR>
<TR>
     <TD>cell 3</TD><TD>cell 4</TD>
</TR>
</TABLE>

The <table> tag defines the contents of the table. Each row is defined by <tr> tags, and is made up of a number of data (or header) cells. The number of columns is defined by the number of cells in a row. Data cells are indicated by the <td> tag. A table cell may contain any data that can be displayed in an HTML document (formatted text, images, multimedia elements, and even other tables).

Figure 10-1 gives a visual representation of this concept. The image on the left shows that the table consists of two rows and that each consists of two cells. The image on the right shows just how the HTML describes the rows and cells.

Figure 10-1. HTML tables are divided into rows and cells, as shown at left. The <tr> tag creates rows and the <td> tag creates cells, as shown at right.

Header cells use the <th> tag and function the same as data cells but are displayed in bold centered text. You may also add a caption to the table (using the <caption> tag), which provides a title or brief description of the table. The <caption> tag should be placed before the first row of the table; be sure that it is outside the row containers. Because tables are so often used as layout devices only, the caption feature is less used than the other main table components.

Table level controls

At the table level (using attributes within the <table> tag outlined above), you can control:

• the width of the table and its position on the page
• the color of all its cells
• the thickness of the border
• the spacing within and between cells (using cellpadding and cellspacing, respectively)

Row level controls

For each row (using attributes within the <tr> tag), you can control only:

• the vertical and horizontal alignment of the cells' contents
• backround colors for all the cells contained in that row

Row settings override table-level settings. Note that table row tags are merely containers for cell tags and contain no actual data themselves.

Cell level controls

Much of a table's structure and appearance is controlled at the individual cell level using <td> or <th> attributes. Within cells, you can control:

• the vertical and horizontal alignment of the cell's contents
• the color of the cell background
• the height and width of the cell (and the row and column that contain it)
• whether the cell should span over more than one cell space in the table grid

Alignment and color specifications at the cell level will override settings made at the row and table level.

Spanning Rows and Columns

Cells in a table can occupy the space of more than one cell in a row or column. This behavior is set within the <th> or <td> tags using the colspan and rowspan attributes.

Column span

In Figure 10-2, <td colspan=2> tells the browser to make "cell 1" occupy the same horizontal space as two cells. The resulting spanned cell is indicated in the figure on the left. Note that the row containing the spanned cell now only has one set of <td> tags instead of two.

If we had set the colspan=4 in this example, the browser would add two extra columns to the table. The HTML 4.0 Specification now requests that empty cells not be added, but for the moment, all browsers will add extra columns.

Figure 10-2. The colspan attribute spans cells horizontally.

Row span

Similar to colspan, the rowspan attribute stretches a cell to occupy the space of cells in rows below. Include the rowspan attribute in the row where you want the cell to begin and set its value equal to the number of rows you want it to span.

In Figure 10-3, note that the bottom row now only contains one cell (the other one has been incorporated into the vertical spanned cell). The resulting spanned cell is illustrated in the figure on the left. The browser ignores over-extended rowspan values.

Figure 10-3. The rowspan attribute spans cells vertically

TIP: You may combine colspan and rowspan attributes to create a cell that spans both rows and columns.

Row and Column Groups

Internet Explorer 3.0 introduced a system for grouping rows and columns so they can be treated as units by style sheets or other HTML formatting tags. The system is now reflected in the W3C 4.0 Specification for tables, so it bears mentioning here. However, support for row and column groups is far from universal as of this writing (in fact, Navigator 4.0 doesn't recognize them at all), so keep them in mind, but use them with caution.

Row groups

Rows can be classified into a table head (<thead>), a table foot (<tfoot>), and one or more table body (<tbody>). The head and foot should contain information about the document and may someday be used to display fixed elements while the body scrolls independently. It is recommended by the W3C that the foot (if there is one) appear before the body of the table so the table can render the foot before downloading all of the (potentially numerous) rows of data.

The rules attribute in the table tag may use row group information for placing rules within a table.

Column groups

Column groups create structural divisions within a table. This allows the columns created with <td> and <th> tags to be addressed as a group, usually for style and formatting purposes.

The <colgroup> tag delimits a conceptual group of columns. The number of columns included in the group is indicated with the span attribute. You can set the width of every column in the group (using pixel measurements, percentages, or relative values) with the width attribute.

The <col> element is used to apply attribute specifications across several tables without actually grouping them together structurally or conceptually. Like <colgroup>, you can specify the span (number of affected columns) and width (in pixels, percentages, or relative values) within the <col> tag.

Sample HTML

The following is a bare-bones example of how row and column groups would be integrated into the HTML table structure (with its resulting table display in a browser). Figure 10-4 shows the result. Note again that proper support for row and column groups and their attributes is rare as of this writing, however, it may be useful to be familiar with this structure in the future.

<TABLE BORDER=1>
<CAPTION>Table Description</CAPTION>
<COLGROUP width=100>
   <COL>
   <COL>
</COLGROUP>
<COLGROUP width=50>
<THEAD valign="top">
<TR>
   <TH>Heading 1</TH><TH>Heading 2</TH><TH>Heading 3</TH>
</TR>
</THEAD>
<TFOOT>
<TR>
   <TH>Footer 1</TH><TH>Footer 2</TH><TH>Footer 3</TH>
</TR>
</TFOOT>
<TBODY>
<TR>
   <TH>Cell Data 1</TH><TH>Cell Data 2</TH><TH>Cell Data 3</TH>
</TR>
</TBODY>
</TABLE>

Figure 10-4. This table uses the column and row groups to organize structure

Affecting Table Appearance

The HTML table standard provides many tags for controlling the display of tables. Bear in mind that, as with most formatting tags, browsers have their own way of interpreting your instructions, so results may vary among browser releases and platforms. This is particularly true of tables since the standard is still being nailed down. As always, it is best to do a lot of testing in a variety of viewing environments.

It is important to note that many of the tags that affect appearance (align, valign, and bgcolor) have been deprecated by the HTML 4.0 Specification in favor of achieving the same effects with style sheets. Expect the major browsers, however, to continue supporting the following methods until style sheets are universally supported.

Borders

You can add a shaded border around the table and its cells by adding the border attribute within the <table> tag. If no value is indicated, the border attribute indicates a width of one pixel, as shown in Figure 10-5.

Figure 10-5. Table with a one-pixel border

Specifying a higher number for the border will add a thicker beveled border around the outside edges of the table, as shown in Figure 10-6. Thicker lines between cells are created with cellspacing, described later.

Figure 10-6. Table with a 15-pixel border

Even if you don't want a table to display with a border in your final design, turning the border on during the design process can help in visualizing the table structure; it is particularly useful for debugging problematic tables. Just remember to turn it off again before uploading.

Positioning a Table on the Page

On current browsers (Navigator and IE versions 3.0 and higher), tables behave the same as images when it comes to placing them in the flow of the page. Use the align attribute in the <table> tag to position the table against the left or right margin and allow text to flow around it. Like images, you can specify a number of pixels to hold clear to the left and right of the table using the hspace attribute. vspace holds space above and below the table.

Centering tables

The 4.0 browsers allow you to center a table on the page by setting the align attribute to equal center. Unlike left or right margin alignments, this setting does not allow text to flow around the table.

Because this attribute is not universally supported, it is best to center a table using HTML tags outside the table, such as <center> or <div>.

Aligning Text in Cells

By default, the text (or any element) in a data cell will be positioned flush left and centered vertically within the available height of the cell, as shown in Figure 10-7.

Figure 10-7. Default placement of data within a cell.

Table header text (<th>) is generally displayed in bold text centered horizontally and vertically in the cell. You can override these defaults by using the align and valign attributes at either the row or cell level.

Row Settings

Alignment settings specified within the <tr> tag affect all the table cells (<td> or <th>) within that row. This makes it easy to apply alignment changes across multiple cells.

Cell Settings

Alignment attributes within a cell (<td> or <th>) apply to the current cell. Cell settings will override row settings. Furthermore, alignment settings within the contents of the cell (e.g., <p align=right>) take precedence over both cell and row settings.

Horizontal alignment is specified with the align attribute, which takes the standard left, right, or center values. These values work the same as regular paragraph alignment.

Vertical alignment is controlled using the valign attribute, which can be set to top, middle (the default), bottom, or baseline ("first text line appears on a baseline common to all the cells in the row").

By default, the text in a cell will automatically wrap to fill the allotted space. To keep text on one line (unless broken by a <br> or <p>), use the nowrap attribute within the table cell (<td> or <th>). This should be done with caution because the text in the cell may render larger for some users and will run out of room in the table cell.

Sizing Tables

You can control the size of the entire table as well as the size of rows and columns. By default, a table (and its rows and columns) will be sized automatically to the minimum dimensions required to fit their contents. In many cases, it is desirable to assign a table or column a specific size (especially when using the table to build a page structure).

If the contents require a width greater than the specified size, the table will generally resize to accommodate the contents. Size specifications are treated as suggestions that will be followed as long as they don't conflict with other display directions. In effect, by specifying the size of a table you are merely specifying the minimum size.

Table sizes can be unpredictable even when specified, because they vary from browser to browser. For instance, Netscape 3.0 will preserve the specified width of the cell even if its contents are wider, resulting in items hanging outside the table or into neighboring cells. It is best to specify ample room to accommodate the contents of the cells.

Table dimensions

The width attribute is used within the <table> tag to specify the width of the table. You can specify an absolute value (measured in pixels) or a relative value (a percentage of the available width of the screen) as shown in the following table:

Style	Sample HTML	Result
Absolute value	<TABLE WIDTH=600>	Makes the table 600 pixels wide
Relative value	<TABLE WIDTH=80%>	Makes the table 80% of the screen width

To make a table fill the browser width, set the width to 100%.

Table height can be specified using the height attribute, which can also be defined by absolute or relative values. By default, the table will end after the longest column of data, but you can force it to be longer or to always fill the screen (height=100%).

Cell dimensions

Similarly, you can use the width and height attributes within a cell tag (<td> or <th>) to specify the dimensions of that cell. A cell's width setting will affect the width of the entire column it occupies, therefore, column widths can be specified by setting the width of just one cell in the column (generally those in the top row); the remaining cells will follow.

Likewise, the cell's height may determine the height of all the cells in that row, so row height can be set using just one cell in each row.

Height and width values can be absolute measurements in pixels, or percentages relative to the dimensions of the table.

Table Cell Spacing

There are two types of space that can be added in and around table cells: cell padding and cell spacing. The cellpadding and cellspacing attributes are used within the <table> tag and apply to the whole table.

cellspacing

Cell spacing, which is controlled by the cellspacing attribute within the <table> tag, refers to the space between the cells (see the left image in Figure 10-8). Values are specified in number of pixels. Increasing the cell spacing results in wider shaded borders between cells. In the left image in Figure 10-8, the gray areas indicate the 10 pixels of cell spacing added between cells. The default value for cellspacing is 2, therefore, if no cellspacing is specified, browsers will automatically place 2 pixels of space between cells.

Figure 10-8. Cell spacing versus cell padding

cellpadding

Cell padding refers to the amount of space between the cell's border and its contents (as indicated in the right image in Figure 10-8). It is specified using the cellpadding attribute within the <table> tag. Values are specified in number of pixels; the default value is 1. Relative values (percentages of available space) may also be used.

Different effects can be created using different combinations of spacing and padding. If you want your table to be seamless, as when it is holding together an image, be sure to set the border, cellspacing, and cellpadding to 0, as follows:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

Coloring Tables

You can specify a background color for the entire table (<table>), selected rows (<tr>), or individual cells (<td> or <th>) by placing the bgcolor attribute in the appropriate tag. The bgcolor attribute is recognized by MSIE versions 2.0 and higher and Navigator versions 3.0 and higher.

Color values can be specified either by their hexadecimal RGB values or by a standard color name. For more information on specifying color in HTML, see Chapter 5, HTML Overview..

Color settings in a cell will override settings made at the row level, which override settings made at the table level. To illustrate, in the following example, the whole table is set to light gray, the second row is set to medium gray, and the furthest right cell in that row is set to dark gray. Figure 10-9 shows the results.

<TABLE BORDER=1 BGCOLOR="#CCCCCC">
<TR>
<TD></TD><TD></TD><TD></TD>
</TR>
<TR BGCOLOR="#999999">
<TD></TD><TD></TD><TD BGCOLOR="#333333"></TD>
</TR>
<TR>
<TD></TD><TD></TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD><TD></TD>
</TR>
</TABLE>

Figure 10-9. Effects of setting background colors at cell, row and table levels

Netscape Navigator and Internet Explorer treat background colors at the table level differently. Navigator fills every cell in the table with the specified color, but the border picks up the color of the document background. IE fills the entire table area, including the borders, with the specified color for a more unified effect. Background colors at the row and cell level are treated consistently by the two browsers (although Navigator uses the document background color for empty cells).

Table Troubleshooting

Despite the control they offer over page layout, tables are also notorious for causing major headaches and frustrations. This is partly due to the potential complexity of the code--it's easy to miss one little character that will topple a table like a house of cards. Another source of chaos is that browsers are inconsistent and sometimes quirky in the way they interpret table code. It is not uncommon to spend several careful hours crafting a table that looks perfect in browsers X and Y, but crumbles into a little ball in browser Z. Or it may look great with one user's settings, but unacceptable with another's.

Although not every problem can be anticipated, there are a number of standard places tables tend to go wrong. HTML tables have some inherent peculiarities that can make them frustrating to work with, but knowing about the potential pitfalls up front can make the design process go more smoothly. As always, it is necessary to test your designs on as many browser and platform configurations as possible.

Text in Tables

When designing tables that contain text, remember that text size can vary greatly from user to user. This adds an inherent level of unpredictability to the way your tables display.

Not only does text display larger on PCs than on Macs, each individual can set the font size for text display. So although you've put a nice, tidy column of options in a table cell, for the user whose font is set to 16 points, the text may get some extra line breaks and stretch off the screen.

In general, variable text sizes affect the height of cells and tables as the cells stretch longer to accommodate their larger contents (particularly if the width has been specified with an absolute pixel value). If you have HTML text in a cell, particularly if the cell needs to be displayed at specific pixel dimensions within the table, be sure to give it lots of extra room and test your page with different browser font settings.

If you are using style sheets, you can control the size of the text by setting it to a specific pixel height; bear in mind, however, that many users still use browsers that do not support style sheets.

Form Elements in Tables

Like text, the way form elements display in a browser is dependent on the size of the default monospace (or constant width) font that is specified in the user's browser preferences. If the user has his monospace font set to 24 points (or to "largest" in Internet Explorer), your form elements (particularly text fields) will resize larger accordingly.

In the real-world example in Figure 10-10, I used a table to hold together a badge illustration, which contained a form for entering a name and password. In testing, we found that the target audience generally had their browser fonts set to 18 points (they were working on very high-resolution monitors), which caused the form text fields to resize and break the table apart. Making the badge image larger and incorporating lots of extra space was the solution in this case.

Figure 10-10. The badge looks fine when browser fonts are set to 12 points, but falls apart at 18 points

Unwanted White Space

It is common for extra white space to creep between table cells (or between the cells and the border). When you are trying to create a seamless effect with colored cells or hold together pieces of a larger image, this extra space is unacceptable.

Returns and spaces within <td>s

The problem most often lies within the cell (<td>) tag. Some browsers will render any extra space within a <td> tag, such as a character space or a line return, as white space in the table. This can occur when the cell contains text; however, the effect is most noticeable when the contents are images.

TIP: Because <table> and <tr> tags are regarded as only containers for other tags, not as containers for actual content or data, spaces and returns within these tags are ignored.

If you want a seamless table, begin with the border, cellpadding, and cellspacing all set to zero (0) in the <table> tag. In the code in Figure 10-11, a graphic is divided into four parts and held together with a table. The goal is to hold the graphic together seamlessly. As shown in the figure, the returns and extra spaces within the <td> tags add white space in each cell

Figure 10-11. Line breaks in code add white space to table cells

To keep out unwanted white space, be sure that the enclosing <td> and </td> tags are flush against the content of the cell, with no extra spaces or returns. In Figure 10-12, I've kept the <td> tags and their contents on one line, and the problem goes away.

Figure 10-12. Removing line breaks from table cells creates a seamless table

Missing end tags

In most cases, closing cell tags (</td>) are optional, however, omitting them may add extra white space to the cell. The principle is the same as in Figure 10-11--the line break to the next starting <td> tag is rendered as extra space. For seamless tables, it is necessary to use end tags within tables as shown in Figure 10-12. The code below results in the effect shown in Figure 10-11.

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
  <TD><IMG SRC="bug1.gif">
  <TD><IMG SRC="bug2.gif">
<TR>
  <TD><IMG SRC="bug3.gif">
  <TD><IMG SRC="bug4.gif">
</TABLE>

Cellspacing in Netscape Navigator [1]

According to the HTML Specification, if you set cellspacing=0 within the <table> tag, there should be no extra space between cells. There is a bug in Netscape's table implementation, however, that causes extra space to be added even when the cellspacing is set to 0. To eliminate all extra space for Netscape, you must explicitly include the border=0 attribute in the <table> tag as well.

The default value of the border attribute should be 0, but in Netscape it takes up space (even though it doesn't draw a shaded line) unless you explicitly set it to 0.

Collapsing Cells in Netscape

As of this writing, all versions of Netscape will collapse empty cells and will not render a background color in a collapsed cell. For that reason, all cells in a table need to contain something in order for it to render properly and with its background color. There are a number of options for filling cells for display in Netscape.

Nonrendering text

Sometimes, adding a simple nonbreaking space ( ) or a single line break (<br>) within a cell is enough for it to be recognized and displayed properly in Netscape. Neither of these text strings renders visibly when the table is displayed in the browser.

The single-pixel trick

Another popular work-around is to place a transparent one-pixel GIF file in the cell and set its width and height dimensions to fill the cell. If you choose this method, be sure to set both the height and the width attributes. If you set only one, many browsers will resize the image proportionally (into a big square), which may not be appropriate for the table.

One drawback to this method is that a missing graphic icon will appear in the cell if the graphic doesn't load properly or if the viewer has the graphics turned off in the browser.

Using <spacer>

Table cells can also be held open with a <spacer> tag, which is Netscape's proprietary method for adding blank space on a web page. Set the spacer type to "block" and specify the width and height measurements as follows:

<TD><SPACER TYPE=block WIDTH=n HEIGHT=n></TD>

Although the <spacer> tag is Netscape-specific, the whole issue of collapsing cells is Netscape-specific as well, making spacers a good solution in this situation (although they're best avoided for general use). Browsers that don't understand the <spacer> element will just ignore it, but chances are they won't need it to render the table properly anyway.

Restraining Row Heights [2]

You might guess that the following code would create the table shown in Figure 10-13:

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=1>
<TR>
  <TD ROWSPAN=2><IMG SRC="red.gif"
   WIDTH=50 HEIGHT=150></TD>
  <TD HEIGHT=50><IMG SRC="blue.gif"
   WIDTH=100 HEIGHT=50></TD>
</TR>
<TR>
  <TD ALIGN=center>extra space</TD>
</TR>
</TABLE>

Figure 10-13. This is the table we're trying to create

However, what actually happens is that the bottom cell shrinks to fit the text it contains, and the cell containing the darker graphic on the right--despite being set to height=50--is stretched vertically, as shown in Figure 10-14.

Figure 10-14. The actual result of the code

The problem is that the height attribute specifies a minimum, not a maximum, and a row defaults to the height of its tallest cell (determined either by the cell's contents or its height value). That's why the table doesn't work as intended--the text in the last cell isn't tall enough to force the desired effect. Since we can determine the exact height that we want in that last cell (by subtracting the height of blue.gif from the column height), giving it a height=100 attribute will make it the proper height.

If you don't know the exact height--say, because other columns contain text--you may be better off removing the rowspan attributes and using a nested table instead. The nested table will size its rows based on their content only.

Column Span Problems [3]

If you want to create a table with multiple column spans, yet accurately control the width of each column, it is necessary to specify a width for at least one cell in each column. To be really safe, take the time to specify a width for every cell in the table. When column spans overlap, it is easy to get unpredictable results.

The goal was to create a table 600 pixels wide with three columns of 200 pixels each. In each row, there is a 400-pixel-wide graphic that should straddle neatly over two columns, as shown in Figure 10-15.

Figure 10-15. The target layout: getting two graphics to span two columns

The first (failed) attempt at coding set the table to a specific width and provided column spans for the graphics, as shown in the following code:

<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=600 BGCOLOR="#FFFFFF">
<TR>
   <TD COLSPAN=2><IMG SRC="2col.gif" ALIGN=top WIDTH="400"  
   HEIGHT="50" BORDER="0"></TD>
   <TD ALIGN=center>text cell<BR>(should be 200 pixels)</TD>
</TR>
<TR>
   <TD ALIGN=center>text cell<br>(should be 200 pixels)
   </TD>
   <TD COLSPAN=2><IMG SRC="2col.gif" ALIGN=TOP WIDTH="400"
   HEIGHT="50" BORDER="0"></TD>
</TR>
</TABLE>

This code, however, doesn't give the browser enough information, particularly about the middle column, to accurately render the table. The unsuccessful result of this first code attempt is shown in Figure 10-16. The problem is that the center column is not defined anywhere.

Figure 10-16. Since the middle column was not defined, the table is rendered with two 400-pixel-wide columns

The solution

The solution in this case, because the middle cell is eaten up by column spans in both rows, is to create a dummy row (shown in bold) that establishes the width of the three columns as intended (in 200-pixel increments). This row will not render in the browser. In addition, the absolute width for every cell must be specified.

The following code produces the desired effect on all browsers that support tables--and on all platforms.

<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=600 BGCOLOR="#FFFFFF">
<TR>
   <TD WIDTH="200" HEIGHT="0"></TD>
   <TD WIDTH="200" HEIGHT="0"></TD>
   <TD WIDTH="200" HEIGHT="0"></TD>
</TR>
<TR>
   <TD colspan=2 WIDTH="400"><IMG SRC="2col.gif" WIDTH="400"
   HEIGHT="50" BORDER="0"></TD>
   <TD WIDTH="200" ALIGN=CENTER>text cell<BR>(should be 200
   pixels)</TD>
</TR>
<TR>
   <TD WIDTH="200" ALIGN=center>text cell<br>(should be 200
   pixels)</TD>
   <TD colspan=2 WIDTH="400"><IMG SRC="2col.gif" WIDTH="400"
   HEIGHT="50" BORDER="0"></TD>
</TR>
</TABLE>

Tips and Tricks

This section provides a few tricks of the trade for working with tables.

<font> and Tables

Unfortunately, placing <font> tags around a table will not affect the font of all the text contained within the table. You need to repeat the <font> tag and its attributes around the content in every cell of the table. For complex tables with lots of cells, the repetitive <font> tags can actually add significantly to the size of the HTML file (not to mention the visual clutter).

Style sheets are a much more efficient way to apply style information to the contents of a table (and they are the W3C's method of choice for all your font styling needs).

Waiting for Tables to Display

With current technology and HTML standards, the browser must wait until the entire contents of a table have downloaded before it can begin rendering the page. Any text and graphics outside the table will display quickly while the browser works on the table.

You can use this phenomenon to your advantage by placing outside the table elements you want your viewers to see first (can anybody say "banner ads"?).

Baseline Alignment Trick [4]

If you want to align the first lines of text by their baselines across a row, you should be able to use valign=baseline; in reality, this setting is too unpredictable across browsers to be used reliably. A trick for achieving the same result is to add a nonbreaking space ( ) in each first line that is set the same size as the largest character. That way, you can set valign=top, and the baselines will all line up.

First look at simple top alignment. As shown in Figure 10-17, the top of the text is aligned, but the baselines are off.

Figure 10-17. With top alignment, the baselines of the text don't line up

By adding a non-breaking space at the larger text size (in bold), the baselines align neatly, as shown in Figure 10-18.

Figure 10-18. With a non-breaking space set at the same font size as the "Man" text, the baselines line up

Rowspans Made Easy [5]

HTML 3.2 specifies that if a cell's colspan implies more columns than have been created up to that point in the table, the browser should create the additional columns. With rowspan, however, the specification states that browsers shouldn't create any extra rows. The existing browsers follow both of these rules.

So if you have a cell that spans vertically to the bottom of the table, past rows that might vary in number or are too numerous to easily count, just give it a rowspan that you know is excessively high.

In Figure 10-19, we've set rowspan to 99. Even though there are only seven rows in the actual table, your browser won't generate any extra rows.

Figure 10-19. Although rowspan is set to 99, the table only contains the actual number of rows needed

Standard Table Templates

Ever look at a table and say "how'd they do that?" This section provides templates that give you shortcuts for creating standard table effects.

A Simple Announcement Box

Figure 10-20 depicts a simple one-cell table containing text. By setting the background to a bright color, it can be used as an effective attention-getting device for a special announcement. It could also be used as an alternative to a graphical headline for a page.

Of course, you can specify any background color you choose. Try playing with the border and cell padding for different effects. You can use width and height attributes to make the bar any size. Remember, placing the bgcolor within the cell will render differently than placing it in the <table> tag in Internet Explorer, so experiment and test to see what you like the best.

Figure 10-20. Announcement box

Centering an Object in the Browser Window

The table in the following code and in Figure 10-21 can be used to center an object in a browser window regardless of how the window is resized. It uses a single cell table with its size set to 100%, then centers the object horizontally and vertically in the cell.

<HTML>
<BODY>
<TABLE WIDTH=100% HEIGHT=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
   <TD align=center valign=middle>your object here</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Figure 10-21. Centering an object

Creating a Vertical Rule

This sample table creates a vertical rule between columns that resizes with the height of the table. The trick is to create an extra column only one pixel wide (or the desired thickness of the vertical rule) and fill it with a background color. This cell is indicated in bold. The result is shown in Figure 10-22.

The cell cannot be totally empty or it will collapse in Netscape and its background color won't display, so I've added a <br>. For this to display correctly, the cell padding must remain at zero or the 1-pixel wide column will plump up with extra space. Add space between columns with the cellspacing attribute instead.

Figure 10-22. A vertical rule that resizes with the depth of the table

Creating a Box Rule

Although Microsoft Internet Explorer recognizes the proprietary bordercolor, bordercolorlight, and bordercolordark attributes, there is no method for specifying border colors using standard HTML for all browsers.

To create a colored rule around a box of text using standard HTML, place one table within another as shown in Figure 10-23. To nest tables, place the entire contents of one table within a <td> of the other.

Figure 10-23. Two examples of creating box rules with nested tables

In Example 1 in Figure 10-23, cell width and height are set in the interior table. In the exterior table, a cell padding of 0 results in a one-pixel rule around the table. You can increase the thickness of the rule by increasing the cellpadding value. Note, however, that this will also increase the overall dimensions of the table. The color of the rule is specified by the bgcolor attribute in the <table> tag for the exterior table:

<TABLE CELLPADDING=0 BORDER=0>
<TR>
   <TD BGCOLOR="#333333" ALIGN=center VALIGN=center>
      <TABLE BORDER=0 WIDTH=200 HEIGHT=200 CELLPADDING=10>
      <TR><TD BGCOLOR="#999999">cell contents</TD></TR>
      </TABLE>
   </TD>
</TR>
</TABLE>

In Example 2 in Figure 10-23, to restrict the dimensions of the table, set specific dimensions for the exterior table and set the dimensions of the interior table slightly smaller (to a difference twice the desired rule thickness). In this example, the desired rule thickness is 10, so the interior table's dimensions are 20 pixels less than the exterior table's dimensions.

<TABLE WIDTH=200 HEIGHT=200 cellpadding=0 border=0>
<TR>
   <TD BGCOLOR="#333333" ALIGN=center VALIGN=center>
      <TABLE BORDER=0 WIDTH=180 HEIGHT=180 CELLPADDING=10>
      <TR><TD BGCOLOR="#999999">cell contents</TD></TR>
      </TABLE>
   </TD>
</TR>
</TABLE>

Two-Column Page Layouts

Many sites use a two-column table to lay out the structure of their pages. This grid creates a narrow column on the left for navigational options and a wider column on the right for the page's contents, as shown in Figure 10-24. These sample tables can be used to provide a basic structure to the page; you can place any elements (including other tables) within either table cell to create more complex layouts.

Figure 10-24. Typical two-column layout

First, a word about browser margins

When using a table to lay out the structure of a page, bear in mind that it will be placed in the page against the normal browser margins, not flush against the top and left edge of the browser window. The width of the margin varies from browser to browser (and platform to platform), but it generally ranges from 8 to 12 pixels. You should take this blank space into account when choosing measurements for your table and its column widths.

The only way to get rid of the margins for most browsers is to put the whole page in a framed document, which offers margin controls (see Chapter 11, Frames.). If you are designing exclusively for Internet Explorer, you can take advantage of Microsoft's proprietary topmargin and leftmargin attributes, which can be used to set these margins to 0 pixels. For Netscape 4.0, use the corresponding marginheight and marginwidth attributes. Or if you are using style sheets, add the following rule:

BODY { margin:0; padding:0;}

Fixed-width columns

If it's predictability and control you're after, then fixing the width of your table and its columns is the way to go. As long as the contents fit in the cells entirely, the table will hold its dimensions regardless of browser window size. If contents (such as graphics) are wider than the cell, the cell will usually expand to accommodate them.

Of course, you can change the specific width values to any pixel value you choose, however, it is important that the total of the cell widths equals the width set for the entire table. If the values are different, browsers maintain the width setting for the table and resize all the columns proportionately within the allotted space. As a result, none of the column widths will display at the number of pixels specified.

Note that the border in each of the following examples has been set to 1 but you can change it to any other value. Starting with the border set to 1 (as shown in Figure 10-24) makes it easier to see how the table is behaving. Once you get the table working properly, get rid of the border by setting the value to 0.

<HTML>
<BODY>
<TABLE BORDER=1 WIDTH=600>
<TR>
   <TD VALIGN=top WIDTH=150>left column</TD>
   <TD VALIGN=top WIDTH=450>right column</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Relative column widths

Using relative values for the width of your table allows your page to resize itself to fill the browser window. Many designers prefer this method because it is more flexible and suits any monitor configuration. Although the actual column widths will change when the browser window resizes (and their contents will rewrap), they will remain in proportion to one another.

Again, you can turn the border off by setting the value to zero. You may change the width values for the cell in each column, but be sure that they total 100%.

<HTML>
<BODY>
<TABLE BORDER=1 WIDTH=100%>
<TR>
   <TD VALIGN=top WIDTH=20%>left column</TD>
   <TD VALIGN=top WIDTH=80%>right column</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Combination

At times, you may want to restrict the width of the left column, but allow the right column to resize with the page--if you want the contents of the left column to stay aligned over a colored background image, for instance. Set the width of the left column to any pixel value you choose and do not specify a width for the right column.

This technique is not guaranteed to keep the width of the "fixed" column at its specified width. If the browser window is resized to be very narrow, the fixed column will be resized smaller and its contents will wrap.

<HTML>
<BODY>
<TABLE BORDER=1 WIDTH=100%>
<TR>
   <TD VALIGN=top WIDTH=150>left column</TD>
   <TD VALIGN=top>right column</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Multipart Images in Tables

There are a number of reasons why you may want to slice a large image into pieces and use a table to reconstruct it seamlessly on a web page:

Rollovers

If you want portions of the image--but not the whole image--to respond to the mouse passing over them (mouseover events or rollovers), it is more efficient to swap out just the bits that change instead of reloading the whole image.

Animations

Similarly, if you want to add animation to small areas within an image, it is better to break up the image and animate just the portions that move. This will result in smaller files to download.

Better Optimization

At times, you may find that an image contains distinct areas of flat color and distinct areas of soft or photographic images. Breaking the image into sections allows you to save some sections as GIF (the flat color areas) and others as JPEG (for graduated tones), to achieve better optimization and image quality overall. For more information on optimizing images, see Chapter 14, GIF Format., and Chapter 15, JPEG Format.

Imagemaps

Break the image into separated linked images instead of using an imagemap. This allows linking to work offline, as well as provides alternative (ALT) text for each graphical element. This makes the page more accessible for people using non-graphical or speech-based browsers.

In Figure 10-25, I've divided the image into sections so I can save the television image as a JPEG and the rest as GIFs (since they are flat, graphical images). Also, I use rollover events to replace the television image based on which section icon the user mouses over. The table on the right has its border set to 1 to reveal the individual graphics that make up the image. When the border is set to zero, the effect is seamless, as shown on the left.

Figure 10-25. A multipart image held together by a table

Slicing & Dicing Tools

Multipart images in tables have been growing in popularity in recent years. Not surprisingly, software companies are responding with tools that make the production process much easier than the previous method of splitting the graphic manually and writing the table code in an HTML editor. (This manual method is outlined below.)

Both Macromedia Fireworks and Adobe ImageReady include functions that export an image as many individually numbered graphics (based on the position of guidelines) and automatically write the table code that holds them all together.

You can copy and paste the table code into your HTML file. One caution: you will need to adjust the pathnames if your graphics are to reside in a different directory than your HTML files. The automatically generated code writes relative pathnames assuming everything will be in the same directory. A simple find-and-replace should take care of this quickly.

Macromedia Fireworks

To export a multipart image and its respective HTML file:

1. Open the image (it can be a layered Photoshop file). Use the Slice tool on the URLs toolbar to define rectangular segments in the image. Note, if you place a rectangular slice in the middle of a graphic, Fireworks will automatically slice the remainder of the image into the fewest number of segments to contain the specified slice.
2. Set the default export settings for the entire image (file format, bit depth, dithering, etc.). These settings will be applied to each resulting slice after export (all portions will share the same color palette).
3. You can override the default settings for an individual slice, for instance, reducing its palette, or making it a JPEG among GIFs. Start by selecting the slice object and opening its Object Properties dialog box, selected via Modify Object Properties or by using the options pop-up menu (the arrow on the far right of the URLs toolbar).
4. Among the options on the Object Properties dialog box are the Slice Export Settings. Select Custom and either one of the palette options from the pop-up menu, or select the continue button (indicated by ellipses "...") to get an Export Preview dialog box for that particular slice. From there you can fine-tune the optimization of the slice.
5. Once you have your slices chosen and configured, choose File Export Slices. Type a name for the HTML file (the table that holds the pieces together), choose its location, and decide if you'd like your graphic pieces saved in a subfolder.
6. Click Export. You can now copy the table code from the generated HTML file and paste it into your final document.
7. Turn rulers on (View Rulers). Drag guidelines from the rulers into the image area at the points where you want the image to be divided.

For more information about Fireworks, see http://www.macromedia.com/software/fireworks.

Adobe ImageReady

To create a multipart image and HTML file in ImageReady:

1. Open the image. Select View Rulers if the rulers are not already visible. Drag guides from the rulers into the image area where you want the image divided.
2. Select the format and optimization values with the Optimize palette and Optimize preview.
3. When you are ready, save the file using File Save Optimized As (saving the original is not the same thing). This gives you the Save As dialog box in which you can check the boxes next to Save HTML File and Slice Along Guides.
4. ImageReady creates a series of graphics numbered by row and column as well as an HTML file containing the table that holds the graphics together.

For more information about Adobe ImageReady, see http://www.adobe.com/imageready.

Producing Images in Tables Manually

If you do not have Macromedia Fireworks or Adobe ImageReady, it is certainly possible to create the effect by hand. First you need to divide the image into separate graphic files using an image processor such as Photoshop or Paint Shop Pro. Then, write the HTML for the table using whichever HTML editor pleases you. These methods are demonstrated below.

Dividing an image with Photoshop 4.0

When dividing an image with Photoshop, it is important to set the guide preferences in a way that enables easy and accurate selections without redundant or overlapping pixels between image sections. This is illustrated in steps 2 and 3 and shown in Figure 10-26.

1. Open the image in Photoshop. Make sure the rulers are visible by selecting View Show Rulers.
2. Set your preferences to use pixels as the unit of measurement by selecting File Preferences Units & Rulers. Select "pixels" from the pop-up menu and hit OK.
3. Select View Snap to Guides. This will snap your selection to the precise location of the guide.
4. Use the rectangle marquee (make sure feathering and anti-aliasing options are turned off) to select each area of the image. You can use the Info palette (Window Show Info) to get accurate pixel measurements for each section as you select it. This information will be needed when you create the HTML file.
5. Copy and paste each section into a new file. Flatten the image and save it as a GIF or a JPEG. You may want to develop a numbered naming scheme to keep the pieces organized.

Figure 10-26. Splitting up an image with Photoshop

Creating the table in HTML

Following is the HTML code that is used to hold together the Sifl & Olly image from Figure 10-25:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="333">
  <TR>
  <TD><IMG SRC="part_1.gif" WIDTH="56" HEIGHT="92" BORDER="0"></TD>
  <TD><IMG SRC="part_2.gif" WIDTH="169" HEIGHT="92" BORDER="0"></TD>
  <TD><IMG SRC="part_3.gif" WIDTH="108" HEIGHT="92" BORDER="0"></TD>
  </TR>
  <TR>
  <TD><IMG SRC="part_4.gif" WIDTH="56" HEIGHT="133" BORDER="0"></TD>
  <TD><IMG SRC="part_5.gif" WIDTH="169" HEIGHT="133" BORDER="0"></TD>
  <TD><IMG SRC="part_6.gif" WIDTH="108" HEIGHT="133" BORDER="0"></TD>
  </TR>
  <TR>
  <TD><IMG SRC="part_7.gif" WIDTH="56" HEIGHT="82" BORDER="0"></TD>
  <TD><IMG SRC="part_8.gif" WIDTH="169" HEIGHT="82" BORDER="0"></TD>
  <TD><IMG SRC="part_9.gif" WIDTH="108" HEIGHT="82" BORDER="0"></TD>
  </TR>
</TABLE>

There is no difference between writing a table for piecing together graphics and writing any other kind of table; however, you should pay careful attention to the following settings if you want the image to piece back together seamlessly on all browsers.

• In the <table> tag, set the following attributes to zero: border=0, cellpadding=0, cellspacing=0.
• In the <table> tag, specify the width of the table with an absolute pixel value. Be sure that the value is exactly the total of the widths of the component images. You may also add the height attribute for thoroughness' sake, but it is not required.
• Don't put extra spaces or line returns between the <td> and the <img> tags (extra space within <td>s causes extra space to appear when the image is rendered). Keep them flush together on one line. If you must break the line, break it somewhere within the <img> tag.
• Set the width and height values in pixels for every image. Be sure that the measurements are accurate.
• Set the border=0 for every image.
• Specify the width and height pixel values for every cell in the table, particularly if it contains colspans and rowspans. Be sure that they match the pixel values set in the <img> tag and the actual pixel dimensions of the graphic. For simple grid-like tables (such as the one in Figure 10-25), you may not need to give individual cell dimensions since the enclosed images will force each cell to the proper dimensions.
• Sometimes it is preferable to keep the table simple. For instance, the sample graphic could have been divided into just five portions (a top graphic, three middle graphics, and a bottom graphic) and held together with a table made up of three rows with a single cell each. These decisions are a matter of judgment and obviously depend on the individual project.

---

1.This tip taken with permission from Creative HTML Design, by Lynda Weinman and William Weinman, published by New Riders Publishing, 1998.

2.This tip courtesy of Builder.com. It first appeared in the Builder.com article "Advanced HTML Tips," by Paul Anderson. It is reprinted here with permission of Builder.com and CNET. See http://builder.com/Authoring/AdvHtml/index.html for the complete article.

3.This tip courtesy of Builder.com. It first appeared in the Builder.com article "Advanced HTML Tips," by Paul Anderson. It is reprinted here with permission of Builder.com and CNET. See http://builder.com/Authoring/AdvHtml/index.html for the complete article. The solution shown here was submitted by Steven Masters.

4.This tip courtesy of Builder.com. It first appeared in the Builder.com article "Advanced HTML Tips," by Paul Anderson. It is reprinted here with permission of Builder.com and CNET. See http://builder.com/Authoring/AdvHtml/index.html for the complete article.

5.This tip courtesy of Builder.com. It first appeared in the Builder.com article "Advanced HTML Tips," by Paul Anderson. It is reprinted here with permission of Builder.com and CNET. See http://builder.com/Authoring/AdvHtml/index.html for the complete article.