When working with large tables with varying cell sizes, alignments, and colors you can bring a more orderly structure to the table by grouping columns and rows. In this fashion you can set structural and styling specifications for the groups and have those features propogate automatically across the individual cells contained within the groups.

The table shown below makes use of the special table tags <thead>, <tbody>, and <tfoot> to organize the table and the <colgroup> and <col> tags to apply selective styles to those sections.

It is instructive to view the general layout of this table and its component parts in outline form. This view is produced below, identifying the various grouped parts of the table and the major tags used to structure it.

There are three main structural parts to a table, the "table head," "table body," and "table foot," which are set apart within associated thead, tbody, and tfoot tags. The outline XHTML coding for these parts is shown below.

When arranging the code for these sections both the <thead> and <tfoot> tags must appear before the <tbody> tag.

The <thead> Tag

The <thead> section contains information that appears one time at the beginning of the table. It is coded very much like a normal set of headings. In this example there are two rows comprising the heading. The first row contains name and address information that is placed in a single cell that spans the width of the table. The second row is a set of column headings.

The <tfoot> Tag

The table footer appears one time at the bottom of a table. It is identified with a <tfoot> tag. The present table contains three rows in the footer. All rows have a spanned label area and a single cell for data.

The <tbody> Tag

The table body displays the main content of the table. It appears in the <tbody> section and contains as many rows as there are data items to report. In the present table data appear in five separate cells across the row.

One of the important purpose of defining the data rows of a table inside <tbody> tags (and separately from the header and footer) is that the body becomes a self-contained, scrollable unit when populated with data from an external file or database. This capability is not covered in this tutorial.

The <colgroup> and <col> Tags

The ability to selectively style the cells of a table is controlled by the <colgroup> tag and its companion <col> tag. By grouping cells with these tags, table styling can be applied to the column groups -- and propogated across their component cells -- and not have to be applied to individual cells.

Columns are grouped according to the similarities and differences in styling among cells in the thead, tfoot, and tbody sections of the table. In general, those columns of cells that have similar styling needs are grouped together as a <colgroup>.

Column grouping specifications must appear before the sections of the table to which they apply. In this example, the following grouping code is placed ahead of the <tbody> tag. This is the section of the table where cells can be effectively grouped for application of common styles. The layout of the <tbody> section of the page to which this grouping applies is reproduced below.

Three colgroups are defined based on styling commonalities of cells within the groups. Within each column group, <col/> tags define each column (cell) in that group.

The first column group includes just the first column of item numbers. This column will have its width set to 10% of the table width, with centered alignment and a background color. All data cells appearing in this <colgroup> will be assigned this styling. A single <col/> tag identifies the column within the group. For single columns, only a <colgroup> tag is required. Here, the optional <col/> tag is supplied to document the existence of the column.

The second column group includes the second column of item descriptions. No styling is supplied, therefore all cells in this group will take on default values (data are aligned left and vertically aligned in the middle of the cells).

The third column group includes the last three columns (quantity, price, and amount). These columns are defined as a single group because identical styling will be applied to all cells. All cells will be 15% of the width of the table and have data aligned right because they are numeric values. Within this group, though, two of the columns will have additional styling. The quantity column will be centered and the amount column will have a background color.

Thus, styling for the entire body of the table takes place through these column group definitions. Now the task is to create the style sheet to apply formatting to these groups. You will come to see that using column groups is very similar to using id values to identify tags for application of styles.

Applying Styles

The full style sheet for the table is shown below.

Certain stylings pertain to the table as a whole, to its caption, and to the line of column headings.

table                      { width:100%; border-collapse:collapse }
table caption              { font:bold 14pt; color:#707070 }
table td                   { padding:3px }
table#TAB thead tr#ADDR td { text-align:left; background-color:#FF0000 }
table#TAB thead tr#HEAD td { font-weight:bold; text-align:center;
                             background-color:#A0A0A0; color:#FFFFFF }

The table width is set to 100% of the page width and borders are collapsed. The caption is styled and all cells of the table have padding of 3 pixels. Within the <thead> section of the table the address lines and the column header lines are styled by identifying the <thead> section and those identified rows.

<thead>
<tr id="ADDR">
  <td colspan="5">
    Your Name<br/>
    Your Address<br/>
    City, ST 55555<br/>
  </td>
</tr>
<tr id="HEAD">
  <td>No.</td>
  <td>Description</td>
  <td>Quantity</td>
  <td>Price</td>
  <td>Amount</td>
</tr>
</thead>

Several entries in the style sheet pertain to the column groupings for the <tbody> section of the table.

table colgroup#COL1           { width:10%; text-align:center;
                                background-color:#FF0000 }
table colgroup#COL3           { width:15%; text-align:right }
table colgroup#COL3 col#CELL1 { text-align:center }
table colgroup#COL3 col#CELL3 { background-color:#FF0000 }

To associate particular groups with particular styles, id values are assigned to the groups.

<colgroup id="COL1>
   <col/>
</colgroup>

<colgroup>
   <col/>
</colgroup>

<colgroup id="COL3">
   <col id="CELL1"/>
   <col/>
   <col id="CELL3"/>
</colgroup>

The first column group (item number) has its width set to 10% of the table width, with centered alignment and a background color. The second column group (item description) has no styling supplied. The third column group (quantity, price, and amount) are sized each to 15% of the width of the table with data aligned right. Within this group, the quantity column is centered and the amount column is given a background color.

As you can see, column groupings serve as styling surrogates for the actual table cells -- for the <tr> and <td> tags -- that would otherwise be styled directly. Whether this provides advantages or obscurities is for you to decide. This table is styled without columns groupings at the bottom of this page.

Two style sheet entries pertain to the <tfoot> of the table.

table tfoot                   { text-align:right; background-color:#FF0000 }
table tfoot tr#TOTAL          { font-weight:bold; background-color:#A0A0A0;
                                color:#FFFFFF }

The entire section is right-aligned and is given a background color. The final total line is given bold styling with background and foreground colors.

<tfoot>
<tr>
  <td colspan="4">Shipping</td>
  <td>50.00</td>
</tr>
<tr>
  <td colspan="4">Sales Tax</td>
  <td>155.77</td>
</tr>
<tr id="TOTAL">
  <td colspan="4">Total</td>
  <td>$ 2,431.16</td>
</tr>
</tfoot>

Table Rules and Frame (Deprecated)

Special table formatting can be applied to control the display of borders within tables. The rules="value" attribute of the <table> tag sets the display of internal borders surrounding the cells. This attribute can take on the following values:

Value	Description
all	All cell borders are displayed (default)
none	No cell borders are displayed
rows	Only horizontal cell borders are displayed
cols	Only vertical cell borders are displayed
groups	Only borders surrounding column groups are displayed

These attributes can be modeled with style sheet settings and are deprecated under evolving standards. However, the rules="groups" attribute is used in the example as a convenient way to display borders around groups of cells defined with <colgroup> tags. Note in the example that individual cell borders are not displayed; borders surround only the groups of cells collected within a <colgroup> tag.

The frame="value" attribute of the <table> tag sets the way in which the outside border is displayed. This attribute can take on the following values:

Value	Description
void	No outside border
above	Only the top border is displayed
below	Only the bottom border is displayed
lhs	Only the left-hand side border is displayed
rhs	Only the right-hand side border is displayed
hsides	Only the top and bottom borders are displayed
vsides	Only the left and right borders are displayed
box|border	All four borders are displayed (default)

When paired with the rules attribute, the frames attribute defaults to full outer borders surrounding the table. In the example, coding frame="void" supresses display of table borders.

With application of the rules and frame attributes the <table> tag used in the example becomes

<table rules="groups" frame="void">

Styling without Column Grouping

The example table can be styled in virtually identical fashion without use of column groupings. One method is shown in the output and accompanying code shown below.

Sales Order

Your Name Your Address City, ST 55555
No.	Description	Quantity	Price	Amount
11111	Microsoft Windows XP Professional	2	169.99	339.98
22222	Microsoft Office XP Professional	2	449.99	999.98
33333	Adobe Photoshop 7.0	1	579.95	579.95
44444	HP PhotoSmart 7550 Printer	1	299.99	299.99
55555	USB Device Cable	1	5.49	5.49
Shipping				50.00
Sales Tax				155.77
Total				$ 2,431.16

<style>
  table                  { width:100%; border:0px; border-collapse:collapse }
  table caption          { font:bold 14pt; color:#707070 }
  table td               { padding:3px }
  table thead tr#ADDR td { text-align:left; background-color:#FF0000 }
  table thead tr#HEAD td { font-weight:bold; text-align:center; border:solid 1;
                           background-color:#A0A0A0; color:#FFFFFF }
  .NO                    { width:10%; text-align:center;
                           background-color:#FF0000 }
  .DESC                  { text-align:left; background-color:#FF0000;
                           border-right:solid 1px; border-left:solid 1px }
  .QTY                   { width:15%; text-align:center;
                           border-right:solid 1px; background-color:#FF0000 }
  .PRICE                 { width:15%; text-align:right;
                           border-right:solid 1px; background-color:#FF0000 }
  .AMOUNT                { width:15%; text-align:right;
                           background-color:#FF0000 }
  table tfoot            { text-align:right; background-color:#FF0000 }
  table tfoot tr#TOTAL   { font-weight:bold; background-color:#A0A0A0;
                           color:#FFFFFF }
</style>

<table>
<caption>Sales Order</caption>

<thead>
<tr id="ADDR">
  <td colspan="5">
    Your Name<br/>
    Your Address<br/>
    City, ST 55555<br/>
  </td>
</tr>
<tr id="HEAD">
  <td>No.</th>
  <td>Description</td>
  <td>Quantity</td>
  <td>Price</td>
  <td>Amount</td>
</tr>
</thead>

<tbody>
<tr>
  <td class="NO">11111</td>
  <td class="DESC">Microsoft Windows XP Professional</td>
  <td class="QTY">2</td>
  <td class="PRICE">169.99</td>
  <td class="AMOUNT">339.98</td>
</tr>
...
</tbody>

<tfoot>
<tr>
  <td colspan="4">Shipping</td>
  <td>50.00</td>
</tr>
<tr>
  <td colspan="4">Sales Tax</td>
  <td>155.77</td>
</tr>
<tr id="TOTAL">
  <td colspan="4">Total</td>
  <td>$ 2,431.16</td>
</tr>
</tfoot>

</table>

Use is made of <thead>, <tbody>, and <tfoot> sections of the table as identifiers for applying styles. However, no column groupings are used. Rather, style classes are applied to individual cells in the body of the table. This extra coding is required for the data rows since different styles are required for each cell. This code is repeated for each row of the table. The trade-off with column grouping occurs primarily at this data row level. Also, this table does not use rules and frame attributes.

Even without column grouping, though, there are still efficiencies in using <thead>, <tbody>, and <tfoot> tags as targets for style sheet selectors.

---

---