HTML Colgroup
The <colgroup> element in HTML is used to group together one or more <col> elements within a <table>. This helps in applying styles or attributes to a set of columns collectively rather than individually. It’s particularly useful when you want to style or set properties for multiple columns at once.
Here’s a basic rundown of how it works:
-
<colgroup>Element: This element is used to define a group of columns in a table. You can use it to specify attributes or styles that will be applied to the columns within the group. -
<col>Element: This element defines the properties for each column within the<colgroup>. You can use it to set attributes like width for the columns.
Basic Example
Here’s a simple example of using <colgroup> to set the width of columns in a table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Example</title>
<style>
/* Optional CSS for better visualization */
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color: lightgrey;">
<col style="background-color: lightblue;">
<col style="background-color: lightgreen;">
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</body>
</html>
In this example:
- The
<colgroup>element groups the three<col>elements. - Each
<col>element has a different background color applied.
Advanced Example
You can also use the span attribute in the <col> element to apply styles to multiple columns:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Advanced Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color: lightgrey;">
<col style="background-color: lightblue;" span="2">
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
</tbody>
</table>
</body>
</html>
In this advanced example:
- The first
<col>element styles the first column. - The second
<col>element withspan="2"applies styles to the next two columns.
Using <colgroup> and <col> can make table styling more efficient and organized, especially for tables with many columns.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.