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.
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {
background-color: blue
}
#colgroup2 {
background-color: yellow;
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.
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {
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.