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

Table Sections and Column Properties

The W3C has added several table-related tags to the HTML 4.0 recommendation that enables you to split tables into logical sections and to control alignment properties of rows or columns of data.

Table Sections

The <THEAD>, <TBODY>, and <TFOOT> container tags denote the start of a table header, body, and footer, respectively. By explicitly distinguishing the different parts of your table, you can control your row and column attributes. The separation of the table header and footer also makes it easier for the browser to render and print tables that are broken across several pages. Additionally, it makes it simple to set up a static header or footer in frames at the top and bottom of a browser screen and to place the body of the table in a scrollable frame between the header and footer frame.

<THEAD> contains the rows that compose the table header and <TFOOT> contains the rows that compose the footer. In the absence of <THEAD> and <TFOOT> tags, the <TBODY> tag becomes optional. You can use multiple <TBODY> tags in long tables to make smaller, more manageable chunks. All three tags can take both the ALIGN and VALIGN attributes to control horizontal and vertical alignment within the sections they define.

---

NOTE:  All three tags are only valid between the <TABLE> and </TABLE> tags.

---

A typical table created with these tags might look like this:

<TABLE>
   <THEAD>
      <TR>
         ...
      </TR>
   </THEAD>
   <TBODY>
      <TR>
         ...
      </TR>
      <TR>
         ...
      </TR>
      ...
      <TR>
         ...
      </TR>
   </TBODY>
   <TFOOT>
      <TR>
         ...
      </TR>
   </TFOOT>
</TABLE>

---

NOTE:  According to the HTML 4.0 recommendation, the use of the </THEAD>, </TBODY>, and </TFOOT> tags is optional. However, in the interest of good coding style, you should include the appropriate closing tags when dividing your tables into sections.

---

Used in conjunction with the column grouping tags discussed in the next section, the table section tags are an ideal way to control how different properties are applied to different parts of a table.

Setting Column Properties

The <TR> tag supports attributes that enable you to specify all sorts of properties for an entire row of a table. In particular, you get very good control over both horizontal and vertical alignment with the ALIGN and VALIGN attributes. HTML 4.0 takes this a step further by making it possible to apply horizontal alignment properties to columns of data as well.

You have two options when applying alignment properties to columns. The <COLGROUP> tag is appropriate when applying properties over several columns. It takes the attributes ALIGN, which can be set to LEFT, CENTER, or RIGHT; VALIGN, which can be set to TOP, MIDDLE, BOTTOM, or BASELINE; WIDTH, which is set equal to the desired width of the group; and SPAN, which is set to the number of consecutive columns to which the properties apply.

<TABLE BORDER=1>
   <COLGROUP ALIGN=LEFT SPAN=4>
   <COLGROUP ALIGN=RIGHT SPAN=2>
   <COLGROUP ALIGN=CENTER>
   <TBODY>
      <TR>
         <TD>First column group, left horizontal alignment</TD>
         <TD>First column group, left horizontal alignment</TD>
         <TD>First column group, left horizontal alignment</TD>
         <TD>First column group, left horizontal alignment</TD>
         <TD>Second column group, right horizontal alignment</TD>
         <TD>Second column group, right horizontal alignment</TD>
         <TD>Third column group, center horizontal alignment</TD>
      </TR>
   </TBODY>
</TABLE>

The seven columns are split into three groups. The first four columns have left-aligned table entries, the fifth and sixth columns have entries horizontally aligned along the right, and the last column has centered entries (see Figure 6.11).

---

NOTE:  When you use the <COLGROUP> and <COL> tags, the default value of the ALIGN, VALIGN, and SPAN attributes are LEFT, MIDDLE, and 1, respectively. WIDTH has no specific default value. Rather, the width will be made as big as it needs to be to accommodate the contents of the cell.

---

If columns in a group are to have differing properties, you can use <COLGROUP> to set up the group, and then specify the individual properties with the <COL> tag. <COL> takes the same attributes as <COLGROUP>, but these attributes only apply to a subset of the columns in a group. For example, the HTML splits the five columns of the table into two groups:

FIGURE 6.11  Grouping columns enables you to assign common alignment properties to a number of columns simultaneously.

<TABLE BORDER=1 CELLPADDING=16>
   <COLGROUP>
      <COL ALIGN=CENTER>
      <COL ALIGN=RIGHT>
      <COL ALIGN=LEFT>
   </COLGROUP>
   <COLGROUP>
      <COL ALIGN=RIGHT SPAN=2>
   </COLGROUP>
   <TBODY>
      <TR>
         <TD>First column in first group, center horizontal alignment</TD>
         <TD>Second column in first group, right horizontal alignment</TD>
         <TD>Third column in first group, left horizontal alignment</TD>
         <TD>First column in second group, right horizontal alignment</TD>
         <TD>Second column in second group, right horizontal alignment</TD>
      </TR>
   </TBODY>
</TABLE>

The first group’s columns use center, right, and left horizontal alignments, whereas both columns in the second group use only right horizontal alignment (see Figure 6.12).