The table element is a container for additional elements that specify the content for a table. A table consists of rows and columns of content. Other elements related to the table element are caption, col, colgroup, tbody, td, tfoot, th, thead, and tr. The purpose of the table element is to define a number of visible attributes that apply to the entire table, regardless of the number of rows or columns within it. Many of these attributes can be overridden for a given row, column, or cell. The number of rows and columns is strictly a factor of the structure of tr and td elements within the table.

Tables have been used for a relatively long time not only to organize rows and columns of content but also to position content. With no visible borders, table rows and columns can be set to empty space. With the advent of positionable content, the tables-for-positioning practice is not encouraged.

Deeply nested tables (tables within tables) can cause problems in some browsers. Navigator 4 has severe difficulty with style sheet inheritance and overall performance in complex tables (nesting beyond three levels is asking for trouble). IE 5/Mac can inexplicably explode cell dimensions when scripts create or modify table-related elements. The simpler you keep your table structure, the more reliable your pages will be across browsers. Heavy editing of table structures in visual HTML authoring tools can leave hidden complexities (e.g., lots of empty cells) in your source code. Temporarily turn on a thin table border to see the exact row and column structure.

Determines how the table is aligned relative to the next outermost container (usually the document body or html element). The align attribute is deprecated in HTML 4 in favor of style sheet attributes.

Specifies an image file that is used as a backdrop to the table. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available table space. Smaller images download faster but are obviously repeated more often in the background. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

Navigator 4 can be quirky with this attribute. Be prepared to wrap your main table (without a background) inside another table element, whose background property has a graphic file assigned to it.

Establishes a fill color (behind the text and other content) for the entire table. If you combine a bgcolor and background, any transparent areas of the background image let the background color show through. This attribute is deprecated in HTML 4 in favor of the background-color style attribute.

The thickness (in pixels) of the border drawn around a table element. If you set the border attribute to any value, browsers by default render narrow borders around each of the cells inside the table. With a table element's border showing, the thickness of internal borders between cells is defined by the cellspacing attribute of the table element.

If you include only the border attribute without assigning any value to it, the browser renders default-sized borders around the entire table and between cells, unless overridden by other attributes.

Browsers render the border in a 3-D style, with the border appearing to be raised around the flat content in the cells. Numerous other attributes affect the look of the border, including: bordercolor, bordercolordark, bordercolorlight, frame, and rules. The type of border rendered for tables is different from the borders defined by style sheet rules. You get better control of the border look by using the dedicated attributes of the table element.

The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. The border attribute must have a nonzero value assigned for the color to appear. The 3-D effect of borders in is created by careful positioning of light (or white) and dark lines around the page's background or default color (see Figure 8-4). Standard colors are usually shades of gray and white, depending on the browser.

Applying color to a table border has a different effect in Navigator and Internet Explorer. In Navigator, the color is applied to what is normally the darker of the two shades used to create the border. Moreover, Navigator automatically adjusts the darkness of some of the lines to enhance the 3-D effect of the border. In contrast, Internet Explorer applies the color to all lines that make up the border. The net effect is to flatten the 3-D effect (refer to the bordercolordark and bordercolorlight attributes to color borders and maintain the 3-D effect in IE).

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color (see Figure 8-4). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark and bordercolorlight attributes. The border attribute must have a nonzero value assigned for the colors to appear.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

To achieve the identical look in Navigator and IE, you must determine the complementary colors that Navigator uses for its 3-D effect from the bordercolor attribute. Then assign those values to the bordercolordark and bordercolorlight attributes. You may place all three attributes in the same <TABLE> tag.

The amount of empty space between the border of a table cell and the content of the cell. Note that this attribute applies to space inside a cell. Without setting this attribute, most browsers render text content so that its leftmost pixels abut the left edge of the cell. If the table displays borders, adding a few pixels of breathing space between the border edge and the content makes the content more readable. Large padding may also be desirable in some design instances. This attribute is not as noticeable when the table does not display borders (in which case the cellspacing attribute can assist in adjusting the space between cells).

The amount of empty space between the outer edges of each table cell. If you set the border attribute of the table element to any positive integer value, the effect of setting cellspacing is to define the thickness of borders rendered between cells. Even without a visible border, the readability of a table often benefits from cell spacing.

The number of columns of the table. The HTML specification never adopted this attribute. In HTML 4, the functionality of this attribute is covered by the colgroup and col elements. In the meantime, the cols attribute is recognized by older and current browsers. The attribute assists the browser in preparation for rendering the table. Without this attribute, the browser relies on its interpretation of all downloaded tr and td elements to determine how the table is to be divided.

Used with IE data binding, this attribute advises the browser how many instances of a table row must be rendered to accommodate the number of data source records set by this attribute. A common application is setting a table cell to display a text input element whose datafld attribute is bound to a particular column of the data source (the datasrc is set in the table element). If the datapagesize attribute is set to 5, the browser must display five rows of the table (but the row is specified in the HTML only once).

Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute.

A block of contiguous records can be rendered in the table when you also set the datapagesize attribute of the table. Works only with text file data sources in IE 5/Mac.

The direction of character rendering for the element's text when the characters are not governed by inherent directionality according to the Unicode standard. Character rendering is either left-to-right or right-to-left. This attribute is usually set in concert with the lang attribute; it must be used to specify a character-rendering direction that overrides the current direction.

Defines which (if any) sides of a table's outer border (set with the border attribute) are rendered. This attribute does not affect the interior borders between cells. Including the border attribute without assigning any value to it is the same as setting the frame attribute to border. All settings can be replicated with CSS border-related attributes if you prefer.

The rectangular dimensions of a table that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one attribute, the browser performs the necessary calculations to automatically adjust the dimension along the other axis.

Note that the height attribute is not in the HTML specification. The assumption there is that the table height is calculated by the browser to best show all cell content given either the default or attribute-established width. Because different browsers on different operating systems can render text content in varying relative font sizes, it is not unusual to let the height of a table be calculated by the browser.

Inserts transparent padding outside the edges of the entire table on the page. Use CSS-padding-related attributes instead. Note that Netscape 6 responds to these table element attributes only in "quirks" mode (see DOCTYPE element).

The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.

Controls the table-layout-rendering algorithm. A value of fixed directs the browser to size the table and cells according to explicit height and width settings, rather than respecting content size minimums. This attribute mimics the table-layout CSS attribute.

Defines where (if at all) interior borders between cells are rendered by the browser. In addition to setting the table to draw borders to turn the cells into a matrix, you can also set borders to be drawn only to separate rows, columns, or any sanctioned cell grouping (thead, tbody, tfoot, colgroup, or col). The border attribute must be presenteither as a Boolean or set to a specific border sizefor any cell borders to be drawn. IE 5/Mac leaves gaps in inter-cell borders where rules are removed.

A textual description of the table, including, but not limited to, instructions that nonvisual browsers might follow to describe the purpose and organization of the table data. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

See hspace.

See height.