To round out your tables, you have the other basic tags to examine. You've already successfully used <CAPTION>, <TH>, and <TD>, but each has its own attributes and abilities that you need to know about.
The <CAPTION> tag has one attribute, ALIGN. ALIGN="TOP" and ALIGN="BOTTOM" are encouraged. By default, text is also aligned to center (horizontally). By TOP and BOTTOM, I'm referring to the entire table; the caption will default to the top of the table if not otherwise specified. To align the caption to BOTTOM, for instance, enter the following:
Let's create an entire table and use the ALIGN attribute to the <CAPTION> tag to force the caption to the bottom, like this:
<CAPTION>
The <CAPTION> tag is a container for reasons that may be obvious-it allows you to nest other HTML tags within the description. For instance:<CAPTION><B>Table 3.1 from the book <I>Life in El Salvador</I></B></CAPTION>Just about any sort of markup tags are possible inside the <CAPTION> tags, although some-like list tags-wouldn't make much sense.
The <CAPTION> tag has one attribute, ALIGN. ALIGN="TOP" and ALIGN="BOTTOM" are encouraged. By default, text is also aligned to center (horizontally). By TOP and BOTTOM, I'm referring to the entire table; the caption will default to the top of the table if not otherwise specified. To align the caption to BOTTOM, for instance, enter the following:
<CAPTION ALIGN="BOTTOM">Table of Common Foods</CAPTION>The <CAPTION> tag is commonly the first tag just inside the <TABLE> tag (although this placement is not required). Regardless of where you place the <CAPTION> tag, however, you must use ALIGN to force it to the bottom of the table. Otherwise, it will appear at the top, according to its default.
Let's create an entire table and use the ALIGN attribute to the <CAPTION> tag to force the caption to the bottom, like this:
<BODY><H3>Favorite Ice Cream Flavors</H2><TABLE BORDER><CAPTION ALIGN="BOTTOM">Data from the <I>New Jersey Times</I></CAPTION><TR><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH> <TR><TH>1970</TH><TD>50%</TD><TD>50%</TD> <TR><TH>1980</TH><TD>76%</TD><TD>24%</TD> <TR><TH>1990</TH><TD>40%</TD><TD>60%</TD> </TABLE></BODY>
When the browser interprets this table, it should place the caption at the bottom of the table, centered horizontally
Table Rows
Table rows (<TR>) can accept one attribute you should concern yourself with-ALIGN. The ALIGN attribute is used to determine how text will appear (horizontally) in each of the rows data cells. For example:
<TR ALIGN="CENTER"><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH> <TR ALIGN="CENTER"><TH>1970</TH><TD>50%</TD><TD>50%</TD> <TR ALIGN="CENTER"><TH>1980</TH><TD>76%</TD><TD>24%</TD> <TR ALIGN="CENTER"><TH>1990</TH><TD>40%</TD><TD>60%</TD>
Table Data and Rows
Aside
from accepting nearly any type of HTML markup tags within them, both
tags can accept four attributes (in most HTML versions). These are ALIGN, VALIGN, COLSPAN, and ROWSPAN. If you were to add all of these attributes, a typical <TH> (or <TD>) tag would be formatted like the following:
VALIGN is used to align the data vertically within cells. Possible values are TOP, BOTTOM, and CENTER. COLSPAN and ROWSPAN are used to force a cell to span more than one column or row, respectively. An example of this might be:
<TH ALIGN="direction" VALIGN="direction" COLSPAN="number" ROWSPAN="italics">ALIGN is used to align the data within the cell horizontally, accepting values of LEFT, RIGHT, and CENTER. Note that ALIGN is redundant when used with the ALIGN attribute of <TR>, unless it is used to override the <TR ALIGN=> setting.
VALIGN is used to align the data vertically within cells. Possible values are TOP, BOTTOM, and CENTER. COLSPAN and ROWSPAN are used to force a cell to span more than one column or row, respectively. An example of this might be:
No comments:
Post a Comment