<colgroup> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:colgroup

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. colgroup

Introduction

The colgroup element marks a set of columns.

The colgroup element includes all of the cells in a column, including thead and tfoot elements, and it matches both th and td elements.

The colgroup element links elements that are not contained within the element.

You can't use the colgroup element as the parent element to select its children, for example, #colgroup1 > td doesn't match any elements.

The colgroup Element summary

Element: colgroup
Element Type:N/A
Permitted Parents: The table element
Local Attributes:span
Contents:Zero or more col elements
Tag Style: Void if used with the span attribute; otherwise, start and end tags
New in HTML5?No
Changes in HTML5The width, char, charoff, and valign attributes are obsolete.

Style Convention 

colgroup {
   display: table-column-group;
}

The following code shows the use of the colgroup element.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
thead [colspan], tfoot [colspan] {text-align:center; }
caption {font-weight: bold; font-size: large; margin-bottom:5px}
#colgroup1 {background-color: red}
#colgroup2 {background-color: green; font-size:small}

      </style> 
   </head> 
   <body> 
      <table> 
         <caption>
            Results of the 2020 Survey<!--from w  w  w  .  j  a  v  a2s  .c om-->
         </caption> 
         <colgroup id="colgroup1" span="3"></colgroup> 
         <colgroup id="colgroup2" span="2"></colgroup> 
         <thead> 
            <tr> 
               <th>Rank</th>
               <th>Name</th>
               <th>Level</th>
               <th colspan="2">Size &amp; Votes</th> 
            </tr> 
         </thead> 
         <tbody> 
            <tr> 
               <th>Favorite:</th>
               <td>CSS</td>
               <td>Green</td>
               <td>Medium</td>
               <td>500</td> 
            </tr> 
            <tr> 
               <th>2nd Favorite:</th>
               <td>HTML</td>
               <td>Orange</td>
               <td>Large</td>
               <td>450</td> 
            </tr> 
            <tr> 
               <th>3rd Favorite:</th>
               <td>SQL</td> 
               <td colspan="2" rowspan="2"> This is a test. This is a test.This is a test.This is a test.This is a test. </td> 
               <td>203</td> 
            </tr> 
            <tr> 
               <th rowspan="2">Joint 4th:</th> 
               <td>Oracle</td> 
               <td rowspan="2">75</td> 
            </tr> 
            <tr> 
               <td>Python</td> 
               <td>Ruby</td> 
               <td>Javascript</td> 
            </tr> 
         </tbody> 
         <tfoot> 
            <tr> 
               <th colspan="5">? 2019 java2s.com</th> 
            </tr> 
         </tfoot> 
      </table>  
   </body>
</html>

Related Tutorials