HTML5: How to specify the column properties of each column within a column group element?
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics