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

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

       +------+------+------+
       | 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> на расстояние. есть ли лучший способ сделать это?

7
html5 semantic-markup

4 ответов

вполне приемлемо иметь пустой <th> элемент, говоря с точки зрения либо действительности, либо семантики. Ничего в spec запрещает; на самом деле, он содержит по крайней мере один пример это использует пустой <th> С той же целью:

ниже показано, как можно пометить таблицу валовой маржи на странице 46 в 10-K-й подаче Apple, Inc за 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
 <!-- omitted for brevity -->
</table>
4

нет ничего плохого в пустой элемент. Это не неправильный синтаксис, и это не плохая практика; было бы намного лучше использовать пустой элемент в этом случае, а не использовать другие хаки для достижения такого макета.

помимо этого, есть даже :empty селектор.

этот селектор сам по себе доказывает, что в пустом элементе нет ничего неправильного.

The: пустой псевдокласс представляет собой элемент, у которого вообще нет дочерних элементов. С точки зрения дерева документов, только узлы элементов и узлы содержимого (такие как текстовые узлы DOM [DOM-LEVEL-3-CORE], узлы CDATA и ссылки на сущности), данные которых имеют ненулевую длину, должны рассматриваться как влияющие на пустоту; комментарии, инструкции по обработке и другие узлы не должны влиять на то, считается ли элемент пустым или нет.

консорциума W3C http://www.w3.org/TR/css3-selectors/#empty-pseudo

2

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

стиль "пустых" ячеек (например, фона или границ) иногда может зависеть от отсутствия/наличия "контента", поэтому люди часто ставят &nbsp; внутри. Существует специальный тег CSS для укладки пустых ячеек, о котором вы можете прочитать здесь на MDN.

table {
    empty-cells: hide;
}

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

2

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

точный код:

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