The HTML <colgroup> element defines a group of columns within a table. It is used to specify properties for a column or a group of columns in a table using the <col> element.
Syntax
1 | <colgroup> |
2 | <col> |
3 | <col> |
4 | ... |
5 | </colgroup> |
Example
In this example we use the <colgroup> tags to style the columns. Note the use of the span and style attributes to do this.
Syntax
1 | <table> |
2 | <caption>Latest apparel</caption> |
3 | <colgroup> |
4 | <colstyle="background-color: #222222;"> |
5 | <colspan="2"style="background-color: #39483d;"> |
6 | </colgroup> |
7 | <thead> |
8 | ... |
Result
Attributes
The <colgroup> element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).
The <colgroup> element specifically uses the following attributes:
| Attribute | Values | Description |
align | left center right justify char | Sets the horizontal alignment of content within each column in the group. |
char | char | Specifies the alignment character for cells in a column. |
charoff | length | Specifies the offset of the alignment character for cells in a column. |
span | number | Specifies the number of columns a <col> element should span. |
valign | top middle bottom baseline | Sets the vertical alignment of content within each column in the group. |
width | length | Specifies the width of a column in the group. |
Content
The <colgroup> element can contain multiple <col> elements, which represent individual columns within the group unless the span attribute is present.
Did You Know?
- The
<colgroup>element is often used to apply common styling or formatting to multiple columns in a table, without having to specify the same attributes for each individual<col>element. - If a table contains both
<colgroup>and<col>elements that apply to the same column, the<col>element takes precedence.
Learn More
