| |
Tables are useful for the presentation of tabular information.
A table has an optional caption or title, optional column
headings, rows for information, and cells for each item where
a column and row intersect.
In the following table, the first column contains the header
information, each row explains an HTML table tag, and each
cell contains a paired tag or an explanation of the tag's
function.
Table Elements
|
|
Element
|
Description
|
|
<TABLE>
... </TABLE>
|
Defines a table
in HTML. If the BORDER attribute displays the table
with a border.
|
|
<CAPTION>
... </CAPTION>
|
Defines the caption
for the title of the table. The default position of
the title is centered at the top of the table. The
attribute ALIGN=BOTTOM can be used to position the
caption below the table.
Note: Any kind of markup tag can be used in
the caption.
|
|
<TR> ...
</TR>
|
Specifies a table
row within a table. you may define default attributes
for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or
VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes
at the end of this table for more information.
|
|
<TH> ...
</TH>
|
Defines a table
header cell. By default the text in this cell is aligned
left and centered vertically. Table data cells may
contain other attributes to determine the characteristics
of the cell and/or it's contents. See Table Attributes
at the end of this table for more information.
|
|
<TD> ...
</TD>
|
Defines a table
data cell. By default the text in this cell is aligned
left and centered vertically. Table data cells may
contain other attributes to determine the characteristics
of the cell and/or it's contents. See Table Attributes
at the end of this table for more informaiton.
|
Table Attributes
|
|
Note: Attributes defined within <TH>
... </TH> or <TD> ... </TD> cells
override the default alignment set in a <TR>
... </TR>
|
|
Attribute
|
Description
|
|
ALIGN (LEFT, CENTER,
RIGHT)
|
Horizontal alignment
of a cell.
|
|
VALIGN (TOP, MIDDLE,
BOTTOM)
|
Vertical alignment
of a cell
|
|
COLSPAN=n
|
The number (n)
of columns of a cell.
|
|
ROWSPAN=n
|
The number (n)
of rows in a cell.
|
|
NOWRAP
|
Turn off word
wrapping within a cell.
|
General Table
Format
|
|
The general format of a table looks like this
|
|
<TABLE>
<!-- start of table definition -->
<CAPTION> caption contents </CAPTION>
<!-- caption definition -->
<TR>
<!-- start of header row definition -->
<TH> first header cell contents
</TH>
<TH> last header cell
contents </TH>
</TR>
<!-- end of header row definition -->
<TR>
<!-- start of first row definition -->
<TD> first row, first cell
contents </TD>
<TD> first row, last cell
contents </TD>
</TR>
<!-- end of first row definition -->
<TR>
<!-- start of last row definition -->
<TD> last row, first cell
contents </TD>
<TD> last row, last cell
contents </TD>
</TR>
<!-- end of last row definition --></TABLE>
<!-- end of table definition -->
|
You can cut-and-paste the above code into your
own HTML documents, adding new rows or cells as necessary.
The <TABLE> and </TABLE> tags must surround the
entire table definition. The first item inside the table is
the CAPTION, which is optional. Then you can have any number
of rows defined by the <TR> and </TR> tags. Within
a row you can have any number of cells defined by the <TD>...</TD>
or <TH>...</TH> tags. Each row of a table is,
essentially, formatted independently of the rows above and
below it. This lets you easily display tables like the one
above with a single cell, such as Table Attributes, spanning
columns of the table.
<
Back to HTML Basics
|
