## Tables

Use the TABLE element to format a table. The TR element (table row) inserts a row in the table, and the TD element (table detail) inserts a cell within a row. With Internet Explorer 3.0 as the browser, images or text can be placed within the cells. This example shows the HTML elements for a simple table:

    <TABLE>
    <TR>
    <TD>Apples<TD>Celery
    <TR>
    <TD>Oranges<TD>Carrots
    </TABLE>

This displays as:

Apples | Celery
Oranges | Carrots

By default, Internet Explorer aligns the table to the left. The width of the table, unless specified, is determined by the content of the longest element in each column. The content of each cell is aligned to the center and to the left edge of each cell, but you can override these defaults. For example, you can set the width of the table by using the WIDTH= attribute in the TABLE element. You can align the content of each cell to the top, left, right, or bottom of a cell by using the ALIGN= and VALIGN= attributes in TR or TD. This example creates a table that is the full width of the Internet Explorer window. The contents of the cells are at the top and the left:

    <TABLE WIDTH="100%">
    <TR VALIGN=TOP ALIGN=LEFT>
    <TD>Apples<TD>Celery
    <TR VALIGN=TOP ALIGN=LEFT>
    <TD>Oranges<TD>Carrots
    </TABLE>

This displays as:

Apples | Celery
Oranges | Carrots

In this example, the table width is given as a percentage of the total Internet Explorer window width. But you can also specify table widths in pixels.

You can add a caption, row and column headings, and a border to a table by using elements and attributes. For example, you can add a caption to a table by using the CAPTION element. By default, the caption is centered above the table, but you can use the ALIGN= attribute to place the caption at the top or bottom and at the left or right edge of the table.

To add headings to the rows and columns of a table, use the TH element. This element is like the TD element in that it creates a cell and can contain text and images, but it automatically emphasizes its text to distinguish it from text in other cells. To draw a border around the table and the individual cells, you use the BORDER= attribute in the TABLE element. Specify the border width in pixels. The following example creates a table with headings, border, and a caption:

    <TABLE BORDER=1>
    <CAPTION>Fruits and Vegetables</CAPTION>
    <TR>
    <TH>Fruits<TH>Vegetables
    <TR>
    <TD>Apples<TD>Celery
    <TR>
    <TD>Oranges<TD>Carrots
    </TABLE>

This displays as:

Fruits and Vegetables
Fruits | Vegetables
--- | ---
Apples | Celery
Oranges | Carrots

By default, Internet Explorer centers headings in the cell, but you can override this by using the ALIGN= and VALIGN= attributes.

You can add color to your tables by using the BGCOLOR= and BORDERCOLOR= attributes. These attributes are available in the TABLE, TR, and TD elements, so you can apply colors to all cells in a table, to cells in selected rows, or to individual cells. The BGCOLOR= attribute sets the color used to fill the background of the cell before text and images are drawn. The BORDERCOLOR= attribute sets the color of the borders drawn around the table, row, or cell. The following example uses the same background color for the column headings, but different colors for the two columns in the table:

    <TABLE BORDERCOLOR=NAVY BORDER=1>
    <CAPTION>Fruits and Vegetables</CAPTION>
    <TR BGCOLOR=GRAY>
    <TH>Fruits<TH>Vegetables
    <TR>
    <TD BGCOLOR=LIME>Apples<TD BGCOLOR=AQUA>Celery
    <TR>
    <TD BGCOLOR=LIME>Oranges<TD BGCOLOR=AQUA>Carrots
    </TABLE>

This displays as:

Fruits and Vegetables
Fruits | Vegetables
--- | ---
Apples | Celery
Oranges | Carrots

You can change the character formatting for the text in a table by using elements such as B, I, and FONT. You can change the color and font name for all text in a table by enclosing the table in an appropriate FONT element, but the table elements block the effect of other character formatting elements. To get these effects, you must apply the elements within each cell.

Within a cell, you can use most of the elements that you ordinarily use in the body of the HTML document, including elements for section headings, lists, and even other tables. Using tables in this way can give you additional control over the placement of text and images when your document is displayed, but can also make the management of your document more complex. For example, you can use tables to give your document a two-column layout by nesting a single-column table in each cell of a two-column table. But if you do this, you must take special care to divide the content of your document equally between the two nested tables and be prepared to account for differences in the size of the window through which users view your document. In most cases, documents that use tables in this way are designed to be viewed within a minimum window size at a given screen resolution.

If you use tables in the more traditional way (that is, presenting information in rows and columns), there are some additional elements and attributes that can make that job easier. The THEAD, TBODY, and TFOOT elements let you divide your tables into parts: header, body, and footer. The COLGROUP and COL elements let you group columns within the table and globally apply properties, such as alignment, to the columns without having to specify these properties in each TD element.

The FRAME= and RULES= attributes in the TABLE element let you control how the table border is drawn. For example, you can choose to have no border around the outside of the table, while restricting the border inside the table to just vertical rules separating the columns and horizontal rules separating the table header, body, and footer. The COLSPAN= and ROWSPAN= attributes in the TD and TH elements let you extend the content of a cell into adjoining cells. This is useful, for example, if you need to stretch a column heading across more than one column.

The following example shows how some of these elements and attributes can be used in a table:

    <TABLE WIDTH="50%" BORDER=1 FRAME=BOX RULES=GROUPS>
    <COLGROUP ALIGN=CENTER>
    <COLGROUP ALIGN=CENTER>
    <THEAD>
    <TR>
    <TH COLSPAN=2>Fruits and Vegetables
    <TBODY>
    <TR>
    <TD>Apples<TD>Celery
    <TR>
    <TD>Oranges<TD>Carrots
    </TABLE>

This displays as:

Fruits and Vegetables
Apples | Celery
Oranges | Carrots

Internet Explorer supports advanced table functionality, including displaying background images behind table cells, specifying rules or borders just along columns or along rows, and aligning text to the baseline within a table cell.

© 1996 Microsoft Corporation