Как сделать несколько групп данных внутри table html?

216

12 апреля 2022, 10:20

Мне нужно сверстать семантически правильно таблицу. В ней внутри есть основной заголовок (это thead) и несколько групп данных.

Как-то группируют данные внутри таблицы (чем выделить несколько tr)?
Как реализовать подзаголовок для группы данных внутри таблицы? (для заголовка уже использую thead)

Так?:

<tr>
  <th>Ячейка подзаголовка 1</th>
  <th>Ячейка подзаголовка 2</th>
  <th>Ячейка подзаголовка 3</th>
</tr>
<tr>
  <td>Обычная ячейка</td>
  <td>Обычная ячейка</td>
  <td>Обычная ячейка</td>
</tr>
<tr>
  <td>Обычная ячейка</td>
  <td>Обычная ячейка</td>
  <td>Обычная ячейка</td>
</tr>

Может вариант вкладывать мини-таблицу внутрь основной таблицы? (в этом примере внутри таблицы есть свои таблицы, и валидатор не ругается, но внешний вид мне нужен как беспрерывная таблица с потоком строк). Я не уверен, что смогу стилизовать такое дерево таблиц так, чтобы оно выглядело как одна таблица без внутренних отступов (+ не смогу хорошо связать между собой ширины ячеек внешней и внутренней таблицы).

Видел еще, как это реализовал microsoft у себя на сайте. Но у них просто идет поток tr, семантически группы не выделены и aria атрибутов нет.

Answer 1

Можно группировать строки с помощью тега <tbody> и обрабатывать нажатие на первую строку каждого такого элемента:

document.querySelector('.table').addEventListener('click', function(ev) {
  let oTarget = ev.target.closest('tr');
  if (oTarget.parentNode.firstElementChild == oTarget) {
    oTarget.classList.toggle('show');
  }
});

th {
  box-shadow: inset 0 0 10px #a00;
}
tbody tr:first-of-type td {
  cursor: pointer;
  box-shadow: inset 0 0 5px #080;
}
tbody tr:not(:first-of-type) {
  display: none;
}
tbody tr.show~tr {
  display: table-row;
}

<table class="table">
  <thead>
    <tr>
      <th>Ячейка заголовка 1</th>
      <th>Ячейка заголовка 2</th>
      <th>Ячейка заголовка 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка подзаголовка 1</td>
      <td>Ячейка подзаголовка 2</td>
      <td>Ячейка подзаголовка 3</td>
    </tr>
    <tr>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
    </tr>
    <tr>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Ячейка подзаголовка 1</td>
      <td>Ячейка подзаголовка 2</td>
      <td>Ячейка подзаголовка 3</td>
    </tr>
    <tr>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
    </tr>
    <tr>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
      <td>Обычная ячейка</td>
    </tr>
  </tbody>
</table>