Как решить, когда использовать <th>, а когда нет? в <table>

Question

Как для этого кода

<table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

Answer 1

Использование <th> против <td> полностью семантическое. <th> для заголовков столбцов или строк, <td> для ячеек. Как правило, используйте <th>, если в столбце или строке есть одна ячейка, которая группирует или помечает строку / столбец других ячеек.

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

  <tr>
    <th width="60%">Presentation October 2009</th>
    <td width="20%">Download pdf</td>
    <td width="20%">Download ppt</td>
  </tr>

Answer 2

для заголовков таблицы.

Если вы хотите, чтобы октябрь 2009 года был заголовком таблицы, то HTML-код будет:

<table id="presentationsContainer">
  <tr>
    <th class="main" width="60%">Presentation October 2009</th>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <th class="main" width="60%">Presentation October 2009</th>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <th class="main" width="60%">Presentation October 2009</th>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

Вы также можете убрать теги class и width, чтобы сохранить простоту HTML, применить стили к таблице и использовать селекторы CSS для выполнения стилей, например:

#presentationsContainer table tr th {
    width: 60%;
}

#presentationsContainer table tr td {
    width: 20%;
}

Answer 3

тег заголовка таблицы должен использоваться, когда вы говорите о данных заголовка.Если в вашей таблице есть строка, которая служит объяснением содержимого в остальных строках, вы должны указать эту строку с помощью th.Кажется, что ваш код, вероятно, не требует, потому что вся информация уже находится в таблице.Что-то вроде этого было бы подходящим использованием th.

<table id="presentationsContainer">
  <tr>
    <th>Presentation</th>
    <th>PDF</th>
    <th>PPT</th>
  </tr>
  <tr>
    <td class="main" width="60%">October 2009</td>
    <td class="dl" width="20%">Download</td>
    <td class="dl" width="20%">Download</td>
  </tr>
  <tr>
    <td class="main" width="60%">October 2009</td>
    <td class="dl" width="20%">Download</td>
    <td class="dl" width="20%">Download</td>
  </tr>
  <tr>
    <td class="main" width="60%">October 2009</td>
    <td class="dl" width="20%">Download</td>
    <td class="dl" width="20%">Download</td>
  </tr>
</table>

Извините, если я неправильно понял вопрос.Там не так много объяснений

Answer 4

Еще раз, это хороший пример контента против стиля. Семантически, <th> должен использоваться для заголовков столбцов таблицы, в то время как простые теги <td> должны использоваться для ячеек таблицы, которые не являются заголовками таблицы.

По этой же причине вы обычно просто находите одну строку <th> тегов в таблице по сравнению с несколькими <td> тегами.

В вашем примере теги <th> просто бесполезны, так как у вас нет строки, которая служит строкой заголовка, поэтому ваш код будет хорошим.