Как лучше всего представить пустой TH в HTML5?

Question

Скажем, у меня есть данная таблица:

       +------+------+------+
       | Col1 | Col2 | Col3 |
+------+------+------+------+
| Row1 | D1.1 | D1.2 | D1.3 |
+------+------+------+------+
| Row2 | D2.1 | D2.2 | D2.3 |
+------+------+------+------+
| Row3 | D3.1 | D3.2 | D3.3 |
+------+------+------+------+

И я хочу представлять его в HTML5. Сложно то, что подобные таблицы должны быть семантически важными, но верхняя левая ячейка-это нет Семантически важно, но вместо этого проставка для выстроения более важных заголовков столбцов. Как лучше всего это сделать? Моя первая идея - сделать это так:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row1</th>
            <td>D1.1</td>
            <td>D1.2</td>
            <td>D1.3</td>
        </tr>
        <tr>
            <th>Row2</th>
            <td>D2.1</td>
            <td>D2.2</td>
            <td>D2.3</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>D3.1</td>
            <td>D3.2</td>
            <td>D3.3</td>
        </tr>
    </tbody>
</table>

Хотя, положить <th></th> Там чувствует себя неправильно, как использование <p>&nbsp;</p> для расстояния. Есть лучший способ сделать это?

Answer 1

Вполне приемлемо иметь пустые <th> Элемент, выступая с точки зрения обоснованности или семантики. Ничто в спецификации не запрещает это; На самом деле, он содержит хотя бы один пример Это использует пустой <th> Для этой цели:

Следующее показывает, как можно было бы отметить таблицу валовой маржи на странице 46 Apple, INC 10-K Заявки за финансовый год 2008:

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
 <!-- snip -->
</table>

Answer 2

Для обсуждения семантики и пустых элементов стола я хотел бы ссылаться к этому вопросу на Stackoverflow

Стиль «пустых» ячеек (например, фон или границы) иногда может зависеть от отсутствия/присутствия «содержания», поэтому люди часто ставят   внутри. Есть специальная тег CSS для стиля пустых ячеек, которые вы можете прочитать об этом Здесь, на MDN.

table {
    empty-cells: hide;
}

Здесь вы можете найти другую статью С хорошей справочной информацией по этой теме.

Answer 3

Любой лучший способ использования пустых <th></th>:

Точный код:

<tr>
 <th></th>
 <th colspan="6"></th>
</tr>