demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The HTML col and colgroup elements

html / tables

Estimated reading time: 1 minute, 30 seconds

Of all the tags used with , including those for , perhaps the most neglected is the col element. The easiest way to describe col is by making a comparison to the div tag: col is an element that controls the appearance of other content, while the col tag does not appear on the page itself (or at least not without applied). col allows us to avoid the need to repeatedly apply classes to induvidual table cells.

World’s Fastest 100m Sprinters, 2012
NameCountryBest Time
Average Time9.66 seconds
Usain BoltJamaica9.58 seconds
Tyson GayUnited States9.69 seconds
Asafa PowellJamaica9.72 seconds

The col tag is integrated into the table structure just after the caption. (Note that I’ve removed closing tags that are optional in to save space – in XHTML, an opening <col> tag should be matched with a closing </col>).

<table id=sprinters>
<caption>World’s Fastest 100m Sprinters, 2012</caption>
<col><col><col>
<thead>
<tr><th>Name<th>Country<th>Best Time
</thead>
<tfoot>
<tr><td colspan=2>Average Time<td>9.66 seconds
</tfoot>
<tbody>
<tr><td>Usain Bolt<td>Jamaica<td>9.58 seconds
<tr><td>Tyson Gay<td>United States<td>9.69 seconds
<tr><td>Asafa Powell<td>Jamaica<td>9.72 seconds
</tbody>
</table>

This markup has the following applied:

#sprinters { border-collapse: collapse; }
#sprinters caption { font-size: larger; }
#sprinters td, #sprinters th { padding: .5rem; }
#sprinters tfoot tr td { border-top: 1px solid #000; }
#sprinters col:last-child { background: #ddd; }
#sprinters thead { background: #000; color: #fff; }

The number of col elements must match the number of table cells in each row. You can stretch a col to take command of more columns with the span attribute.

<col span=2><col>

The “count” of col elements is now equal to 3, and any style applied to the first col element will control the appearance of the first two table columns.

Table columns can be grouped together using the colgroup element:

<colgroup>
<col><col>
</colgroup>
<col>

Both col and colgroup can have styles applied to enhance the appearance of tables.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.