§ 29. Таблицы

Определения и обозначения

HTML-таблица — элемент веб-страницы для представления данных в строках и столбцах. Она полезна, когда значения нужно сравнивать по общим признакам: например, предметы — по оценкам и датам. Если текст не образует такой сетки, его лучше записать обычным текстом или списком: таблица усложнит восприятие и разметку.

Строка таблицы — горизонтальная группа ячеек, которую задаёт тег <tr>. Внутри неё располагают значения, относящиеся к одной записи, например название дня и уроки. Строка помогает браузеру понять, какие ячейки принадлежат одной горизонтальной части таблицы.

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

Объединение ячеек — приём, при котором одна ячейка занимает несколько мест в табличной сетке. Атрибут colspan задаёт ширину в столбцах, а rowspan — высоту в строках. Это нужно, например, когда один урок длится в двух временных промежутках или название дня относится сразу к нескольким строкам расписания.

Как это устроено

Таблицу создают парными тегами <table> и </table>: они обозначают её начало и конец. Внутри размещают строки <tr>, а в каждой строке — ячейки <th> или <td>. Такое вложение отражает саму структуру данных: таблица состоит из строк, а строки — из ячеек.

Браузер определяет структуру по тому, какие элементы находятся друг внутри друга. Поэтому ячейки нужно закрывать прежде, чем закрывать содержащую их строку, а строку — прежде, чем закрывать таблицу. Если перепутать порядок или пропустить закрывающий тег, браузер попробует исправить разметку сам, но результат может отличаться от задуманного.

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

Без объединений каждая ячейка занимает ровно одно место в сетке. Атрибут colspan меняет ширину ячейки, а rowspan — её высоту; значение атрибута указывает, сколько столбцов или строк она охватывает. Например, colspan="2" означает, что одна ячейка займёт места двух соседних столбцов, поэтому отдельную ячейку для второго места в этой строке добавлять нельзя.

Чтобы проверить готовый код, проследи каждую строку слева направо и посчитай занятые столбцы. Обычная ячейка занимает одно место, а ячейка с colspan — столько, сколько указано в атрибуте; rowspan занимает места в последующих строках. В итоге строки должны укладываться в задуманную сетку, даже если число тегов в них различается.

Основные элементы HTML-таблицы

В таблице можно проследить путь от внешнего элемента к внутреннему: таблица содержит строки, а строки — заголовочные ячейки и ячейки с данными. В примерах угловые скобки записаны как &lt; и &gt;, чтобы браузер показал их как текст, а не воспринял как разметку. Для объединений проверяй не только число тегов, но и количество занимаемых ими позиций.

Разбор задач

Таблица из двух строк и двух столбцов

Условие: составить HTML-код таблицы из двух строк и двух столбцов с простыми данными. Сначала определим каркас: нужны две строки, а в каждой — по две ячейки. Поскольку в условии не требуется отдельная строка заголовков, используем <td> для всех четырёх значений.

1. Открой таблицу тегом <table>, чтобы обозначить общий контейнер.
2. Создай первую строку тегом <tr> и помести в неё две ячейки с данными.
3. Повтори строку и ячейки для второй пары значений, затем закрой таблицу.

Ответ: <table><tr><td>Имя</td><td>Аня</td></tr><tr><td>Город</td><td>Омск</td></tr></table>. В каждой строке ровно две ячейки, поэтому получается прямоугольная сетка из двух строк и двух столбцов.

Заголовочная строка и три столбца

Условие: создать таблицу с заголовками «Предмет», «Оценка», «Дата» и заполнить её значениями. Выделим верхнюю строку тегами <th>, потому что она объясняет смысл столбцов. Для записи с конкретной оценкой используем обычные ячейки <td>.

1. Открой <table> и добавь строку заголовков с тремя ячейками <th>.
2. Создай следующую строку из трёх ячеек <td> с названием предмета, оценкой и датой.
3. Сравни строки: каждая должна занимать по три столбца.

Ответ: <table><tr><th>Предмет</th><th>Оценка</th><th>Дата</th></tr><tr><td>Информатика</td><td>5</td><td>12.03</td></tr></table>. Порядок значений в строке данных совпадает с порядком заголовков, поэтому оценка и дата не перепутаются.

Объединения в расписании

Условие: построить таблицу расписания, где один урок занимает два соседних столбца, а название дня объединяет несколько строк. Пусть у каждого дня два временных столбца, а один урок продолжается оба периода. Тогда ячейка урока должна занять два столбца, а ячейка с днём — две строки.

1. В первой строке укажи день с rowspan="2", чтобы он продолжался и во второй строке.
2. Добавь заголовок урока с colspan="2": он займёт оба временных столбца, поэтому рядом в этой строке отдельные ячейки для них не нужны.
3. Во второй строке не повторяй ячейку дня: её место уже занято rowspan. Проверь, что суммарно строки покрывают нужную ширину таблицы.

Ответ: <table><tr><th rowspan="2">Понедельник</th><td colspan="2">Математика</td></tr><tr><td>Перемена</td><td>История</td></tr></table>. В первой строке ячейка дня занимает один столбец, а урок — два; во второй строке первый столбец всё ещё занят названием дня, а оставшиеся два — обычными ячейками.

Типичные ошибки

Ошибка: помещать <td> или <th> прямо внутрь <table>, пропуская <tr>. Так делают, когда воспринимают таблицу как простой список ячеек и не учитывают промежуточный уровень строк. Проверь вложенность: каждой ячейке должна предшествовать открытая строка, а после ячеек строка должна быть закрыта.

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

Ошибка: задать colspan или rowspan, не учитывая занимаемые ячейкой позиции. Тогда содержимое соседних строк может оказаться не под теми заголовками, потому что объединённая область уже заняла часть сетки. Проверь каждую строку, считая не только теги, но и столбцы, которые охватывает объединённая ячейка.

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

Связь с другими темами

Для чтения и создания таблиц нужны знания о назначении HTML-тегов, парных тегах и атрибутах, а также о правилах вложенности элементов. Таблицы применяют на веб-страницах с расписаниями, результатами и другими данными, которые удобно сопоставлять в строках и столбцах. Их внешний вид настраивают средствами CSS, а смысловые заголовки и корректная структура помогают сделать HTML-разметку доступнее.

Что запомнить

• Таблица создаётся тегами <table>.
• Строку задаёт тег <tr>.
• Заголовочную ячейку задаёт <th>, ячейку с данными — <td>.
• Ячейки располагаются внутри строки.
• colspan объединяет ячейки по столбцам.
• rowspan объединяет ячейки по строкам.