Group table columns with colgroup
Description
HTML tables is rows oriented.
You place the definitions of your cells inside of tr
elements and build up tables row by row.
To apply styles to columns, we can use the colgroup and col elements.
The colgroup element
with local attributes span
represents a set of columns.
The colgroup element can contain
zero or more col elements.
The width, char, charoff, and valign attributes are obsolete.
Example
The following code shows the use of the colgroup element.
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {<!--from w w w. jav a 2 s.c o m-->
background-color: red
}
#colgroup2 {
background-color: green;
font-size: small
}
</style>
</head>
<body>
<table>
<colgroup id="colgroup1" span="3" />
<colgroup id="colgroup2" span="2" />
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>HTML</td>
<td>CSS</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>CSS</td>
<td>Java</td>
<td>Javascript</td>
<td>450</td>
</tr>
</tbody>
</table>
</body>
</html>
Note
The code above defined two colgroup elements.
The span attribute specifies
how many columns the colgroup element applies to.
The first colgroup in the listing applies to the first three columns in the table,
and the other element applies to the next two columns.
The global id attribute is define for each colgroup element and
CSS styles is defined by using the id values as selectors.