Web development, Table Columns and Groups with HTML 4.0

Let us take a look at the new table tags and features offered by HTML 4.0, These tags will enable Web developers the ability to specify columns in tables, without having to rely on the colspan attribute from earlier versions of HTML.

Defining column groups

The HTML table is row-oriented: You create a table as a series of rows, each of which contains a series of cells. This makes it easy to create row groups, since you can easily group adjacent <tr> tags to create a group.

Column grouping is more difficult, since the corresponding cells that make up a column are spread throughout all the rows in the table. In order to create column groups, you must use special tags to define those groups before you define the rows and cells of your table. You do this with the <colgroup> tag.

The <colgroup> tag appears inside the <table> tag. It accepts four attributes:

align
valign
width
span

The align and valign are used to specify the content alignment of the cells in this column group, much like they are used to control general cell alignment when used in other table tags. The width attribute specifies the width of the cells, either as a percentage of the table or as an absolute number of pixels.

Things get more interesting when you use the span attribute. By default, the <colgroup> tag defines a column group containing just one column. The first tag affects the first column of the table, the second controls the second column, and so forth. If you wanted all the cells in the first column of your table to be aligned to the right, you could say:

<table>
<colgroup align=right>
</colgroup>
...table rows go here
</table>

This is the same as adding align=right to the first cell of every row in your table.

Column groups can contain more than one column, and you indicate this with the span attribute. If you wanted the first three columns to be right aligned, you simply add span=3 to the <colgroup> tag.

You can create multiple column groups by using several <colgroup> tags. In this table:

<table>
<colgroup span=3 align=right>
</colgroup>
<colgroup span=4 width=50>
</colgroup>
...table rows go here
</table>

The first three columns will be right-aligned, while the next four columns will have the default alignment and will be 50 pixels wide.

One final use for column groups: Like row groups, column groups are delineated by rules when the rules=groups attribute is added to the <table> tag. If you have adjacent columns that need to be set off by a surrounding, you might use a <colgroup> tag with only a span attribute to group those columns.

Handling individual columns

You can use the <colgroup> tag to handle a range of similar columns. What if some of those columns within the group must be handled differently? You use the <col> tag.

The <col> tag lets you control individual columns within a column group. For example, suppose you have four columns you want to have grouped with a rule around them but the individual columns require different widths and alignment. To do this, you will use the <colgroup> tag to group them, and the <col> tag to handle each column:

<table rules=groups>
<colgroup>
<col align=left width=20%>
<col align=right width=10%>
<col width=35%>
<col width=35%>
</colgroup>
...other colgroups go here, followed by table rows
</table>

In this case, there is no need to add a span attribute to the <colgroup> tag, since the browser can determine the number of columns specified by the individual <col> tags.

To make life even easier, you can add the span attribute to the <col> tag, making it apply to several adjacent columns. If you had a column group containing ten columns, with the first nine left-aligned and the tenth right-aligned, you could say

<table rules=groups>
<colgroup>
<col align=left span=9>
<col align=right>
</colgroup>
...other colgroups go here, followed by table rows
</table>

In general, you should use the <colgroup> tag to group columns into groups when you want to use rules=groups in the <table> tag. Use the <col> tag when you want to control columns without exploiting the grouping features of the <colgroup> tag.

Column grouping is implemented in Internet Explorer 4.0, so you can experiment with all of these features.

<< BACK

Specifying Table Columns and Groups with HTML 4.0