Divide HTML table rows into labelled sections

Question

Is there a valid way to divide a table\'s rows into sections, with a label identifying that section?

For example, something like the code below, but with a header o

Answer 1

Generally people use an extra row and use colspan to span across all the columns.

In your case: <tr><td colspan = "7">...</td></tr>

Answer 2

My preferred way of doing something like that is to use a <TH> that spans (colspan) across a full row.

Answer 3

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>

Answer 4

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>

Answer 5

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>