Границы таблиц в HTML

Голую таблицу можно читать; границы делают сетку очевидной с первого взгляда. Предыдущий урок закрепил структуру через table, tr, th и td. Эта сессия добавляет внешний вид: в современном HTML границы рисуют CSS, а не только устаревшим презентационным атрибутом border на <table>. Структура остаётся в HTML; линии, отступы и цвет принадлежат правилам стиля. Думайте о границах как об очках для сетки — они помогают глазам следить за ячейками, не меняя смысл данных.

Почему CSS вместо старого атрибута

Браузеры когда-то принимали <table border="1"> как быстрый учебный приём. Этот атрибут устарел для серьёзных современных страниц и почти не даёт контроля над цветом, толщиной или видимыми сторонами. CSS позволяет задавать ширину, стиль и цвет отдельно, делить одно правило между многими ячейками и сочетать границы с padding и border-collapse. Изучение границ через CSS также совпадает с тем, как вы позже стилизуете заголовки, списки и раскладку, поэтому учебные страницы остаются согласованными с реальными проектами.

Прямой ответ

Стилизуйте table, th и td свойством CSS border. Используйте border-collapse: collapse на таблице, чтобы соседние границы ячеек слились в одну чистую линию сетки вместо толстого двойного края. Помещайте правила в атрибут style для крошечных демо или — лучше для повторного использования — в блок <style> или таблицу стилей с классом. Держите разметку tr/th/td семантической; во внешний вид уходит только оформление. Если учебник всё ещё начинает только с border="1", считайте это музейной заметкой и переведите идею в CSS.

CSS-границы против устаревшей разметки

Границы на ячейках (inline-практика)

Inline-стили уместны, пока вы экспериментируете на одной маленькой таблице. Сначала collapse, затем дайте каждой заголовочной и обычной ячейке тонкую solid-границу и немного padding.

Чтение inline-примера

• border-collapse: collapse на table сливает соседние границы в одну сетку
• Каждый th/td задаёт border: 1px solid #333 для простой тёмной линии
• padding: 6px удерживает текст от касания границы
• Inline-стили повторяются на каждой ячейке — полезно для обучения, шумно для больших таблиц
• HTML-структура не изменилась относительно урока Tables; добавлено только оформление

Общий вид через блок style

Когда несколько ячеек должны совпадать, одно правило класса лучше копирования одной и той же inline-строки повсюду. Небольшой блок <style> в голове документа — ясный мост к внешним таблицам стилей.

Чтение примера общего стиля

• table.grid ограничивает правила, чтобы не каждая таблица на странице выглядела одинаково
• Одно правило стилизует и th, и td внутри .grid
• Изменение padding или цвета в одном месте обновляет всю сетку
• Вы по-прежнему пишете обычные строки tr/th/td — CSS никогда не заменяет эти элементы
• Последующие курсы CSS углубляют селекторы; здесь цель — чистый повторяемый рецепт границ

Collapse, отступы и читаемость

Без border-collapse: collapse многие браузеры показывают отдельные границы, похожие на двойные линии или выпуклую сетку. Collapse — обычный выбор новичка для таблиц данных, потому что читается как единая поверхность вроде электронной таблицы. Padding внутри ячеек важен не меньше самой линии: нулевой padding приклеивает текст к границе и утомляет при сканировании. Начните с 6px–8px и подстройте на глаз на учебной странице. Цвет необязателен — нейтральный серый или тёмный уголь достаточны для обучения; кричащие цвета отвлекают от чисел, которые вы сравниваете.

Структура остаётся; вид перемещается

Не удаляйте заголовки th, потому что существует CSS. Не кладите табличные отношения только в цветные блоки без настоящей табличной разметки. Границы — украшение и ясность поверх скелета из сессии Tables. Если данные не табличные, вернитесь к спискам — красивые линии не исправят неверный выбор элемента. Точно так же не оживляйте вложенные layout-таблицы только потому, что границы внезапно стали красивыми; области страницы по-прежнему принадлежат структуре и последующему CSS-layout.

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

1. Повторно используйте (или заново создайте) маленькую учебную таблицу из сессии Tables с настоящими ячейками th/td.
2. Добавьте границы через CSS — сначала inline-стили на каждой ячейке, чтобы видеть каждое свойство.
3. Включайте и выключайте border-collapse, сравнивая двойные линии с однолинейной сеткой.
4. Добавьте padding, чтобы текст удобно сидел в каждой ячейке; попробуйте 4px, затем 8px.
5. Рефакторьте в class плюс короткий блок <style>, как во втором примере.
6. Убедитесь, что заголовки по-прежнему th, а ячейки данных — td после стилизации.
7. Опционально: стилизуйте только .grid th чуть более сильной границей или фоном, чтобы подчеркнуть подписи — не меняя смысл HTML.

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

• Опираться только на устаревшие презентационные атрибуты вроде border="1" для серьёзных сайтов
• Оставлять границы без collapse и удивляться, почему линии кажутся толстыми или двойными
• Нулевой padding, так что текст касается границы
• Стилизовать CSS, но убирать семантические подписи th
• Применять глобальный td { border: ... }, который случайно перестилизует чужие таблицы
• Считать CSS границ поводом снова строить раскладку страницы вложенными таблицами

Итог

• Предпочитайте CSS border на th и td (и collapse на table)
• border-collapse: collapse очищает сетку до одиночных линий
• Padding улучшает читаемость внутри ячеек
• Структура остаётся в HTML; вид — в CSS
• Не опирайтесь на устаревший атрибут border для новой работы
• Рефакторьте повторяющиеся inline-границы в класс, когда таблица растёт