Таблицы в HTML

Когда у данных есть ясные строки и столбцы — расписания, табели очков, сравнение цен, схемы мест — используйте HTML-table, а не кучу пробелов или фальшивую сетку из списков. Списки учили множествам и последовательностям по одной главной оси. Таблицы учат двумерным данным: каждая ячейка стоит на пересечении строки и столбца с подписью, которую можно назвать. Если спросят «что в строке два, столбце Score?», честный ответ — таблица.

Для чего нужна таблица

Таблица выражает связи по сетке. Читатели смотрят вниз по столбцу или вдоль строки, чтобы быстро сравнить значения. Вспомогательные технологии могут озвучивать заголовки вместе с ячейками данных, когда вы помечаете заголовки через th, а не стилизуете обычный текст td жирным. Поэтому таблицы относятся к табличной информации — не к сборке баннера, сайдбара и подвала всего сайта вложенными тегами table, как делали старые уроки вёрстки. Когда контент действительно сетка сравнимых фактов, разметка таблицы оправдывает свою сложность.

Прямой ответ

• table — вся таблица
• tr — строка таблицы
• th — ячейка заголовка (подпись столбца или строки)
• td — ячейка данных
  Ставьте подписи заголовков в th, чтобы смысл был ясен людям и вспомогательным средствам. Держите число ячеек одинаковым по строкам, пока не изучите продвинутые атрибуты span вроде colspan. Используйте таблицы для сеток данных; для вёрстки страницы — CSS и семантические секции. Короткий caption (во втором демо) называет набор данных для всех, кто попадает на сетку.

Простая таблица данных

Начните с одной строки заголовков из ячеек th, затем строки данных из ячеек td. Эта форма покрывает многие учебные табло и листы сравнения.

Чтение простого примера

• table оборачивает всю сетку
• Каждый tr — одна горизонтальная строка
• Первая строка использует th для подписей столбцов («Name», «Score»)
• Следующие строки используют td для обычных значений
• Стиль браузера по умолчанию может показывать границы слабо или нет — позже будут уроки про границы; сначала структура
• Считайте ячейки в строке: обе строки данных имеют по две ячейки, как два заголовка

Caption и подписи строк

caption называет таблицу для всех. th в первом столбце может подписывать каждую строку, когда заголовки строк так же важны, как заголовки столбцов. Держите caption коротким и конкретным.

Чтение примера с caption

• В обычных схемах для новичков caption должен быть первым потомком внутри table
• Заголовки столбцов остаются в верхней строке как th
• Имена строк в первом столбце тоже могут быть th, чтобы «Ada» была подписью, а не просто ячейкой, похожей на число
• Остальные ячейки остаются td для реальных баллов
• Вы всё ещё не строите вёрстку страницы — вы описываете небольшой набор данных

Таблицы vs списки vs вёрстка

• Связанные пункты или шаги с одной главной осью → списки (ul / ol из прошлого урока)
• Значения, сравниваемые по строкам и столбцам → таблицы
• Области всей страницы (баннер, колонки, подвал) → семантическая структура + CSS позже, не гигантские вложенные таблицы-вёрстки
  Старые привычки «табличной вёрстки» ломают адаптивность на маленьких экранах и усложняют доступность. Если ловите себя на вложении таблиц только чтобы поставить логотип рядом с меню — остановитесь и дождитесь уроков по layout. Вопрос: «Я сравниваю ячейки в сетке или просто рисую коробки на странице?»

Привычки доступности для сеток

Предпочитайте настоящие заголовки th жирному тексту td, который лишь выглядит как заголовок. Ясный caption (или соседний заголовок) говорит, о чём сетка, до входа в неё. Держите число ячеек в строках согласованным, чтобы столбцы оставались честными при табуляции или свайпе. Продвинутые атрибуты вроде scope улучшают связь заголовков в сложных таблицах — сначала крепко освойте базовое разделение th/td, потом уточняйте. Никогда не полагайтесь только на цвет, чтобы пометить ячейки-подписи.

Практика в редакторе

1. Создайте table с двумя ячейками заголовка (th) в первой строке.
2. Добавьте три строки данных с совпадающим числом td.
3. Откройте в браузере и убедитесь, что сетка читается слева направо, сверху вниз как ожидаете.
4. По желанию добавьте caption и сделайте первый столбец подписями строк через th, как во втором примере.
5. Намеренно сломайте одну строку недостающей ячейкой, отметьте странную форму, затем исправьте.
6. Напишите одно предложение над таблицей или в caption о том, что измеряют данные.
7. Спросите одногруппника, какой столбец какой, используя только ваши заголовки — если ошибётся, переименуйте текст th.

Лёгкие ошибки

• Собирать целые сайты как гигантские вложенные таблицы (устаревшая привычка вёрстки)
• Использовать только td, когда ячейки на самом деле заголовки
• Несовпадающее число ячеек в строках
• Использовать таблицу там, где простой ul/ol лучше выразит одноосный список
• Оставлять таблицу без человекочитаемого заголовка (caption или heading)
• Копировать древние сниппеты «таблицы-вёрстки» в современные учебные страницы

Как это стыкуется со списками

Списки организуют одномерные наборы. Таблицы организуют сетки. Скоро вы стилизуете границы и отступы; этот урок закрепляет скелет: table, tr, th и td с честными заголовками. Держите данные табличными, вёрстку — в другом месте, и дальнейший CSS украсит структуру, которая уже имеет смысл.

Кратко

• Таблицы используют table + tr + th / td
• Для сеток табличных данных, не для современной вёрстки всей страницы
• Предпочитайте th для подписей заголовков (столбцы и, когда полезно, строки)
• caption помогает назвать набор данных
• Держите число ячеек согласованным по строкам
• Списки лучше подходят для простых наборов и шагов без второй оси