Part 12: Tables
Tables are a wonderful formatting tools which may be used to present information in a very effective manner. A table can be as simple as one cell, or it may contain many cells (both high and wide).
The first tag for a table is <TABLE> and its inverse </TABLE>. Used at the beginning and end (respectively) of the information to be included in the table. There are three attributes which may be used within the <TABLE> tag:
BORDER
If this attribute is present, your table can have a border displayed around it. There is a default thickness if you just place the attribute in the tag as is (BORDER), but you may also specify the (optional) thickness setting by using BORDER=n instead, with n being replaced by a number (number of pixels in thickness). A border can help to make a table stand out.
CELLPADDING
The is amount of space placed around the table. Although there is a default padding, one may use this to make it thicker or thinner. The actual attribute is CELLPADDING=n, with n being the thickness in pixels.
<CAPTION> & </CAPTION>
This is for the caption of the table and displayed at the top and center of the table. If you want it below the table instead, you can use ALIGN=BOTTOM as an attribute.
<TH> & </TH>
This is to specify a header cell. By default, it is bold and centered. Other attributes or different attributes may be used.
<TR> & </TR>
This is to specify row in the table. Attributes may be used with this tag to specify settings for the whole row.
<TD> & </TD>
This specifies a table data cell. Attributes may be used to control the settings for this, but the default is aligned left and centered vertically.
We have been discussing that you may use attributes to better control the presentation of data in a table, but what are these attributes? The following list shows the attributes as well as the available settings for such. Use the following example for using an attribute, replace fields with the appropriate tag, attributes, and settings.
<TAG ATTRIBUTE=SETTING>
|
|
|
|
| ALIGN | LEFT, CENTER, WRAP | Horizontal alignment |
| VALIGN | TOP, MIDDLE, BOTTOM | Vertical alignment |
| COLSPAN | "n" (choose a number) | Number (n) columns cell spans |
| ROWSPAN | "n" (choose a number) | Number (n) rows a cell spans |
| NOWRAP | Turn word wrapping off |
Here is some HTML for an example table:
<TABLE BORDER CELLPADDING=5>
<CAPTION>
This is the caption.
</CAPTION>
<TH>Header Cell 1</TH>
<TH COLSPAN=2>Header Cell 2</TH>
<TR><TD>Cell</TD>
<TD>Cell</TD>
<TD>Cell</TD></TR>
<TR> <TD ROWSPAN=2>Cell</TD>
<TD>Cell</TD>
<TD>Cell</TD></TR>
<TR><TD COLSPAN=2>Cell</TD></TR>
</TABLE>
This is how the example table would appear:
| Header Cell 1 | Header Cell 2 | |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | ||
You can also change the background colors, and even add images, for a given table. (I have done this in previous sections, to highlight "bad ideas" in HTML.) Just add the background tags within the cell, column, or table brackets for different effects:
<table 1 cellpadding=5 align="center" border="1">
<caption> This is the caption. </caption>
<th bgcolor="#FF3300">Header Cell 1</th>
<th colspan=2 bgcolor="#993300"><font color="#FFFFFF">Header Cell 2</font></th>
<tr>
<td bgcolor="#FFFF00">Cell</td>
<td bgcolor="#993300">Cell</td>
<td bgcolor="#FF9900">Cell</td>
</tr>
<tr>
<td rowspan=2 background="pantile2.gif">Cell</td>
<td bgcolor="#993300">Cell</td>
<td bgcolor="#FF9900">Cell</td>
</tr>
<tr>
<td colspan=2 bgcolor="#993300">Cell</td>
</tr>
</table>
This is the caption. Header Cell 1 Header Cell 2 Cell Cell Cell Cell Cell Cell Cell
On to Part 13: Automatic Redirection