Regrettably, the simplicity of the HTML table model does not allow for the inclusion of headers for row groups, which is necessary for list items to be properly categorized. To work around this limitation, we create row groups using the tbody element and designate the first row in each group as a header. This row will contain the header within a cell that spans all columns.
The example below demonstrates a simple styling technique and presents one way of creating row group headers with controls that enable the display of data rows within the group to be toggled on and off. This serves as a demonstration that such functionality can be achieved without resorting to mixing list markup with table markup (or using list markup at all).
function toggleData(el) {
el.parentNode.parentNode.className =
el.parentNode.parentNode.className ? '' : 'hide';
}
tbody > tr:first-child > td:before {
content: '\2022';
padding-right: 0.25em;
}
tbody.hide > tr:not(:first-child) {
display: none;
}
<table border cellspacing=0>
<thead>
<tr><th>header1 <th>header2 <th>header3
</thead>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 1
<tr><td>value111 <td>value112 <td>value113
<tr><td>value121 <td>valueb122 <td>valueb123
</tbody>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 2
<tr><td>value211 <td>value212 <td>value213
<tr><td>value221 <td>valueb222 <td>valueb223
</tbody>
</tabe>