Flash cards
Review the key moves
What is the main idea behind HTML Table Colgroup?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___ span="2"Put the learning moves in the order that makes the concept easiest to apply.
The <colgroup> element is used to style specific columns of a table.
HTML Table Colgroup
If you want to style the first two columns of a table, use the <colgroup> and <col> elements.
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
The <colgroup> element should be used as a container for the column specifications.
Each group is specified with a <col> element.
The span attribute specifies how many columns get the style.
The style attribute specifies the style to give the columns.
Note
There is a very limited selection of legal CSS properties for colgroups .
Example
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...Live preview
Note
The <colgroup> tag must be a child of a <table> element and should be placed before any other table elements, like <thead> , <tr> , <td> etc., but after the <caption> element, if present.
Legal CSS Properties
There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:
width property visibility property background properties border properties
All other CSS properties will have no effect on your tables.
Multiple Col Elements
If you want to style multiple columns with different styles, use more than one <col> element inside 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>
...Live preview
Empty Colgroups
If you want to style columns in the middle of a table, insert an "empty" <col> element (with no styles) for the columns before:
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>
...Live preview
Hide Columns
You can hide columns with 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>
...Live preview