The align attribute

Like images, tables are rectangular objects that float in the browser display, aligned according to the current text flow: Normally, the browser left-justifies a table, abutting its left edge to the left margin of the display window. Or the table may be centered if under the influence of the <center> tag, centered paragraph, or centered division. Unlike images, however, tables are normally not inline objects. Text content normally flows above and below a table, not beside it. You change that display behavior with the align attribute for the <table> tag.

The align attribute accepts a value of either left or right, indicating that the table should be placed flush against the left or right margin of the text flow, with the text flowing around the table. This alignment style corresponds to the left and right alignment of images with text wrapping around the image.

You use the align attribute within the <table> tag differently than within the <tr>, <td>, and <th> tags. In those tags, the attribute controls text alignment within the table cells, not alignment of the table within the containing text flow.

The bgcolor and background attributes

You may make the background of a table a different color than the document's background with the bgcolor attribute for the <table> tag. The color value for the bgcolor attribute must be set to either an RGB color value or a standard color name. Both the syntax of color values and the acceptable color names are provided in Appendix F, Color Names and Values.

The extended browsers give every cell in the table (including the caption) this background color. You may also set individual row and cell colors by providing the bgcolor attribute or a style attribute for those rows or cells.

The background attribute, supported only by Internet Explorer, supplies the URL of an image that is tiled to fill the background of the table. The image will be clipped if the table is smaller than the image. By using this attribute with a borderless table, you can put text over an image contained within a document.

The bordercolor, bordercolorlight, and bordercolordark attributes

Supported by Internet Explorer only, these attributes set the color of the table borders, if displayed. Their values can be either an RGB hexadecimal color value or a standard color name, both of which are described fully in Appendix F, Color Names and Values.

Netscape and Internet Explorer normally draw a table border with three colors. Netscape uses light and dark variations on the document's background color. Internet Explorer does, too, unless you set those colors with special attributes: the bordercolorlight and bordercolordark colors shade the edges of the border to give it a 3D appearance, while bordercolor shades the central body of the border.

<table> rules

The effectiveness of the 3D effect is tied directly to the relationship of these three colors. In general, the light color should be about 25 percent brighter than the border color, and the dark color should be about 25 percent darker.

The border, frame, and rules attributes

The optional border attribute for the <table> tag tells the browser to draw lines around the table and the rows and cells within it. The default is no borders or cell rule lines at all. With Netscape, border is all or nothing, affecting the appearance and spacing both of the frame around the table and the rule lines between data cells. Internet Explorer, on the other hand, lets you individually modify the various line segments that make up the borders around the table (frame), as well as around the data cells (rules).

You may specify a value for border, but you don't have to. Alone, the attribute simply enables borders and a set of default characteristics. Netscape and Internet Explorer let you supply an integer value for border equal to the pixel width of the chiseled-edge lines that make the table appear to be embossed onto the page.

The Internet Explorer frame attribute modifies border's effects for the lines that surround the table. The default value--what you get if you don't use frame at all--is box, which tells the browser to draw all four lines around the table. The value void removes all four of the frame segments. The frame values above, below, lhs, and rhs draw the various border segments on the top, bottom, left, or right side, respectively, of the table. The value hsides draws borders on the top and bottom (horizontal) sides of the table; vsides draws borders on the left and right (vertical) sides of the table.

With Internet Explorer, you also may control the thickness of a table's internal cell borders via the rules attribute. The default behavior, represented by the misleading value of none,[1] is to draw cell rule lines matching the size and specifications of the border attribute. Specifying groups places thicker borders between row and column groups defined by the <thead>, <tbody>, <tfoot>, and <colgroup> tags. Using rows or cols places thicker borders between every row or column, respectively, while using all places thicker borders around every cell in the table. [the section called "Internet Explorer Table Extensions"]

[1] The value "none" is misleading because you can't remove the table's cell rule lines when the border attribute is in effect.

The cellspacing attribute

The cellspacing attribute controls the amount of space placed between adjacent cells in a table and along the outer edges of cells along the edges of a table.

Browsers normally puts two pixels of space between cells and along the outer edges of the table. If you include a border attribute in the <table> tag, the cell spacing between interior cells grows by two more pixels (four total) to make space for the chiseled edge on the interior border. The outer edges of edge cells grow by the value of the border attribute.

By including the cellspacing attribute you can widen or reduce the interior cell borders. For instance, to make the thinnest possible interior cell borders, include the border and cellspacing=0 attributes in the table's tag.

The cellpadding attribute

The amount of space between the edge of a cell and its contents, which by default is one pixel. You may make all the cell contents in a table touch their respective cell borders by including cellpadding=0 in the table tag. You may also increase the cellpadding space by setting its value greater than 1.

Combining border, cellspacing, and cellpadding attributes

The interactions between the border, cellpadding, and cellspacing attributes of the <table> tag combine in ways that can be confusing. Figure 11.2 summarizes how these attributes interact to create interior and exterior borders of various widths.

While all sorts of combinations of the border and cellspacing attributes are possible, these are the most common:

• border=1 and cellspacing=0 produces the narrowest possible interior and exterior borders: two pixels wide.

• border=n and cellspacing=0 makes the narrowest possible interior borders (two pixels wide), with an external border that is n plus one pixels wide.

• border=1 and cellspacing=n tables have equal-width exterior and interior borders, all with chiseled edges just one pixel wide. All borders will be n plus two pixels wide.

The cols attribute

To format a table, the browser must first read the entire table contents, determining the number and width of each column in the table. This can be a lengthy process for long tables, forcing users to wait to see your pages. The cols attribute tells the browser, in advance, how many columns to expect in the table. The value of this attribute is an integer value defining the number of columns in the table.

This attribute provides only advice to the browser. If you define a different number of columns, the browser is free to ignore the cols attribute in order to render the table correctly. In general, it is good form to include this attribute with your <table> tag, if only to help the browser do a better job of formatting your tables.

The hspace and vspace attributes

Just as with inline images, the hspace and vspace attributes tell Internet Explorer and Netscape to add some extra room on the left and right sides (for hspace) and the top and bottom (for vspace) of a table, thereby setting it off from the window edge and surrounding content. The attribute value is the integer number of pixels for that padding; a value of 0 is the default.

Figure 11.3 illustrates the effect of the hspace and vspace attribute spacing around a left-justified table with wraparound text.

The style and class attributes

The style attribute for the <table> tag creates an inline style for the tag, overriding any other style rule in effect. The class attribute lets you apply a predefined set of properties for this particular <table> tag; its value is the name of that class. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]

The valign attribute

The valign attribute for the <table> tag currently is supported only by Internet Explorer. It sets the default vertical alignment of data in their cells for the entire table. You achieve similar effects in Netscape by including a valign attribute within the individual <tr>, <td>, and <th> tags.

Acceptable values for the valign attribute in <table> are top or bottom; the default vertical position is the center of the cell.

The width and height attributes

Browsers will automatically make a table only as wide as needed to correctly display all of the cell contents. If necessary, you can make a table wider with the width attribute.

The value of the width attribute is either an integer number of pixels or a relative percentage of the screen width, including values greater than 100 percent. For example,

<table width=400>

tells the extended browser to make the table 400 pixels wide, including any borders and cell spacing that extend into the outer edge of the table. If the table is wider than 400 pixels, the browser ignores the attribute.

Alternatively,

<table width="50%">

tells the browser to make the table half as wide as the display window. Again, this width includes any borders or cell spacing that extend into the outer edge of the table, and has no effect if the table normally is more than half the user's current screen width.

Use relative widths for tables you want to automatically resize to the user's window; for instance, tables you always want to extend across the entire window (<table width="100%">). Use an absolute width value for carefully formatted tables whose contents will become hard to read in wide display windows.

For Netscape, you can use the height attribute to suggest a recommended height for the table. The browser will make the table no shorter than this height, but may make the table taller if needed to contain the table's contents. This attribute is useful when trying to stretch tables to fit in a frame or some specific area of a document, but is of little use otherwise.

The align attribute

The extended browsers automatically align cell contents inside their respective cells. The align attribute for the <tr> tag lets you change the default horizontal alignment of all the cells in a row. The attribute affects all the cells within the current row, but not subsequent rows.

An align attribute value of left, right, or center causes the extended browser to align the contents of each cell in the row against the left or right edge, or in the center of the cell, respectively. In addition, Internet Explorer supports a value of justify so that each line of text fills the cell. You also may change the alignment for individual cells within a row, overriding the value of the align attribute in the <tr> tag with the align attribute for the <th> and <td> tags, as described below. Accordingly, use the align attribute in the <tr> tag to specify the most common cell content justification for the row (if not the default), and use a different align attribute for those individual cells that deviate from that common alignment.

Table 11.1 displays the horizontal (align) and vertical (valign) table cell-content attribute values and options. Values in parentheses are the defaults.

The bgcolor attribute

Like its relative for the <table> tag, the bgcolor attribute for the <tr> tag sets the background color of the entire row.[2] Its value is either an RGB color value or a standard color name. Both the syntax of color values and the acceptable color names are provided in Appendix F, Color Names and Values.

[2] Unlike <table> with Internet Explorer though, <tr> does not support a background image.

Every cell in the row will be given this background color. Individual cell colors can be changed by providing the bgcolor attribute for those cells.

The bordercolor, bordercolorlight, and bordercolordark attributes

Like their brethren for the <table> tag, Internet Explorer lets you use these attributes to set the color of the borders within the current row.

Their values override any values set by the corresponding attribute in the containing <table> tag. See the corresponding description of these extensions in 11.2.1.3 for details. Color values can be either an RGB color value or a standard color name, both of which are described fully in Appendix F, Color Names and Values.

The nowrap attribute

Browsers treat each table cell as though it's a browser window unto itself, flowing contents inside the cell as they would common body contents (although subject to special table-cell alignment properties). Accordingly, the browsers automatically wrap text lines to fill the allotted table cell space. The nowrap attribute, when included in a table row, stops that normal word wrapping in all cells in that row. With nowrap, the browser assembles the contents of the cell onto a single line, unless you insert a <br> or <p> tag, which then forces a break so that the contents continue on a new line inside the table cell.

The style and class attributes

The style attribute for the <tr> tag creates an inline style for the table row, overriding any other style rule in effect. The class attribute lets you apply a predefined set of properties for this particular <tr> tag; its value is the name of that class. Note that to set <tr> style properties at the document level or in an external style sheet, you must use the contextual selector TABLE TR.

Not all style properties may apply. For instance, you cannot place a background image behind an individual table row as you can behind the entire table. However, you can set the text contents colors and font styles, for example. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]

<td>

The valign attribute

You may change the default vertical alignment for the contents of data cells contained within a table row. Normally, the browsers render cell contents centered vertically. By including the valign attribute in the <tr> tag with a value of top or bottom, you tell the extended browsers to place the table row's contents flush against the top or bottom of their cells or aligned to the baseline of the top line of text in other cells in the row (Figure 11.4). The value center, although acceptable, has no real effect since it simply reiterates the default vertical alignment.

<th> and <td>

<table border>
  <tr>
    <th>Alignment</th>
    <th>Top</th>
    <th>Baseline</th>
    <th>Center</th>
    <th>Bottom</th>
  </tr>
  <tr align=center>
    <th><h1>Baseline....<br>Line 2</h1></th>
    <td valign=top>AAyy</td>
    <td valign=baseline>_AAyy_</td>
    <td valign=center>AAyy</td>
    <td valign=bottom>AAyy</td>
  </tr>
</table> 
 

The align and valign attributes

The align and valign attributes are identical to those of the same name for the table row tag (<tr>; see previous), except that when used with a <th> or <td> tag, they control the horizontal or vertical alignment of content in just the current cell. Their value overrides any alignment established by the respective align or valign attribute of the <tr> tag, but does not affect the alignment of subsequent cells. See Table 11.1 for alignment details.

You may set the align attribute's value to left, right, or center, causing the browsers to align the cell contents against the left or right edge, or in the center of the cell, respectively. In addition, Internet Explorer supports a value of justify to fill each line of text so that it is flush to both sides of the cell. The valign attribute may have a value of top, bottom, center, or baseline, telling the browser to align the cell's contents to the top or bottom edge, or in the center of the cell, or (Netscape only) to the baseline of the first line of text in other cells in the row.

The width attribute

Like its twin in the <table> tag that lets you widen a table, the width attribute for table cell tags lets you widen an individual cell and, hence, the entire column it occupies. You set the width to an integer number of pixels, or a percentage indicating the cell's width as a fraction of the table as a whole.

For example,

<th width=400>

sets the current header cell's width, and hence the entire column of cells, to 400 pixels wide. Alternatively,

<td width="40%">

creates a data cell whose column will occupy 40 percent of the entire table's width.

Since the extended browsers make all cells in a column the same width, you should place a width attribute in only one cell within a column, preferably the first instance of the cell in the first row, for source readability. If two or more cells in the same column happen to have width attributes, the widest one is honored. You can't make a column thinner than the width the browser automatically determines is the minimum needed to display all of any cell contents in the column. So, if the browser determines that the column of cells needs to be at least 150 pixels wide to accommodate all the cells' contents, it will completely ignore a width attribute in one of the column's cell tags that attempts to make the cell only 100 pixels wide.

The height attribute

This attribute specifies a minimum height, in pixels, for the current cell. Since all cells in a row have the same height, this attribute need only be specified on one cell in the row, preferably the first. If some other cell in the row needs to be taller to accommodate its contents, this attribute is ignored and all the cells in the row will be set to the larger size.

By default, all the cells in a row are the height of the largest cell in the row that just accommodates its contents.

The colspan attribute

It's common to have a table header that describes several columns beneath it, like the headers we use in Table 11.1. Use the colspan attribute in a table header or data tag to extend an HTML table cell across two or more columns in its row. Set the value of the colspan attribute to an integer value equal to the number of columns you want the header or data cell to span. For example,

<td colspan=3>

tells the browser to make the cell occupy the same horizontal space as three cells in rows above or below it. The browser flows the contents of the cell to occupy the entire space.

What happens if there aren't enough extra cells on the right? The browser just extends the cell over as many columns as exist to the right; it doesn't add extra empty cells to each row to accommodate an over-extended colspan value. You may defeat that limitation by adding the needed extra, but content-less, cells to a single row. (Give them a single <br> tag as their contents if you want Netscape's embossed border around them.)

The rowspan attribute

Just as the colspan attribute layers a table cell across several columns, the rowspan attribute stretches a cell down two or more rows in the table.

You include the rowspan attribute in the <th> or <td> tag of the uppermost row of the table where you want the cell to begin and set its value equal to the number of rows you want it to span. The cell then occupies the same space as the current row and an appropriate number of cells below that row. The browser flows the contents of the cell to occupy the entire extended space. For example,

<td rowspan=3>

creates a cell that occupies the current row plus two more rows below that.

Like the colspan attribute, the browser ignores over-extended rowspan attributes and will only extend the current cell down rows you've explicitly defined by other <tr> tags following the current row. The browsers will not add empty rows to a table to fill a rowspan below the last defined row in a table.

Combining colspan and rowspan

You may extend a single cell both across several columns and down several rows by including both the colspan and rowspan attributes in its table header or data tag. For example,

<th colspan=3 rowspan=4>

creates a header cell that, as you might expect, spans across three columns and down four rows, including the current cell and extending two more cells to the right and three more cells down. The browser flows the contents of the cell to occupy the entire space, aligned inside according to the current row's alignment specifications or to those you may explicitly include in the same tag, as described earlier.

The nowrap attribute

Browsers treat each table cell as though it's a browser window unto itself, flowing contents inside the cell as they would common body contents (although subject to special table-cell alignment properties). Accordingly, the browsers automatically wrap text lines to fill the allotted table cell space. The nowrap attribute, when included in a table header or data tag, stops that normal word wrapping. With nowrap, the browser assembles the contents of the cell onto a single line, unless you insert a <br> or <p> tag, which then forces a break so that the contents continue on a new line inside the table cell.

The bgcolor and background attributes

Yet again, you can change the background color--this time for an individual data cell. This attribute's value is either an RGB hexadecimal color value or a standard color name. Both the syntax of color values and the acceptable color names are provided in Appendix F, Color Names and Values.

The background attribute, supported only by Internet Explorer, supplies the URL of an image that is tiled to fill the background of the cell. The image will be clipped if the cell is smaller than the image.

Neither background nor bgcolor will override a related style sheet property.

The bordercolor, bordercolorlight, and bordercolordark attributes

Internet Explorer lets you alter the colors that make up an individual cell's border--if table borders are turned on with the border attribute, of course. See the respective attributes' descriptions under the <table> tag in 11.2.1.3 for details.

The values for these three attributes override any values set for the containing <table> or <tr> tag. Their values can be either an RGB color value or a standard color name, both of which are described fully in Appendix F, Color Names and Values.

The style and class attributes

The style attribute for the <td> and <th> tags creates an inline style for the table cell, overriding any other style rule or related attribute in effect. The class attribute lets you apply a predefined set of properties for the particular tag; its value is the name of that class. For instance, you can set the text contents, colors and font styles. Unlike with the <tr> tag, but like <table>, you can place an image behind an individual data cell's contents.

To set <td> or <th> style properties at the document level or in an external style sheet, you must use their contextual selector: TABLE TD or TABLE TH. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"].

The align and valign attributes

By default, browsers place the caption's contents centered above the table. You may place it below the table with the align attribute set to the value bottom (the value top, of course, is equivalent to the default).

Internet Explorer uses the align attribute to control the horizontal position of the caption and provides the valign attribute to change the caption's vertical position. With Internet Explorer, set the align attribute to left, center (the default), or right to position the caption to the respective location relative to the table. Use the valign attribute to place a caption at the top or bottom of the table. The other browsers ignore Internet Explorer's different caption-align values and attributes.

Internet Explorer table extensions

The style and class attributes

Like the <td> and <th> table tags, the style attribute for the <caption> tag creates an inline style for the table caption, overriding any other style rule in effect. The class attribute lets you apply a predefined set of properties for the particular tag; its value is the name of that class. Be sure to use the contextual selector TABLE CAPTION when referring to caption styles at the document level or in external style sheets. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"].