HTML5: How to specify the column properties of each column within a column group element?

Last update on February 06 2024 11:30:53 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Declares document character encoding -->
<title>How to specify the column properties of each column within a column group element</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<table class="table table-bordered"><!-- Start of table element with class attribute -->
<colgroup><!-- Start of column group element -->
<col span="3" style="background-color:#cc66Ff"><!-- Column properties for the first three columns -->
	<col style="background-color:#cc66Ff"><!-- Column properties for the fourth column -->
</colgroup><!-- End of column group element -->
<tr><!-- Start of table row for column headers -->
<th>COL-1</th><!-- Header for the first column -->
<th>COL-2</th><!-- Header for the second column -->
<th>COL-3</th><!-- Header for the third column -->
</tr><!-- End of table row for column headers -->
<tr><!-- Start of table row for data -->
<td>MySQL</td><!-- Data for the first column -->
<td>PHP</td><!-- Data for the second column -->
<td>SQL</td><!-- Data for the third column -->
</tr><!-- End of table row for data -->
<tr><!-- Start of another table row for data -->
<td>MySQL Exercise</td><!-- Data for the first column -->
<td>PHP Exercise</td><!-- Data for the second column -->
<td>SQL Exercise</td><!-- Data for the third column -->
</tr><!-- End of table row for data -->
</table><!-- End of table element -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML document starts with a doctype declaration indicating it's an HTML5 document.
Inside the <html> tags, the document structure begins.
The <head> section contains metadata about the document, such as character encoding and the title.
The <body> section is where the visible content of the webpage resides.
Within the body section, there's a <table> element created with the class attribute set to "table table-bordered" for styling.
Inside the table, there's a <colgroup> element defining column properties for a group of columns.
The <col> elements within the <colgroup> specify the properties for each column.
The <tr> elements represent table rows, with the first row containing column headers (<th> elements) and subsequent rows containing data (<td> elements).
The HTML document ends with the closing </html> tag.

Live Demo:

See the Pen col-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go To Exercise page