Divide HTML table rows into labelled sections
Use colspan and for some reason if you are not sure how many columns you need to merge/span (dynamically generated columns) then use:
<tr><td colspan = "100%">...</td></tr>
My preferred way of doing something like that is to use a <TH> that spans (colspan) across a full row.
HTML5 specification isn't saying there can be only one <TBODY> section. Your code is OK. One more example:
<table>
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>
<tbody id="section1">
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
</tbody>
<tbody id="section2">
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
</tbody>
</table>In response to Alexander Suraphel's question on Martin's answer, yes, the OP wanted to have an identifying label. Here's one way to, combining some of the aspects of several answers, to do that. (Note that I have supplied my own labels, as the OP didn't specify what labels they would have used.)
td {
border-left: 0;
border-top: 0;
border-bottom: 0;
border-right: 0;
}
table {
border: none;
border-collapse: collapse;
}
.grouplabel {
background: blue;
color: yellow;
border: 1px solid blue;
border-radius: 5px;
}<table>
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>
<tbody id="section1">
<tr class="grouplabel"><th colspan="3">Local</th></tr>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
</tbody>
<tbody id="section2">
<tr class="grouplabel"><th colspan="3">Imported</th></tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
</tbody>
</table>