http://www.chrispearson.org/pages/programming/html/LayoutTables/tabletag.asp
09h24
Wednesday, 8. October 2008

| The
HTML <table> tag defines an HTML element that allows
web authors to arrange data of all sorts into cells which,
in turn, are arranged into columns and rows. |
A
cell can contain text, lists and preformatted text, forms
and form
fields, images and other page objects and more tables.
Some
<table> tage attributes, like height, are often used but
are technically illegal. Others, like the CAPTION element
and summary attribute, are available but - sadly - seldom
used. |
Top cell
<td align="center" valign="middle" bgcolor="#0000FF"> |
Column 1
Top
Left
<td align="left" valign="top" bgcolor="#0000FF">
|
Column 2
Top
Right
<td align="right" valign="top" bgcolor="#0066FF"> |
Column 3
Bottom
Left
<td align="left" valign="bottom" bgcolor="#00FFFF"> |
Column 4
Bottom
Right
<td align="right" valign="bottom" bgcolor="#66FFFF"> |
|
|
The
World Wide Web Consortium (W3C) recommends that tables
alone are not used to format web pages, rather that authors
should apply style sheets conforming to current CSS standards.
Using these up-to-date standards provides proper support
for new browser versions (which also cope with table
layout, of course) and, very importantly, for special-purpose
user
agents such as those rendering non-visual media.
Using
CAPTION and the <table> tag's summary, along with other
HTML, will allow users of specialist user agents to garner
much more information from your web site, especially
where the user agent reads the page to the user. |
 |
The
<table> Elements
The
seven important elements of a HTML table are
- summary
- width
- border
- frame
- rules
- cellspacing
- cellpadding
The
<table> element must have a start tag and an end tag
<table> </table>
and
one or more of the seven elements listed above may be included
in the opening tag, for example
<table width="100%" border="0" cellspacing="0" cellpadding="6">
The
width attribute
can be blank (it doesn't appear at all, that is) in which
case the user agent must format the
cell itself - the de facto standard for such formatting
is to collapse the cell to the smallest practical dimensions
that will enclose its contents. So if a cell contains an
image of 100 pixels by 150 pixels its internal dimensions
will be 100x150 plus any area between the content and the
cell wall specified by the cellpadding attribute.
The cellspacing attribute
specified the distance between each cell in a table. As
shown below, where the border attribute is set to 1 to
show the edges of each cell. |
| |
| Cell sized around an image |
Cell
sized around an image with cellpadding set
to 6. Note the internal border in the cell |
Cells
sized around an image with cellspacing set
to 6 and cellpadding to
zero. Note that the image fills the cell (no internal
border) bu that there is spacing between cells |
|
|
|
|
| The
width attribute can be set to a percentage value, that
is a percentage of the user's browser window width or to
a pixel value which doesn't take into account the user's
browser window dimensions of the reolution of the user's
display: |
| |
|
|
|
A definitive definition of HTML tables and their implementation
is available at http://www.w3.org/TR/REC-html40/struct/tables.html.
|
|
If
you're using Dreamweaver then using tables for layout is well-supported
with options to convert table layouts to what are called layers in
DW-speak and which are style-sheeted page elements.
There
is also a mass of supporting how-to material in books, one
of the most complete I've found is the rather weighty but
very readable Dreamweaver MX Bible (Dreamweaver MX Bible,
Joseph W Lowery, Wiley, 2002, ISBN 0-7645-4931-6)
|
copyright ©2000
-
2008 Chris Pearson