Download Table Tags - Mrs. Puskar

Table Tags
The HTML table elements in the following chart are in the left-hand column, and the
available attributes are in the center column. The right-hand column provides a
description. Here's an example of how to use the chart to add the width attribute and
value to a table tag:
<table width="400">
That would make a table four hundred pixels wide as long as the content didn't force it
bigger. You can also express the attribute value as a percentage.
When used in a table tag, a percentage would cause the table to be drawn as a
percentage of the horizontal space available. When used in a table data cell, then the
percentage is rendered as a percentage of the table width. Example:
<td width="40%">
That would make the table data cell 40% of the width of the table. Whether using a
hard measurement or a percentage, the width of the table data cells must equal the
width of the table itself or the browser will render the table according to what it's
programming determines is best rather than what you wanted—and you never know
how that will turn out.
Before creating any complicated tables, I recommend drawing them on paper first. That
will give you a clearer idea of what you're trying to accomplish as you set about
creating the code. For a basic overview of tables, see the Tables Overview tutorial.
Tag
Tag attribute
Function
Begins a table.
<table>
border="..."
Sets the border width in numerical
values from 0 and up.
cellspacing="..."
Empty space between table data
cells.
cellpadding="..."
Empty space between the edge of a
cell and cell content.
align="..."
Aligns the table to the left, right or
center.
width="..."
The width of the table; measured in
pixels or as a percentage of available
space.
bgcolor="..."
Background color for all cells that do
not have a background color or
image specified.
background="..."
Background image for all cells that do
not have a background color or
image specified.
bordercolor="..."
Border color for the table.
bordercolorlight="..." Light border color. When used with
bordercolordark, helps to create a 3d
effect. (Internet Explorer)
bordercolordark="..." Dark border color. When used with
bordercolorlight, helps to create a 3d
effect. (Internet Explorer)
valign="..."
Vertical alignment of the content,
values are top or bottom.
Establishes a table row.
<tr>
align="..."
Horizontal alignment of the content
of all cells within this row. Values are
left, right and center.
valign="..."
Vertical alignment of all cells within
this row. Values are top, middle,
bottom, and baseline.
bgcolor="..."
Background color of all cells within
this row that don't have their own
background color or background
image.
background="..."
Background image of all cells within
this row that don't have their own
background color or background
image.
bordercolor="..."
Border color for this row (Internet
Explorer).
bordercolorlight="..." Light border color for 3d look
(Internet Explorer).
bordercolordark="..." Dark border color for 3d look
(Internet Explorer).
Begins the table header cell. *See
note.
<th>
align="..."
Horizontal alignment of the cell
content. Values are left, right and
center.
valign="..."
Vertical alignment of the cell content.
Values are top, middle, bottom, and
baseline.
rowspan="..."
The number of rows the cell will
span.
colspan="..."
The number of columns the cell will
span.
nowrap
Prevents cell content from
automatically wrapping.
width="..."
The width of this cell, expressed in
pixels or percentage.
bgcolor="..."
Background color of the cell.
background="..."
Background image of the cell.
bordercolor="..."
Border color of the cell (Internet
Explorer).
bordercolorlight="..." Light border color for 3d look.
(Internet Explorer)
bordercolordark="..." Dark border color for 3d look.
(Internet Explorer)
Begins the table data cell.
<td>
align="..."
Horizontal alignment of the cell
content. Values are left, right and
center.
valign="..."
Vertical alignment of the cell content.
Values are top, middle, bottom, and
baseline.
rowspan="..."
The number of rows the cell will
span.
colspan="..."
The number of columns the cell will
span.
nowrap
Prevents cell content from
automatically wrapping.
width="..."
The width of this cell, expressed in
pixels or percentage.
bgcolor="..."
Background color of the cell.
background="..."
Background image of the cell.
bordercolor="..."
Border color of the cell (Internet
Explorer).
bordercolorlight="..." Light border color for 3d look.
(Internet Explorer)
bordercolordark="..." Dark border color for 3d look.
(Internet Explorer)
</td>
Closes a table data cell.
</th>
Closes a table header cell.
</tr>
Closes a table row.
</table>
Closes a table.
Note: Table headers functions as table data cells, with two differences:
1. Text in a table header cell is automatically made bold in most browsers. Where
you see bold text in the chart above is where I used table headers. Table
headers are used where there are rows and columns of information that is
presented as a chart, such as above, but not in tables used as page layout
mechanisms.
2. Screen readers are better able to reference the material in the chart for the
visually impaired than without the use of headers.
Table headers can be used horizontally across the top of a chart, vertically down the
side of a chart, or both. Yes indeed.