9.8: Table Groupings

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

The table in Figure \(\PageIndex{1}\) makes use of the special table tags <thead>, <tbody>, and <tfoot> to classify and organize the rows of the table.

Sales Order

Your Name Your Address City, ST 55555
No.	Description	Quantity	Price	Amount
Shipping				50.00
Sales Tax				155.77
Total				$ 2,431.16
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

Figure \(\PageIndex{1}\): Table with row groupings.

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

Figure \(\PageIndex{2}\): Structural organization of a table.

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.

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

<thead>
  XHTML for table head
</thead>

<tfoot>
  XHTML for table foot
</tfoot>

<tbody>
  XHTML for table body
</tbody>

</table>

Figure \(\PageIndex{3}\): Code outline of head, body, and foot of a table.

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.

 

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

Figure \(\PageIndex{4}\): Code for <thead> section of table.

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.

<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>
  <td colspan="4">Total</td>
  <td>$ 2,431.16</td>
</tr>
</tfoot>

Figure \(\PageIndex{5}\): Code for <tfoot> section of table.

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.

<tbody>
<tr>
  <td>11111</td>
  <td>Microsoft Windows XP Professional</td>
  <td>2</td>
  <td>169.99</td>
  <td>339.98</td>
</tr>
<tr>
  <td>22222</td>
  <td>Microsoft Office XP Professional</td>
  <td>2</td>
  <td>449.99</td>
  <td>999.98</td>
</tr>
<tr>
  <td>33333</td>
  <td>Adobe Photoshop 7.0</td>
  <td>1</td>
  <td>579.95</td>
  <td>579.95</td>
</tr>
<tr>
  <td>44444</td>
  <td>HP PhotoSmart 7550 Printer</td>
  <td>1</td>
  <td>299.99</td>
  <td>299.99</td>
</tr>
<tr>
  <td>55555</td>
  <td>USB Device Cable</td>
  <td>1</td>
  <td>5.49</td>
  <td>5.49</td>
</tr>
</tbody>

Figure \(\PageIndex{6}\): Code for <tbody> section of table.

 

After coding the three sections of the table, you might wish to view the output to make sure the table is properly structured before applying styles to it. Figure \(\PageIndex{6}\) shows the current structure of the example table with borders added to make the cells visible.

Figure \(\PageIndex{7}\): Organization of unstyled table.

Applying Header Styles

Once the column groups and individual columns are styled, additional special styling may be needed for the <thead> section of a table. This is the case in the current table where the address lines (the cell in the row with id="ADDR") should be aligned left, and the column headings (the cells in the row with id="HEAD") should be centered, bold, and with background and text colors. This additional styling is added to the style sheet in Listing 8-48 and applied in Figure \(\PageIndex{9}\).

<style type="text/css">
  table                          {border:outset 1px; border-collapse:collapse}
  table caption                  {font:bold 14pt; color:#707070}
  table td                       {border:inset 1px; padding:3px}
  
  table tr#ADDR td               {text-align:left; background-color:#FFFFFF}
  table tr#HEAD td               {font-weight:bold; text-align:center;
                                  background-color:#A0A0A0; color:#FFFFFF}
</style>

Figure \(\PageIndex{8}\): Additional style sheet entries for <thead> styling of example table.

 

Figure \(\PageIndex{9}\): Table with <thead> styling applied.

Applying Footer Styles

The table footer is styled in the same general fashion as the header. In this case, the "Shipping," "Sales Tax," and "Total" labels should be right aligned, and the total line should display in bold with background and text colors. These additions are made in Listing \(\PageIndex{10}\) and shown in Figure \(\PageIndex{11}\).

<style type="text/css">
  table                          {border:outset 1px; border-collapse:collapse}
  table caption                  {font:bold 14pt; color:#707070}
  table td                       {border:inset 1px; padding:3px}



  table tr#ADDR td               {text-align:left; background-color:#FFFFFF}
  table tr#HEAD td               {font-weight:bold; text-align:center;
                                  background-color:#A0A0A0; color:#FFFFFF}

  table tfoot td                 {text-align:right}
  table tfoot tr#TOTAL           {font-weight:bold;
                                  background-color:#A0A0A0; color:#FFFFFF}
</style>

Figure \(\PageIndex{10}\): Additional style sheet entries for <tfoot> styling of example table.

All cells in the footer section (table tfoot td) should be right aligned. The footer row identified by id="TOTAL" (table tfoot tr#TOTAL) should be bold with background and text colors. Again, if all rows and cells in the <tfoot> section are styled the same, then that styling can be applied through the single tfoot selector.

Figure \(\PageIndex{11}\): Table with <tfoot> styling applied.

Note that when you use table row groups, the <thead> and <tfoot> sections must be coded before the <tbody> section to pass W3C XHTML 1.1 validation.