In The tables – part 1 I wrote about how the basic table elements should be used in a POSH document.
What we have until now is shown in example 3:
<table summary=”The steady growth of the company revenues in the last 10 years”>
<caption>Company revenues in the last 10 years</caption>
</table>
As promised, we’ll now tackle are the <colgroup> and the <col> tags.
Column group
When you look at tabular data it doesn’t take long to figure out that the data is grouped in two different ways – rows and columns. If you’ve ever produced a table in HTML you’ll know that you create it by creating rows and then creating cells in them. This means that accessing data by columns is not really all that easy. What you do is go through all the rows and get the cells of the correct index and retrieve the data. The same goes for styling cells in a specific column.
Setting a table cell to align the text to the right would commonly be achieved by assigning it a certain class name that would be associated with a CSS rule that would align the text to the right [1]. When applying the same style to the whole column the intuitive thing would be to add that style to all the cells in the column.
But! Here comes the <colgroup> element.
The semantic meaning of the <colgroup> elements the grouping of columns into groups. Not surprising. What you can get from this is the possibility to style these columns. The colgroup element has a few available attributes:
- span sets how many columns are in the colgroup. It defaults to 1,
- width sets the width of the whole group,
- align sets the text-align of all the cells in the column,
- valign sets the vertical-align of all the cells in the column,
Span is only used if the <colgroup> elements contains no <col> elements – in that case the number of columns is calculated from the spans of the child <col> elements. The width contains the width of the columns included in the <colgroup> element but is overridden by widths of the child <col> elements if present. It may contain a special value of 0* which means that the element should be as small as possible but enough to contain all the content.
Two additional attributes are present in the standard – char and charoff but support for them is not required by the standard so we’re not going to go into them even though their use could be useful in some cases.
Column
To specify a column without grouping columns into groups you can use the <col> element. You can also use <col> element to specify special columns inside a column group. If you use one directly inside the <table> you cannot use the other.
The attributes for the element are the same as for the <colgroup> element. They’re also used in the same way.
Problems
<colgroup> and <col> seem like a solution to a lot of problems when styling tables. You often want a whole column to be aligned to right, to have a certain background or be in a specific color. You might even want it to have a different border. All this could be done with a styling of the class name or the id of these elements.
Unfortunately all this only works in Internet Explorer. It doesn’t work in Firefox 2.0 (none of it) or Opera9.2 (only align attribute works, styling with CSS doesn’t). I don’t know if it works in Safari but that doesn’t really matter since the later is enough of a reason not to use this for styling. The only thing that is useful (it works in all the browsers tested) is the width attribute.
You can check all this in the example #4.
Next time…
In the next edition of the tables, hopefully less then two months away, we’ll check the content grouping tags, the thead, tbody and tfoot.
- No, align=”right” would not be ok and style=”text-align:right;” is also not the best idea due to the problems of changing this style and applying it to more cells. back
