Это лучшее семантическое решение?
Не Действительно, в то время как действие вложения элемента A внутри другого элемента B может быть использовано для указания того, что A является дочерним элементом B, это не то, что вы здесь делаете: вы вставляете таблицу в совершенно другую строку, поэтому нет никакого отношения отношения между родителем и ребенком между A и B.
Создав ячейку, которая охватывает все столбцы в таблице, а затем построит другую таблицу внутри нее с таким же количеством столбцов, вы также эффективно говорите «это некоторые другие столбцы, которые не относятся к тем во внешней таблице ".
Вы можете увидеть предполагаемую (нехватка) отношения между столбцами путем добавления границы к клеткам в вашем примере выше:
Очевидно, что вы можете исправить это с помощью CSS, но без стилей рендеринга фрагмента HTML часто является хорошим руководством к его семантике.
Является ли другой подход более подходящим? Если да, то какой из них рекомендуется?
Нет стандартного способа представления иерархических связей между строками таблицы в HTML. Списывание из an answer I gave to a similar question, хотя, вы можете сделать это с дополнительными классами, идентификаторами и data- атрибуты:
<table>
<thead>
<tr>
<th>ITEM</th>
<th>ATTRIBUTE 1</th>
<th>ATTRIBUTE 2</th>
</tr>
</thead>
<tbody>
<tr id=100>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
<tr id=110 data-parent=100 class=level-1>
<td>sub</td>
<td>value</td>
<td>value</td>
</tr>
<tr id=200>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
Отношения родитель-ребенок не будет виден в без стилей рендеринга (нет другого пути, вы могли бы сделать это так, без добавления дополнительного контента, насколько я могу судить), но есть достаточно крючки, чтобы добавить CSS необходимый:
.level-1 > td:first-child {
padding-left: 1em;
}
... что приводит к следующим образом:
С помощью небольшого javascript вы также можете использовать атрибуты id и data-parent, чтобы установить настройки таким образом, чтобы, например, зависание над строкой вызывает выделение родителя.
Является ли заголовок таблицы ответственным за обе таблицы, или мне нужно создать новый?
В предлагаемом решении, создающем единую ячейку, которая охватывает все столбцы, а затем построение другой таблицы внутри нее означает, что между ячейками заголовка и ячейками вашей «дочерней» строки нет никакой подразумеваемой взаимосвязи. Очевидно, что мое предложенное решение выше не имеет этой проблемы.
Да, наконец, 75 репутации, чтобы начать так называемую щедрость. О, и я потерял возможность прокомментировать всюду. Гектометр – lampshade
Я бы избегал вложенных таблиц, он вставляет новую ячейку в ячейку, которая не является тем, что вам нужно. Если у вас только 1 уровень отношений, почему бы не оставить таблицу плоской и использовать css для определения элемента vs subitem. '
@kalhartt Да, но это не отражает семантическое значение подэлемента или не так ли? Я тоже об этом думал, но это будет только визуально. – lampshade