Another of the tags originally intended for presenting academic data that has been
stolen.. er.. adapted for layout purposes is the table. At its simplest, a table is composed
of only three tags, but each tag has a number of attributes, and while nesting tables can make
for great design, coding them can be a chore.
HTML tables, just like ones on paper, are composed of columns and rows. Cells can be joined
together to make complex arrangements, and can contain text, images, animations or any other
tags.
The <TABLE> tag starts the table, is a container tag, and takes the following
attributes.
- CELLPADDING
- This sets how much space is between the cell contents and the cell borders and is
expressed in pixels.
- CELLSPACING
- This sets how much space is between individual cells in the table, and is expressed
in pixels.
- BORDER
- This specifies how wide the table border is, both around the table and in between cells.
Unfortunately you can't give the table an outside border without interior borders.
- WIDTH
- Sets how wide the table is, and can be either an exact number of pixels or a percentage
of the available screen width.
- HEIGHT
- Sets how high the table is, and can be either an exact number of pixels or a percentage
of the available screen height.
- BGCOLOR
- Specifies a background color for the whole table. Can be either a named color, or
a hex code.
-
- BORDERCOLOR
- Sets the color of the table borders. Can be either a named color, or a hex code. Internet
Explorer only.
After the inital TABLE tag comes the first Table Row. The <TR> tag is a container tag,
requiring both opening and closing tags, and can contain other style tags. The attributes are:
- BGCOLOR
- This sets the background color of the row, and can be either a named color or a hex
code. Overrides the BGCOLOR specified in the TABLE tag, if any.
- ALIGN
- Sets alignment of the text or images in the row. Takes the standard values of RIGHT,
LEFT (the default) or CENTER. Can be overridden by the alignment specified in
individual cells.
- VALIGN
- Sets vertical alignment of the text or images in the row. Takes the standard values
of TOP, MIDDLE (the default) or BOTTOM. Can be overridden by the alignment specified in
individual cells.
Within each table row, the individual cells are created by <TD> tags (Table Data).
TD is a container tag, requiring the closing tag, may contain other style tags, and takes
the following attributes.
- BGCOLOR
- This sets the background color of the cell, and can be either a named color or a hex
code. Overrides the BGCOLOR specified in the TABLE or TR tags, if any.
- ALIGN
- Sets alignment of the text or images in the cell. Takes the standard values of RIGHT,
LEFT (the default) or CENTER as well as JUSTIFY and DECIMAL. When using the DECIMAL alignment,
there is an additional attribute of DP. DP takes whatever character you want the column to use
as a decimal point to align on. Overrides the alignment specified in the TR tag, if any.
- VALIGN
- Sets vertical alignment of the text or images in the cell. Takes the standard values
of TOP, MIDDLE (the default) or BOTTOM. Overrides the alignment specified in the TR
tag, if any.
- COLSPAN
- This joins cells in two columns together, and can be any number up the total number
of columns in the table.
- ROWSPAN
- Does the same thing as COLSPAN, only joins rows.
- NOWRAP
- Turns off text wrapping within the cell.
- WIDTH
- Sets how wide the cell is, and can be either an exact number of pixels or a percentage
of the available screen width.
- HEIGHT
- Sets how high the cell is, and can be either an exact number of pixels or a percentage
of the available screen height. When you specify the height and width of a cell, it can be
overridden if there is an object such as an image in another cell in the same row or column
that is larger than the value you've set.
A sample table:
 |
Table cells can hold text with style tags such as
typeface, or bold, lists, images, horizontal rules,
or even other tables. |
| An 80 percent wide table, centered, with border, cellspacing and cellpadding exaggerated
for emphasis. |
This is the second cell in the second row. |
| This cell spans two columns. |
| This cell takes up two rows, and the vertical
alignment is set for bottom. |
This is the forth row, second cell. The vertical
alignment is middle. |
| The final cell in this silly table. |