HTML <colgroup>
query_builder | Christopher PisaniThe HTML <colgroup> element states columns in a group within a table. This makes it possible to style the selected group using CSS.
The only attribute, that the element colgroup is supporting in HTML5 is the span. This attribute sets how many cells to be used by the column.
<style>
.batman {
background-color: #d7d9f2;
}
.flash {
background-color: #ffe8d4;
}
caption {
padding: 8px;
caption-side: bottom;
}
table {
border-collapse: collapse;
border: 2px solid rgb(100, 100, 100);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .7rem;
}
td,
th {
border: 1px solid rgb(100, 100, 100);
padding: 10px 10px;
}
td {
text-align: center;
}
</style>
<table>
<caption>Superheros and sidekicks</caption>
<colgroup>
<col>
<col span="2" class="batman">
<col span="2" class="flash">
</colgroup>
<tr>
<td> </td>
<th scope="col">Batman</th>
<th scope="col">Robin</th>
<th scope="col">The Flash</th>
<th scope="col">Kid Flash</th>
</tr>
<tr>
<th scope="row">Skill</th>
<td>Smarts</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</table>
Available Attributes
| Attribute | Values | Functionality |
|---|---|---|
| span | positive integer value | sets how many cells to be used by the column |