- Tables are defined with the <TABLE> container tag.
- The <TABLE> tag contains rows of cells, defined with the
<TR> container tag.
- Each <TR> tag contains data cells, defined with the
<TD> container tag.
- Each data cell contains whatever you want-- links, images, lists, or
even other tables.
Rows are defined from top to bottom, and cells are defined from left
to right. If you want lines to show up between the table cells, use the
BORDER attribute in the <TABLE> tag. (Remember how
attributes in HTML tags work? You'll be using a few attributes in this
section.)
For example, the HTML code
<TABLE BORDER>
<TR>
<TD>northwest</TD>
<TD>northeast</TD>
</TR>
<TR>
<TD>southwest</TD>
<TD>southeast</TD>
</TR>
</TABLE>
will be rendered as:
| northwest |
northeast |
| southwest |
southeast |
Cells that Span Multiple Columns or Rows:
Sometimes, you may want one cell to span more than one column across,
or more than one row deep. In these cases, use the COLSPAN and
ROWSPAN attributes of the <TD> tag. For example:
<TABLE BORDER>
<TR>
<TD ROWSPAN="2">west</TD>
<TD>northeast</TD>
</TR>
<TR>
<TD>southeast</TD>
</TR>
</TABLE>
will be rendered as:
Aligning Cell Contents Within the Cells:
Usually, all cell contents are left-justified and vertically centered
by default. To set the horizontal or vertical placement within the
<TD> tag, use the ALIGN and VALIGN attributes,
respectively:
- ALIGN can be LEFT, RIGHT, or CENTER.
- VALIGN can be TOP, MIDDLE, BOTTOM, or
BASELINE (aligned to baseline of the text).
For example, this borderless grocery receipt lines up the prices on
the right margin:
<TABLE>
<TR>
<TD>laundry detergent</TD>
<TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR>
<TD>cat food</TD>
<TD ALIGN="RIGHT">$128.00</TD>
</TR>
</TABLE>
It will be rendered as:
| laundry detergent |
$4.99 |
| cat food |
$128.00 |
You can also use the ALIGN and VALIGN attributes in the
<TR> tag, to affect all cells in that row.
Other Useful Table Stuff:
Normally, the browser will figure out an appropriate size for the table,
and for the cells within the table, based on the browser size and the cell
contents. If you want to suggest specific widths for the table or for the
cells, use the WIDTH attribute in the <TABLE> and
<TD> tags. Use either a percentage of browser or table width,
like <TD WIDTH="20%"> (usually preferred), or an absolute
pixel value like <TD WIDTH="138"> (useful to make an image fit
exactly within a table cell).
|
