|
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 |
|
Apples |
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. |
|