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 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.
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.
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 }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.
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;To associate particular groups with particular styles, id values are assigned to the groups.
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 }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.
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
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.
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 |
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.