HTML Tables
|
Tables arrange data -- text, preformatted text, images,
links, forms, form fields, other tables, etc. -- into rows and
columns of cells.
They're often used for
page layout,
but the trend now should be towards using
style sheets
for that.
Using tables for layout may create problems when rendering to
non-visual media.
Also, when used with graphics or pre-formatted text,
tables may force users to scroll horizontally.
|
<Table border=2 align=right>
<caption>
<a href="example.html">An Example</a>
</caption>
<tr> <th> a </th> <th> b </th> </tr>
<tr> <th> c </th> <td> d </td> </tr>
</Table>
- Tables start with an optional
caption followed by one or more
rows.
<tr> ... </tr>
- Each row is formed by one or more
cells,
which are differentiated into
header
<th> ... </th>
and
data cells
<td> ... </td>
- Cells can be merged across rows and columns.
- The model provides limited support for control over appearance,
for example horizontal and vertical alignment of cell contents,
border styles and cell margins.
TABLE
The TABLE attributes are all optional.
By default, the table is rendered without a surrounding border.
The table is generally sized automatically to fit the contents,
but you can also set the table width using the WIDTH attribute.
BORDER, CELLSPACING and CELLPADDING provide further control over
the table's appearence.
CAPTION
The CAPTION element provides a short description of the table's purpose.
They are rendered at the top or bottom of the table depending on the
optional ALIGN attribute.
A longer description may also be provided (via the
summary attribute) for
the benefit of people using speech or Braille-based user agents.
Rows
Each table row is contained in a
TR element, although the end tag can always be omitted
(in principle; some browsers don't handle this well).
Table rows may be
grouped into head, foot, and body sections,
(via the
THEAD,
TFOOT
and
TBODY elements, respectively).
Row groups may be rendered by user agents in ways that emphasize
this structure.
User agents may exploit the head/body/foot division to support
scrolling of body sections independently of the head and foot sections.
When long tables are printed, the head and foot information
may be repeated on each page that contains table data.
Columns
You may also define
columns groups to provide information that may be exploited by user
agents.
You may declare column properties at the start of a table definition
(via the
COLGROUP and
COL elements) in a way that enables user
agents to render the table incrementally than having to wait for all
the table data to arrive before rendering.
Cells
are defined by TD elements for data and TH elements for headers.
Like TR, these are containers and can be given
without trailing end tags
(in principle; some browsers don't handle this well).
TH and TD support several attributes:
ALIGN and VALIGN for aligning cell content, ROWSPAN and COLSPAN for
cells which span more than one row or column.
A cell can contain a wide variety of other block and text level
elements including form fields and other tables.
Tables can contain a wide range of content, such as headers, lists,
paragraphs, forms, figures, preformatted text and even nested tables.
|
