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.
City, ST 55555
Microsoft Windows XP Professional
Microsoft Office XP Professional
Adobe Photoshop 7.0
HP PhotoSmart 7550 Printer
USB Device Cable
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.
<thead> XHTML for table head
<tfoot> XHTML for table foot
<tbody> XHTML for table body
When arranging the code for these sections both the <thead> and
<tfoot> tags must appear before the
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
Your Name<br/> Your Address<br/> City, ST 55555<br/>
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 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.
The full style sheet for the table is shown below.
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.
Your Name<br/> Your Address<br/> City, ST 55555<br/>
Several entries in the style sheet pertain to the column groupings for the
<tbody> section of the table.
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.
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:
All cell borders are displayed (default)
No cell borders are displayed
Only horizontal cell borders are displayed
Only vertical cell borders are displayed
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
No outside border
Only the top border is displayed
Only the bottom border is displayed
Only the left-hand side border is displayed
Only the right-hand side border is displayed
Only the top and bottom borders are displayed
Only the left and right borders are displayed
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.
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.