В чём разница между HTML-тегами и ?

Много лет назад тег td использовался для вёрстки веб-сайтов, что не будет его прямым назначением. А с ростом популярности CSS идея «таблицы — это плохо» укоренилась в мозгах многих разработчиков. Но это совсем не так — таблицы плохи только тогда, когда их используют не по назначению. То есть не для выведения табличных данных: электронных таблиц, календарей, и т.д. Если вам надо вставить на страницу подобные данные, не следует сомневаться — смело используйте HTML-таблицы.

Те, кто начал заниматься веб-разработкой после того, как табличная вёрстка впала «в немилость», могут не знать всех элементов, используемых в HTML-таблицах. Один из распространённых вопросов от них звучит так: «В чём разница между табличными тегами <th> и <td>?».

Что такое тег <TD>?

HTML тег td расшифровывается как table data(«табличные данные»). Он создаёт ячейки в определённом ряду таблицы. Именно в этот тег надо вставлять текст и картинки.

Что такое тег <TH>?

Тег <th> расшифровывается как table header(«заголовок таблицы»). Он во многом похож на <td>. Он принимает такой же тип содержимого(хотя изображение в <th> лучше не вставлять), но обозначает одну ячейку как заглавную.

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

Когда следует использовать <TH>, а не <TD>?

Тэг <th>(а не теги tr и td) используется для установки содержимого ячейки заголовком определённой колонки или ряда.

Заголовки таблицы обычно расположены по верхнему или левому краю таблицы — в верхнем ряду как заголовки колонки или в первой колонке слева как заголовки ряда. Ячейки-заголовки показывают, что за содержимое расположено в таблице рядом или под ними, облегчая восприятие таблицы.

Не используйте <th> для оформления ячеек. Так как браузеры обычно меняют внешний вид ячеек-заголовков, некоторые веб-дизайнеры пользуются данной особенностью для выделения и центровки шрифта. Так не следует делать сразу же по нескольким причинам:

  1. Нельзя полагаться на то, что все браузеры будут выводить содержимое одинаково. Будущая версия браузера может поменять цвет, используемый по умолчанию или вообще перестать выделять содержимое тега <th>. Так что никогда не следует полагаться на встроенные стили браузеров и использовать данный HTML-элемент;
  2. Это семантически неправильно. Некоторые пользовательские агенты могут читать голосом содержимое таблиц и добавлять «заголовок таблицы: текст» при встрече с ячейкой <th>. Кроме этого некоторые веб-приложения могут размещать заголовки по верхней кромке страницы. Это станет проблемой, если ячейка не будет заголовком, а используется исключительно для оформления.

Использование неподходящих тегов может ограничить доступность контента для многих посетителей. Особенно для тех, кто использует разные вспомогательные устройства.

Для оформления ячеек следует применять CSS. Разделение стиля(CSS) и структуры(HTML тег td) — общепринятый способ веб-дизайна много лет. Повторим ещё раз: используйте <th> потому, что содержимое ячейки — заголовок, а не потому, что вам нравится, как это по умолчанию выводит браузер.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *