Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

The HTML above makes for a nice template that you can use whenever you’re starting a table. By filling in the headers and data elements with some genuine information, you can produce a table like the one providing some details from a real estate search shown in Figure 6.1.

<TABLE>
   <TR>    <!-- Row 1 -->
      <TH>ID #</TH>
      <TH>Address</TH>
      <TH>Bedrooms/Bathrooms</TH>
      <TH>Heat/AC</TH>
      <TH>Selling Price</TH>
   </TR>
   <TR>    <!-- Row 2 -->
      <TD>AR-1897-3</TD>
      <TD>1850 North Quincy Street</TD>
      <TD>4 BR, 2 BA</TD>
      <TD>Gas/Central Air</TD>
      <TD>$248,000</TD>
   </TR>
   <TR>    <!-- Row 3 -->
      <TD>AR-9854-22</TD>
      <TD>4614 22nd Street North</TD>
      <TD>3 BR, 2.5 BA</TD>
      <TD>Oil/Central Air</TD>
      <TD>$237,000</TD>
   </TR>
   <TR>    <!-- Row 4 -->
      <TD>AR-5634-7</TD>
      <TD>1022 Glebe Road</TD>
      <TD>5 BR, 2.5 BA</TD>
      <TD>Electric/Central Air</TD>
      <TD>$358,000</TD>
   </TR>
</TABLE>

FIGURE 6.1  Results from database searches are typically presented in table form to improve readability.

---

NOTE:  If the contents of a table cell are too wide to fit across the cell, a browser will break the contents onto multiple lines. If you want the content of a cell to be placed on one line with no breaking, include the NOWRAP attribute in the <TD> or <TH> tag that defines the cell.

---

Alignment

The beauty of HTML tables is the precise control you have over the alignment of content in individual cells and over the table itself. You can specify two types of alignment:

•  Horizontal alignment—The alignment of an element across the width of something, such as the alignment of a header across the width of a cell, for example, or the alignment of a table across the width of the page. Horizontal alignment is controlled by the ALIGN attribute. You can set ALIGN equal to LEFT, CENTER, or RIGHT.

•  Vertical alignment—The alignment of an element between the top and bottom of a cell. Vertical alignment of cell contents is controlled by setting the VALIGN attribute to TOP, MIDDLE, or BOTTOM.

---

NOTE:  You cannot specify vertical alignment for an entire table because, unlike the page width, a page’s length isn’t fixed.

---

Aligning the Entire Table

You can use the ALIGN attribute in the <TABLE> tag to specify how the table should be aligned relative to the browser window. Setting ALIGN to LEFT or RIGHT floats the table in the left or right margin, respectively. Floating tables behave much like floating images in that you can wrap text around them. This is how you produce a page element such as the author byline you see in Figure 6.2.

FIGURE 6.2  This article on the ESPN SportsZone site uses a floating table to create an author byline that even includes a photo.

Using the CENTER value of ALIGN centers the table in the browser window, although not all browsers support this. If you can’t center a table this way, you can enclose the HTML that produces the table between the <CENTER> and </CENTER> tags. This should become unnecessary, however, as browsers come into compliance with the HTML 4.0 recommendation.

---

NOTE:  The ALIGN attribute of the <TABLE> tag has been deprecated in the HTML 4.0 recommendation from the W3C, which means that its use is discouraged. This was done to encourage document authors to use style information to specify how the table should be aligned on a page.

---

Alignment Within a Row

If you want the vertical or the horizontal alignment to be the same for every cell in a given row, you can use the VALIGN and ALIGN attributes in the row’s <TR> tag. Any alignment specified in a <TR> tag will override all default cell alignments.

---

NOTE:  The default vertical alignment for both header and data cells is MIDDLE. The default horizontal alignment depends on the type of cell: Header cells have a CENTER alignment and data cells have a LEFT alignment.

---

Alignment Within a Cell

HTML 4.0 permits alignment control all the way down to the cell level. You can prescribe vertical or horizontal alignments in both header and data cells by using the VALIGN or ALIGN attributes in <TD> tags. Any alignment specified at the cell level overrides any default alignments and any alignments specified in a <TR> tag.

Setting alignments in individual cells represents the finest level of control of table alignment. In theory, you can manually specify vertical and horizontal alignments in every single cell of your tables if you need to. Unfortunately, it’s easy to get lost among all those VALIGN and ALIGN attributes, especially when it comes to deciding which will take precedence. If you have trouble mastering table alignment, remember the following hierarchy:

•  Alignments specified in <TD> or <TH> tags override all other alignments but apply only to the cell being defined.

•  Alignments specified in a <TR> tag override default alignments and apply to all cells in a row, unless overridden by an alignment specification in a <TD> or </TH> tag.

•  In the absence of alignment specifications in <TR>, <TD>, or <TH> tags, default alignments are used.

Controlling Other Table Attributes

In addition to tweaking alignments, you have a say in other aspects of the tables you create. These include

•  Content summary

•  Background color

•  Captions

•  Width of the table

•  Borders

•  Spacing within and between cells

The next six sections walk you through each of these table features and discuss the HTML tags and attributes you need to know to produce them.