colgroup for column grouping

The colgroup element represents a set of columns. The span attribute specifies how many columns the colgroup element applies to. The irregular cells are counted as part of the column they start in.

The colgroup element includes all of the cells in a column including thead and tfoot, and it matches both th and td elements. The colgroup element relates to elements that are not contained within the element. A selector such as #colgroup1 > td doesn't match any elements.

In the following example, 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.

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
#colgroup1 {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>Header 1</th><th>Header 2</th><th>Header 3</th><th colspan="2">Header 4</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <th>AA:</th><td>BB</td><td>CC</td><td>DD</td><td>EE</td> 
            </tr> 
            <tr> 
               <th>D</th><td>E</td><td>F</td><td>L</td><td>M</td> 
            </tr> 
            <tr> 
               <th>X</th><td>Y</td><td colspan="2" rowspan="2">Z</td><td>Q</td> 
            </tr> 
            <tr> 
               <th rowspan="2">1</th><td>2</td><td rowspan="2">3</td> 
            </tr> 
            <tr> 
               <td>A</td><td>B</td><td>C</td> 
            </tr> 
        </tbody> 
        <tfoot> 
            <tr> 
                <th colspan="5">Line</th> 
            </tr> 
        </tfoot> 
    </table> 
</body> 
</html>
  
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

Related: