Таблицы давно получили плохую репутацию в веб-дизайне . Много лет назад HTML-таблицы использовались для разметки, что явно не было тем, для чего они были предназначены. По мере того как CSS стал широко использоваться для макетов веб-сайтов, появилась идея, что « таблицы плохие ». К сожалению, многие неправильно поняли, что таблицы HTML все время плохие. Это совсем не так. Реальность такова, что HTML-таблицы плохие, когда они используются для чего-то другого, кроме их истинного назначения, а именно для отображения табличных данных (электронных таблиц, календарей и т. Д.). Если вы создаете веб-сайт и у вас есть страница с такими табличными данными, не стесняйтесь использовать таблицу HTML на своей странице.
Что делают <td> и <th>?
Тег <td> или тег «данные таблицы» создает ячейки таблицы в строке таблицы в таблице HTML. Это тег HTML, который содержит любой текст и изображения. По сути, это рабочая лошадка вашего стола. Теги будут содержать содержимое таблицы HTML.
Тег <th> или «заголовок таблицы» во многом похож на тег <td>. Он может содержать информацию такого же типа (хотя вы бы не поместили изображение в <th>), но он определяет эту конкретную ячейку как заголовок таблицы.
Большинство веб-браузеров изменяют вес шрифта на жирный и центрируют содержимое в ячейке. Конечно, вы можете использовать стили CSS, чтобы заголовки таблиц, а также содержимое ваших тегов выглядели так, как вы хотите, чтобы они выглядели на отображаемой веб-странице.
Когда следует использовать <th> вместо <td>?
Тег <th> следует использовать, если вы хотите назначить содержимое в ячейке в качестве заголовка для этого столбца или строки. Ячейки заголовков таблицы обычно находятся в верхней части таблицы или вдоль стороны — в основном это заголовки вверху столбцов или заголовки слева или в начале строки. Эти заголовки используются для определения содержимого ниже или ниже, что значительно упрощает просмотр и обработку таблицы и ее содержимого.
Не используйте <th> для оформления ваших ячеек. Поскольку браузеры склонны по-разному отображать ячейки заголовка таблицы, некоторые ленивые веб-дизайнеры могут попытаться воспользоваться этим и использовать тег, когда хотят, чтобы содержимое было жирным и центрированным . Это плохо по нескольким причинам:
- Вы не можете полагаться на веб-браузеры, всегда отображающие контент таким образом. Будущие браузеры могут изменить цвет по умолчанию или вообще не вносить никаких визуальных изменений в содержимое <th>. Вы никогда не должны полагаться исключительно на стили браузера по умолчанию и никогда не должны использовать элемент HTML из-за того, как он «выглядит» по умолчанию.
- Это семантически неверно. Пользовательские агенты, которые читают текст, могут добавить слышимое форматирование, такое как «заголовок строки: ваш текст», чтобы указать, что оно находится в ячейке <th>. Кроме того, некоторые веб-приложения печатают заголовки таблиц в верхней части каждой страницы, что может привести к проблемам, если ячейка на самом деле не является заголовком, а вместо этого используется только по стилистическим соображениям. Итог — использование тегов таким способом может вызвать проблемы с доступностью для многих пользователей, особенно для тех, кто использует вспомогательные устройства для доступа к контенту вашего сайта.
- Вы должны использовать CSS, чтобы определить, как выглядят ячейки. Разделение стиля (CSS) и структуры (HTML) уже много лет является наилучшей практикой в веб-дизайне. Еще раз, используйте a, потому что содержимое этой ячейки является заголовком, а не потому, что вам нравится то, как браузер, вероятно, отображает это содержимое по умолчанию.