<colgroup>

Definition

The HTML colgroup element allows you to group together columns in a table for formatting purposes. By using this element, you can apply styles or attributes to a group of columns instead of individual columns. This can make it easier to manage the formatting of your table and make it more consistent across all the columns.

The colgroup element must be used inside a table element and must contain one or more col elements, each representing a column in the group. You can use the span attribute to specify the number of columns that the colgroup should apply to.

You can also use the width attribute to specify the width of each column in the group, either as a percentage or in pixels. This can be useful for ensuring that all the columns in the group have the same width.

Examples

<table>
	<colgroup>
		<col span="3" class="highlighted" />
	</colgroup>
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 1, Cell 1</td>
			<td>Row 1, Cell 2</td>
			<td>Row 1, Cell 3</td>
		</tr>
		<tr>
			<td>Row 2, Cell 1</td>
			<td>Row 2, Cell 2</td>
			<td>Row 2, Cell 3</td>
		</tr>
	</tbody>
</table>

In this example, the colgroup element is used to group the first three columns of the table. The span attribute is used to specify that the colgroup should apply to three columns, and the class attribute is used to apply the "highlighted" class to the columns in the colgroup, which can be used in a style sheet to highlight the text within those columns.

Attributes

Best Practices

• Use the colgroup element to group columns in a table for formatting purposes.
• Use the span attribute to specify the number of columns that the colgroup should apply to.
• Use the class attribute to apply styles to the columns in the colgroup using CSS.
• Use the width attribute to specify the width of each column in the colgroup.
• Place the colgroup element inside the table element, before any thead, tbody, or tfoot elements.
• Use the col element within a colgroup to apply styles or attributes to individual columns.
• Use the style attribute to apply inline styles to the columns within a colgroup, though these styles are better separate in a stylesheet.

Accessibility Considerations

Using the colgroup element can make it easier to apply styles to a table in a way that improves its accessibility. For example, using the class attribute to apply a CSS style that increases the font size or contrast of the text within the columns of a table can make the table easier to read for users with visual impairments.

Additionally, using the width attribute to specify the width of each column can help ensure that the table is properly rendered on a variety of devices and screen sizes, which can improve the accessibility of the table for users with mobility impairments or users who are accessing the table on a small screen.

Browser Compatibility