§ 3. Оформление web-страницы с помощью таблиц

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

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

Тег <table> задаёт таблицу и служит внешней оболочкой для её содержимого. У него есть открывающая и закрывающая формы: <table> и </table>. Строки и ячейки записывают между ними, поэтому браузер понимает, какие элементы относятся к одной таблице. Если забыть закрывающий тег, границы таблицы могут определиться неверно.

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

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

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

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

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

Размеры таблицы и ячеек задают атрибутами width и height. Значение в пикселях означает фиксированную величину, поэтому размер не меняется вместе с шириной окна браузера. Процентное значение рассчитывается относительно доступного пространства, из-за чего таблица может подстраиваться под окно. Выбор зависит от задачи: фиксированный размер помогает контролировать макет, а процентный — использовать меняющееся пространство.

Атрибут border задаёт видимую границу таблицы или ячеек. Атрибут cellpadding отвечает за внутреннее расстояние между содержимым и краем ячейки, чтобы текст не прижимался к границе. Атрибут cellspacing задаёт промежуток между соседними ячейками, то есть расстояние снаружи каждой ячейки. Эти настройки решают разные задачи: граница очерчивает область, внутренний отступ добавляет свободное место внутри неё, а промежуток разделяет ячейки.

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

Элементы таблицы и их назначение при оформлении web-страницы

Чтобы найти нужную настройку, сначала определите, что именно требуется изменить: структуру, размер или внешний вид. Затем проверьте, к какому элементу относится тег или атрибут и какую задачу он решает. Например, для отступа внутри ячейки нужен cellpadding, а не cellspacing.

Разбор задач

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

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

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

Задача 2. Создайте макет из верхнего заголовка, левого меню и основного содержимого справа. Для такой страницы удобно взять две строки и два столбца: заголовок займёт верхний ряд целиком, а во втором ряду меню и текст окажутся рядом. Чтобы заголовок не разделялся на две области, ячейку заголовка нужно растянуть на оба столбца.

1. Нарисуйте сетку из двух строк и двух столбцов и обозначьте содержимое каждой области.
2. В первой строке создайте ячейку заголовка с атрибутом colspan, равным 2, чтобы она заняла два столбца.
3. Во второй строке добавьте две обычные ячейки: сначала для меню, затем для основного содержимого.

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

Задача 3. Доработайте макет: задайте ширину таблицы и областей, добавьте границы и отступы, оставив заголовок объединённым. Начать стоит не с размеров, а с проверки сетки: объединение уже изменило число занятых позиций в первой строке. Только после этого удобно подбирать ширину, границы и расстояния, чтобы оформление не скрывало структуру.

1. Проверьте число строк и столбцов, а также объединение заголовка через colspan.
2. Убедитесь, что первая строка содержит одну ячейку на два столбца, а вторая — две отдельные ячейки.
3. Задайте подходящие значения width и height, затем добавьте border, cellpadding и cellspacing для границ и расстояний.

Ответ: сначала проектируют и проверяют структуру, после этого задают размеры и оформление. Ширину областей можно распределить в соответствии с их назначением, а отступы и промежутки подобрать так, чтобы содержимое читалось. Каждая строка должна занимать предусмотренное число позиций с учётом объединённых ячеек.

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

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

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

Смешивать cellpadding и cellspacing нельзя: первый задаёт внутренний отступ содержимого, второй — промежуток между ячейками. Их путают, потому что обе настройки визуально добавляют свободное место. Чтобы проверить себя, посмотрите, где именно должен появиться пробел: между текстом и краем своей ячейки или между соседними ячейками. В первом случае нужен cellpadding, во втором — cellspacing.

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

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

Для работы с таблицами нужны основы HTML: понимание тегов, атрибутов и вложенных элементов. Эти знания позволяют создать простую web-страницу и затем добавить в неё таблицу. Если известна роль каждого тега, проще заметить ошибку в структуре.

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

Понимание разметки пригодится при дальнейшем изучении CSS — языка, который используют для оформления web-страниц. Таблица показывает, как содержимое можно распределять по областям, а CSS предлагает современные способы задавать внешний вид и положение блоков. Знание структуры HTML помогает не путать содержимое страницы с его оформлением.

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

• Таблица задаётся тегом <table>.
• Строки создаются тегом <tr>, ячейки — тегом <td>.
• Ячейки размещают внутри строк, а строки — внутри таблицы.
• Атрибуты размеров и оформления изменяют внешний вид таблицы и её ячеек.
• cellpadding задаёт внутренний отступ ячейки, а cellspacing — расстояние между ячейками.
• colspan и rowspan позволяют объединять ячейки по горизонтали и вертикали.
• Перед написанием кода полезно нарисовать схему строк и столбцов будущей страницы.