table group
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 and columns. 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 in Figure 8-44 makes use of the special table tags <thead>, <tbody>, and <tfoot> to classify and organize the rows of the table; <colgroup> and <col/> tags apply selective styles to groups of columns.
| 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 |
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.
<table> <caption>Sales Order</caption> <thead> XHTML for table head </thead> <tfoot> XHTML for table foot </tfoot> <tbody> XHTML for table body </tbody> </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>
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>
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>
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 these tutorial.
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 8-46 shows the current structure of the example table with borders added to make the cells visible.
| 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 |
The <colgroup> and <col/> Tags
The ability to selectively style the cells of a table can be controlled by the <colgroup> tag and its companion <col/> tag. By grouping cells with these tags you can define columns of data to which styles are applied and not have to style individual rows or individual cells.
Columns are grouped according to the similarities in styling among cells in the <thead>, <tfoot>, and <tbody> sections of the table. In general, those columns of cells that have the same styling needs are grouped together as a <colgroup>, with component columns identified by <col/> tags. Styles, then, can be applied to the <colgroup> tag to propogate across all cells in that group. Any styling differences required by a particular column in that group are applied through individual <col/> tags.
Column grouping specifications must be coded prior to the <thead>, <tfoot>, and <tbody> sections of the table. Groups are identified from left to right across the table. In the current example, the following groupings are defined. (Refer to Figure 8-45.)
<table> <caption>Sales Order</caption> <colgroup id="GROUP1"> <col/> </colgroup> <colgroup> <col/> </colgroup> <colgroup id="GROUP3"> <col id="COL3"/> <col/> <col id="COL5"/> </colgroup> ...
Three colgroups are defined based on styling commonalities of cells within the groups. The groups are assigned id values for reference within the style sheet that is produced later for these groups. Within each column group, <col/> tags define each column in that group. A particular column whose style differs somewhat from that of the group of which it is a member is given an id for separate reference in the style sheet.
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 this column within the group. (For single columns in a group, only a <colgroup> tag is required. Here, the optional <col/> tag is supplied simply to document the existence of the column.)
Keep in mind that this first column group also encompasses the first column of the <thead> and the first column of the <tfoot> sections of the table (a column group spans all sections of a table). Since information in the <thead> and <tfoot> sections are styled differently from the item numbers in the <tbody> section, the header and footer can be styled separately to override body stylings. The general practice is to focus on the <tbody> section for column groupings and to override these stylings as necessary.
The second column group includes the second column of item descriptions. No style sheet entries will be supplied, so no id is assigned; therefore the cells in this group will take on default values: data will be 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 similar 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 slightly different styling. The quantity column will be centered and the amount column will have a background color. These two columns are assigned id values for separate styling in the style sheet.
Applying Styles
The style sheet for the example table is built incrementally below so you can see how the column groups, header section, and footer section have their styles applied.
Applying Column Group Styles
<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 colgroup#GROUP1 {width:10%; text-align:center;
background-color:#F6F6F6}
table colgroup#GROUP3 {width:15%; text-align:right}
</style>
| 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 |
The table is displayed with collapsed borders, the caption is styled, and all cells of the table have padding of 3 pixels.
Column group GROUP1 (the first column) is assigned a width of 10%, text in the column is centered, and a background color is displayed. This is proper styling for the column of item numbers. Notice, however, that this same styling is applied to the first column of the header and footer lines since column grouping spans all sections of the table. Therefore, the address lines and the "Shipping," "Sales Tax," and "Total" labels are also centered and have a background color. (Recall that the header address cell spans five cells and the footer label cells span four cells. Their origin, though, is the first cell in the column, which takes on GROUP1 styling. These header and footer styles are overridden below.)
Column group GROUP3 (the last three columns) has its column widths set to 15% with text aligned right. This is common styling for all three columns except that the "Quantity" column needs to be centered and the "Amount" column needs a background color added. Also notice that the column headings are also aligned right, although they should be centered. All of these individual styling differences are handled below.
No styling is applied to the second column group containing the item "Description." By default, text in this group is aligned left. This column's heading, however, needs to be centered.
What has been accomplished so far is to apply the "most common" style to each of the column groups. There are, of course, styling differences for certain of the cells within these groups, but these differences can replace the common styles with additional style sheet entries.
Applying Column Styles
Two of the differences from the main column-group stylings involve the third column of quantities and the fifth column of amounts. The quantities should be centered and the amounts should have a background color. These overrides of and additions to column-group stylings are shown in Listing 8-47 containing styles for COL3 and COL5, the id values assigned in their respective <col\> tags (see Listing 8-45). Figure 8-48 shows the application of these additional styles.
<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 colgroup#GROUP1 {width:10%; text-align:center;
background-color:#F6F6F6}
table colgroup#GROUP3 {width:15%; text-align:right}
table colgroup#GROUP3 col#COL3 {text-align:center}
table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}
</style>
| 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 |
Note the use of contextual selectors to point to the <colgroup> and <col/> tags in the above style sheet:
table colgroup#GROUP1 table colgroup#GROUP3 table colgroup#GROUP3 col#COL3 table colgroup#GROUP3 col#COL5
This is the most formal way of identifying these groupings--by their positions within the hierarchy of table tags and by their id values. However, it is acceptable to code these selectors in an abbreviated fashion since, with id values assigned, there is no confusion regarding which column groups and which columns of which table are being referenced:
colgroup#GROUP1 colgroup#GROUP3 col#COL3 col#COL5
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 8-49.
<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 colgroup#GROUP1 {width:10%; text-align:center;
background-color:#F6F6F6}
table colgroup#GROUP3 {width:15%; text-align:right}
table colgroup#GROUP3 col#COL3 {text-align:center}
table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}
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>
| 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 |
Note in this example that styling is applied to individual rows and cells in the <thead> section of the table through their tr and td selectors. If there is only a single row in the header, or if all header rows share the same style, then you can simply style the single thead selector to encompass all rows and cells.
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 8-49 and shown in Figure 8-50.
<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 colgroup#GROUP1 {width:10%; text-align:center;
background-color:#F6F6F6}
table colgroup#GROUP3 {width:15%; text-align:right}
table colgroup#GROUP3 col#COL3 {text-align:center}
table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}
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>
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.
| 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 |
Table Rules
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 values shown in Figure 8-51.
| 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 attribute values can be modeled with style sheet settings. However, the rules="groups" attribute is a convenient way to display borders only around groups of cells defined with <colgroup> tags. Note in the following example that individual cell borders are not displayed in the table; borders surround only the groups of cells collected within <colgroup> tags.
| 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 |
The only change to effect this display is to remove any style sheet settings pertaining to cell borders (typically, td {border:inset 1px}), and to add the rules attribute to the <table> tag: <table rules="groups">.
Table Frame
The frame="value" attribute of the <table> tag sets the way in which the outside border is displayed. This attribute can take on the values shown in Figure 8-53.
| 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 applying the frame attribute, any style sheet settings pertaining to outer tables borders (typically, table {border:outset 1px}) must be removed. When paired with the rules attribute, the frame attribute defaults to full outer borders surrounding the table. In the following example, coding <table rules="groups" frame="void"> supresses display of outer table borders.
| 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 |
Styling without Column Grouping
The example table can be styled in virtually identical fashion without use of section or column groupings. One method is shown in the table and accompanying code below.
| 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 | |||
No use is made of <thead>, <tbody>, or <tfoot> sections of the table. Neither are column groupings used. Rather, style classes are applied to individual rows and cells in the body of the table. This table does not use rules or frame attributes.
<style type="text/css">
table {border-collapse:collapse}
table caption {font:bold 14pt; color:#707070}
table td {padding:3px}
.ADDR {text-align:left; background-color:#FFFFFF}
.HEAD {font-weight:bold; text-align:center;
background-color:#A0A0A0; color:#FFFFFF; border:solid 1px}
.NO {width:10%; text-align:center; background-color:#F0F0F0}
.DESC {text-align:left; background-color:#FFFFFF;
border-right:solid 1px; border-left:solid 1px}
.QTY {width:15%; text-align:center; background-color:#FFFFFF;
border-right:solid 1px}
.PRICE {width:15%; text-align:right; background-color:#FFFFFF;
border-right:solid 1px}
.AMOUNT {width:15%; text-align:right; background-color:#F0F0F0}
.SUB {text-align:right; background-color:#F0F0F0}
.TOTAL {font-weight:bold; background-color:#A0A0A0; color:#FFFFFF}
</style>
<table>
<caption>Sales Order</caption>
<tr class="ADDR">
<td colspan="5">
Your Name<br/>
Your Address<br/>
City, ST 55555<br/>
</td>
</tr>
<tr class="HEAD">
<td>No.</th>
<td>Description</td>
<td>Quantity</td>
<td>Price</td>
<td>Amount</td>
</tr>
<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>
<tr>
<td class="NO">22222</td>
<td class="DESC">Microsoft Office XP Professional</td>
<td class="QTY">2</td>
<td class="PRICE">449.99</td>
<td class="AMOUNT">999.98</td>
</tr>
<tr>
<td class="NO">33333</td>
<td class="DESC">Adobe Photoshop 7.0</td>
<td class="QTY">1</td>
<td class="PRICE">579.95</td>
<td class="AMOUNT">579.95</td>
</tr>
<tr>
<td class="NO">44444</td>
<td class="DESC">HP PhotoSmart 7550 Printer</td>
<td class="QTY">1</td>
<td class="PRICE">299.99</td>
<td class="AMOUNT">299.99</td>
</tr>
<tr>
<td class="NO">55555</td>
<td class="DESC">USB Device Cable</td>
<td class="QTY">1</td>
<td class="PRICE">5.49</td>
<td class="AMOUNT">5.49</td>
</tr>
<tr class="SUB">
<td colspan="4">Shipping</td>
<td>50.00</td>
</tr>
<tr class="SUB">
<td colspan="4">Sales Tax</td>
<td>155.77</td>
</tr>
<tr class="TOTAL">
<td colspan="4">Total</td>
<td>$ 2,431.16</td>
</tr>
</table>
Whether you use <thead>, <tbody>, and <tfoot> sections of a table, and whether you use <colgroup> or <col/> designators, is usually a matter of personal choice. With simple tables these grouping tags can save coding where there is great commonality across rows and columns. With more complex tables, however, it can be more work to apply and override conflicting stylings at the intersections of rows and columns.
It should be remembered that the section and column designators can be applied independently. That is, you can use the <thead>, <tbody>, and <tfoot> sections OR you can use the <colgroup> and <col/> groupings. They do not have to be used together. Again, for simple tables there can be coding efficiencies in using column grouping with or without row groupings.
