<col> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:col

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

Introduction

The col element defines a group and the columns that exist within it.

You can use the span attribute to create a col element across two columns in the colgroup.

The col element represents a single column without the span attribute.

The col Element summary

Item Value
Element: col
Element Type:N/A
Permitted Parents: The colgroup element
Local Attributes:span
Contents:None
Tag Style: Void
New in HTML5? No
Changes in HTML5 The align, width, char, charoff, and valign attributes are obsolete.

Style Convention 

col {
   display: table-column;
}

Using the col element, 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.

Using the col 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}
#col3 {background-color: green; font-size:small}

      </style> 
   </head> 
   <body> 
      <table> 
         <caption>
            Results of the 2019 Survey<!--from ww w.j  a v  a 2 s  . c  o  m-->
         </caption> 
         <colgroup id="colgroup1"> 
            <col id="col1And2" span="2"> 
            <col id="col3"> 
         </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. </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 Fruit Data Enterprises</th> 
            </tr> 
         </tfoot> 
      </table>  
   </body>
</html>

Related Tutorials