Table Colgroup
Table columns that need styling can be styled with the <colgroup> element.
HTML Table Colgroup
Use the <colgroup> and <col> elements to customize a table’s first two columns.
| 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 column requirements should be contained within the <colgroup> element.
A <col> element specifies each group.
The number of columns that receive the style is specified by the span attribute.
The style that the columns will have is specified by the style attribute.
Note: The list of acceptable CSS parameters for colgroups is extremely small.
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 needs to be a child of a <table> element, and it needs to be positioned after the <caption> element, if it is present, but before any other table elements, such as <thead>, <tr>, <td>, etc.
Legal CSS Properties
The CSS properties that can be used in the colgroup are quite restricted and only include the following:
width property
visibility property
background properties
border properties
All other CSS properties will have no effect on your tables.
Multiple Col Elements
Employ additional <col> elements inside the <colgroup> if you like to style more columns in different ways:
Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: red">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Empty Colgroups
Insert a “empty” <col> element (without any styles) for the columns that come before if you wish to style columns in the middle of a table:
Example
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: red">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Hide Columns
With the visibility: collapse property, you can conceal columns:
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>
...
table colgroup
html table colgroup
table column styling
col element
span attribute
css properties for colgroup
multiple col elements
empty colgroups
hiding table columns
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The HTML element is a powerful tool for styling and managing table columns. It allows you to apply styles and attributes to a group of columns within a table, making it easier to maintain consistent formatting across your content.
One of the primary use cases for is to apply CSS styles to an entire column or set of columns. This is particularly useful when you need to change the width, background color, or other visual properties of a specific column. By wrapping the relevant elements within a , you can update the styling in a single location rather than having to target each cell individually.
The attribute on the element is also an important feature of . This allows you to specify how many columns a particular element should span, making it easy to create complex table structures with varying column widths.
In addition to styling, can be used to hide or show specific columns within a table. By applying the “display: none” CSS property to a , you can effectively remove that column from the table’s visual representation while still maintaining the underlying data structure.
Overall, the element is a versatile tool that every HTML table author should be familiar with. By mastering its capabilities, you can create more organized, maintainable, and visually appealing tables for your web content.
The HTML element allows you to apply styles to a group of columns within a table. This can be a powerful tool for controlling the appearance and layout of your table data.
The element is placed as a direct child of the element, before any (table row) elements. Within the , you can use the element to target specific columns.
Theelement supports the span attribute, which lets you apply styles to multiple consecutive columns at once. This can be especially helpful when you need to consistently style a group of related columns.
When using, you have access to many CSS properties to customize the appearance, such as width, background-color, and border. This gives you granular control over the visual presentation of your table data.
An empty element can also be used to hide entire columns from view, without removing the underlying data. This can be useful for tables with optional data that you want to keep available but not displayed by default.
Overall, the and elements provide a flexible way to style and structure the columns in your HTML tables, leading to more polished and responsive table designs.
