Styling Tables - Pro CSS Techniques - page 225

The colgroup element provides a way to define a set of columns for your table. Individual
columns are then defined using the col element. To define proper columns for our table, we
would add the following code:
<colgroup>
<col id="name" />
<col id="affiliation" />
<col id="url" />
<col id="role" />
</colgroup>
The summary Attribute
Data tables can take an optional summary attribute whose purpose is to provide a description
of the table's purpose and structure. The summary attribute, by default, doesn't display on the
page (although by using CSS attribute selectors, you could make it display). The summary
attribute is especially helpful to nonvisual viewers of your content. When writing a table sum-
mary, consider explaining any nonobvious relationships between rows and columns, as well
as defining the relationship between the table and the context of the document that contains it.
Although our example table is very simple and may not require a summary, one could be
added like so:
<table summary="A small table displaying the names, affiliations, and web ➥
addresses of the authors of Pro CSS Techniques.">
All Marked Up
So, our fully marked-up, semantic table code looks like this:
<table summary="A small table displaying the names, ➥
affiliations, web addresses, and roles of the ➥
authors and editors of Pro CSS Techniques.">
<caption>Pro CSS Techniques authors and editors</caption>
<colgroup>
<col id="name" />
<col id="affiliation" />
<col id="url" />
<col id="role" />
</colgroup>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Affiliation</th>
<th scope="col" abbr="URL">Website URL</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody id="authors">