To style the first two columns of a table, employ the <colgroup> and <col> elements.
The <colgroup> element serves as a container for column specifications within a table.
Each group is defined using a <col> element.
The span attribute determines the number of columns to be styled.
The style attribute dictates the style to be applied to the columns.
Example
| <table> <colgroup> <col span=”2″ style=”background-color: #D6EEEE”> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> … |
| Note: The <colgroup> tag must be nested within a <table> element and positioned before any other table elements such as <thead>, <tr>, <td>, etc. However, if a <caption> element exists, it should precede the <colgroup> element. |
Only a restricted set of CSS properties are permitted for use within the colgroup:
Any other CSS properties applied will not impact your tables.
To apply distinct styles to additional columns, insert more <col> elements within the <colgroup>.
Example
| <table> <colgroup> <col span=”2″ style=”background-color: #D6EEEE”> <col span=”3″ style=”background-color: pink”> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> … |
To style columns in the middle of a table, include an “empty” <col> element (without any styles) for the preceding columns.
Example
| <table> <colgroup> <col span=”3″> <col span=”2″ style=”background-color: pink”> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> … |
You have the option to conceal columns using the visibility: collapse property.
Example
| <table> <colgroup> <col span=”2″> <col span=”3″ style=”visibility: collapse”> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> … |
