Загрузка...

Размеры таблиц в HTML

Таблицы могут растягиваться по колонке контента или оставаться компактными, как карточка цен. После урока о границах, где рисовали линии сетки, этот урок задаёт размер коробки: используйте CSS (width, max-width, padding, опциональные ширины столбцов), чтобы таблица подходила и к данным, и к экрану. Оформление остаётся в CSS; table / tr / th / td по-прежнему несут смысл. Если границы сделали сетку видимой, размер делает её удобной.

Что значит «размер» для таблицы

Размер — не одно число. У всей таблицы есть ширина относительно родителя. Ячейкам нужен padding, чтобы текст дышал. Столбцы могут делить место поровну или отдавать больше колонке подписей. На телефоне таблица с 1200px заставляет неудобно скроллить по горизонтали даже при двух коротких столбцах. Гибкие рецепты — часто width: 100% с разумным max-width — держат простые сетки читаемыми, не подменяя честную структуру th/td.

Прямой ответ

Задайте width на table (например 100%) и при необходимости ограничьте max-width (например 480px или 640px). Подскажите ширину столбца на th/td, когда одной колонке нужно больше места. Предпочитайте проценты и max-width огромным фиксированным пиксельным ширинам, которые переполняют телефоны. Сохраняйте border-collapse и padding из урока о границах, чтобы размер и линии работали вместе. Ограничивайте правила классом, чтобы одно демо не меняло все таблицы на странице.

Гибкая ширина с подсказкой столбца

Частый шаблон новичка: таблица заполняет родителя до максимума, границы остаются collapsed, а первый столбец получает большую долю для подписей.

Flexible table width

html
HTML Code 
<style>
table.prices { width: 100%; max-width: 480px; border-collapse: collapse; }
table.prices th, table.prices td { padding: 8px; border: 1px solid #555; }
table.prices th:first-child, table.prices td:first-child { width: 60%; }
</style>
<table class="prices">
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>0</td></tr>
<tr><td>Pro</td><td>9</td></tr>
</table>

Чтение гибкого примера

  • width: 100% позволяет таблице использовать доступную ширину контента
  • max-width: 480px не даёт ей стать гигантской полосой на широких мониторах
  • border-collapse: collapse не даёт размеру и границам конфликтовать
  • padding: 8px даёт каждой ячейке читаемое внутреннее пространство
  • :first-child { width: 60%; } намекает, что столбец названия плана шире столбца цены
  • Область действия класса (.prices) не даёт случайно изменить все таблицы

Компактная таблица с max-width

Иногда нужна маленькая карточка сравнения, которая никогда не тянется на всю ширину. Меньший max-width (и всё ещё width: 100% внутри потолка) держит сетку аккуратной на десктопе и мобильном.

Compact max-width table

html
HTML Code 
<style>
table.compact {
width: 100%;
max-width: 320px;
border-collapse: collapse;
}
table.compact th, table.compact td {
padding: 6px 10px;
border: 1px solid #444;
text-align: left;
}
</style>
<table class="compact">
<tr><th>Item</th><th>Stock</th></tr>
<tr><td>USB cable</td><td>14</td></tr>
<tr><td>Notebook</td><td>3</td></tr>
</table>

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

  • Та же гибкая идея, более тугой max-width для карточного следа
  • Горизонтальный padding (6px 10px) может отличаться от вертикального для комфорта
  • text-align: left — опциональное оформление, полезно когда числа и слова делят маленькую сетку
  • По-прежнему без вложенных layout-таблиц; вы лишь задаёте размер настоящей таблицы данных
  • Уменьшите окно браузера: таблица должна сжиматься с колонкой до пределов контента, а не навязывать огромный скролл по умолчанию

Фиксированные пиксели против гибких привычек

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

Padding, столбцы и collapse вместе

Работа с размером стоит рядом с уроком о границах. Без padding плотные ячейки кажутся тесными даже при идеальной внешней ширине. Без collapse эксперименты с шириной могут выглядеть толще или неровно, потому что отдельные границы съедают место. Опциональные подсказки столбцов (width на ячейках :first-child или на конкретном th) направляют браузер, когда подписям нужно больше места, чем значениям. Не используйте CSS размера как предлог убрать заголовки th или перестроить страницу вложенными layout-таблицами — этот конфликт уже решён в сессии Tables.

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

  1. Дайте учебной таблице width: 100% и max-width (попробуйте 480px).
  2. Добавьте padding к th/td (переиспользуйте стили границ, если они ещё есть).
  3. Измените размер окна — убедитесь, что простая таблица из двух столбцов не заставляет бесконечно скроллить по горизонтали.
  4. По желанию сделайте первый столбец шире через :first-child или class.
  5. Дублируйте таблицу с более тугим max-width вроде 320px и сравните след.
  6. Временно задайте width: 1200px, отметьте боль на мобильном, затем уберите.
  7. Переключайте border-collapse при заданных ширинах и смотрите, как меняется ощущение внешнего размера.
  8. Напишите под таблицей одно предложение: выбранный max-width и почему.

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

  • Фиксированные таблицы width: 1200px, ломающие маленькие экраны
  • Нет padding — плотные, плохо читаемые ячейки
  • Борьба границ и ширин без border-collapse
  • Глобальный table { width: ... }, меняющий каждое демо на странице
  • Ожидание, что подсказки width столбца перебьют крайне длинные неразрывные строки
  • Использование размера таблицы, чтобы снова имитировать колонки полностраничного layout
  • Забытый max-width, из‑за чего один width: 100% растягивает крошечную таблицу из трёх ячеек на ultrawide

Итог

  • Задавайте размер таблиц через CSS width и max-width
  • Используйте padding для читаемых ячеек
  • Предпочитайте гибкие макеты на маленьких экранах
  • Подсказки ширины столбцов опциональны и по возможности ограничены классами
  • Держите границы collapsed, чтобы размер и линии сотрудничали
  • Структура остаётся в HTML; размеры — в CSS
  • Следующие уроки про заголовки строятся на сетке, уже удобно вписывающейся во viewport

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
6
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Html Урок