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.
The following code shows the use of the colgroup element.
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {<!-- w w w . j a v 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>
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.
You can use the col element
instead of the span attribute of the colgroup element
to define a group.
col element has local attributes: span.
The align, width, char, charoff, and valign attributes are obsolete.
You can apply styles to groups of columns and the individual columns in that group.
The col element is placed inside the colgroup element, and
each instance of col represents one column in the group.
The following code uses the col Element.
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {<!--from w w w. j a v a 2 s .c o m-->
background-color: red
}
#col3 {
background-color: green;
font-size: small
}
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<col id="col1And2" span="2" />
<col id="col3" />
</colgroup>
<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>1234</td>
<td>1234</td>
<td>1234</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>450</td>
</tr>
</tbody>
</table>
</body>
</html>
You can use the span attribute to create a col
element that represents two columns in the colgroup.
The col element represents a single column
if you don't use the span attribute.
The code above applied a style to the colgroup and
to one of the col elements it contains.