|
| Tags and Attributes: |
Description: |
| <table> . . . </table>
|
The <table> . . . </table>
tags define the table. The basic tag, without further definition,
creates a table without borders.
There are additional tags which allow the designer to determine
how a table displays.
|
|
<table border> |
Creates a table with a 1 pixel
border around the table and elements within the table. |
|
|
| Additional Netscape extensions
defining table appearance: |
| border=# |
Allows the designer to define
the width of the border. A border width value (#) can
be anything from 0 (zero, no frame) to an infinite value,
although values beyond ten begin to distract. The example at left
displays a border value of 3. This tag only defines the border around
the table, not the border between cells within the table. Netscape
displays borders as a drop shadow; Internet Explorer displays them
as indentations. In practice, many designers set border=0 to reduce
visual clutter. |
|
|
| cellspacing=# |
Cellspacing defines the width
of the border between elements within a table. A value (#)
again can be anything from 0 (zero, no frame) to an infinite
value, although values beyond ten begin to distract. Many designers
make cellspacing equal to the border, although graphically it is
not necessary. The example at left displays border value of 3 and
cellspacing value of 5. Experiment to see what works best for your
tables. |
|
|
| cellpadding=# |
Cellpadding defines the space
between a cell border and the contents of the cell for all elements
within a table. A value (#) again can be anything from
0 (zero, no frame) to an infinite value. The default value
of 1 pixel often makes larger tables difficult to read; expanding
the value make tables more legible. Tables throughout these pages
use a cellpadding value of 10; the example at left displays border
and cellpadding values of 3. Experiment to see what works best for
your tables. |
|
|
| <table border=# cellpadding=#
cellspacing=#> |
These display definitions can
be combined into a single definition and input once for each table;
the order in which the definitions appear generally follows border,
cellpadding, cellspacing. |
|
|
|
|
| <caption> . . . </caption>
|
Caption is a seldom applied but
useful means of adding titles to tables. Its use is optional. The
<caption> follows the <table> tag
and precedes the tags described below; the actual caption will appear
outside the table. The advantage of <caption> over
headers is that if tables are relocated on a page, the caption will
always follow. The caption text will default to plain text at the
browser defined size unless tagged to appear otherwise . The caption
also will be centered over the table unless you use <caption
align=bottom> to place it below the table; the caption width
will never be wider than the table (and may require two or more
lines to display). |
|
Table
Caption
| Cell 1 |
Cell 2 |
|
|
|
| <tr> . . . </tr> |
Tables are defined by rows and
columns. The basic building blocks of HTML tables are individual
rows (table row; <tr>), which are comprised
of "cells" (table data; <td>) which become
columns. The basic structure for a single row composed of two data
cells would be:
<tr><td>Cell Content</td><td>Cell Content</td></tr>.
The height and width of a data cell is largely determined by the
volume or size of the information contained by the cell and the
size of the page.
Neither table rows nor data cells need to contain information,
and can be used to enhance table legibility with additional white
space.
|
|
<td> . . . </td> |
|
| Cell Content |
Cell Content |
|
|
<th> . . . </th> |
Table headers (<th>)
are a special type of data cell used to emphasize text at the beginning
of rows or top of columns. Any text within a table header is automatically
bold and aligned to the center of the data cell. |
|
| |
Column Head |
| Row Head |
Cell Content |
|
| |
|
