Posted By

COBOLdinosaur on 05/26/13

Tagged

css
html

Versions (?)

Last Edited at 05/26/13 01:59am

Statistics

Viewed 913 times

Favorited by 0 user(s)

Related snippets

Alternating column colors in HTML tables

/ Published in: HTML

The colgroup and col structure is like a directive that specifies table formatting outside of the normal flow. Notice that the col tags do not get closed in HTML5, and the cascade is irregular. Normally the cascade applies to children, but the rows and cells in the table are not children or grandchildren of the col or colgroup. The relationship is more like stepchildren. Because of the irregular relationship, the CSS specificity appears to be quirky. Its not really, but it is not always as expected. To insure the the correct application of both the colgroup rules and the other rules being applied to the tr and td tags the colgroup rules should be applied in line, or be the final rule in the style entries.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

HTML:
<table>
<colgroup>
<col id="col1" span="2"> 
<col id="col2" span="2">
</colgroup>
<thead> ... etc ...
CSS:
#col1   {background-color:dodgerblue;}
#col2   {background-color:silver;}