Divide Html Table Rows Into Labelled Sections

September 16, 2024 Post a Comment

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 or caption at the

Solution 1:

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><tbodyid="section1"><tr><th>Apples</th><td>98 ui</td><td>8.4 mg</td></tr></tbody><tbodyid="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>

Solution 2:

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

Solution 3:

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><tbodyid="section1"><trclass="grouplabel"><thcolspan="3">Local</th></tr><tr><th>Apples</th><td>98 ui</td><td>8.4 mg</td></tr></tbody><tbodyid="section2"><trclass="grouplabel"><thcolspan="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>

Solution 4:

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

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

Solution 5:

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><tdcolspan = "100%">...</td></tr>

Build Html5