Загрузка...

Таблицы в CSS

HTML строит сетку строк и ячеек. CSS решает, будут ли границы чистыми, какой ширины сядет таблица, где окажется текст в ячейке и легко ли сканировать строки.

Набор CSS для таблиц

📊 Стили таблицы одним взглядом

Свойство Повседневная роль
border-collapse Слить границы ячеек (collapse) или держать раздельно (separate)
border-spacing Зазор между ячейками при раздельных границах
width Ширина таблицы (часто 100% в статье или карточке)
padding на th/td Воздух внутри ячеек
text-align / vertical-align Горизонтальное и вертикальное выравнивание в ячейке

Обычно стилизуют table, th, td и иногда tr — не каждую ячейку по отдельности — чтобы вся сетка данных оставалась единой.

Границы, которые не двоятся

Без помощи соседние границы могут выглядеть толстыми или двойными. border-collapse: collapse сливает их в одну чистую линию — повседневный выбор для таблиц данных.

Слитые границы таблицы

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

Раздельные границы и отступы

Если нужен видимый зазор между ячейками, используйте border-collapse: separate и задайте border-spacing. При collapse spacing игнорируется.

Раздельные ячейки с зазорами

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

Ширина, заголовки и выравнивание

Таблица на всю ширину часто читается лучше в статьях. Выделите заголовки, выровняйте текст и используйте vertical-align, когда высоты ячеек различаются.

Выравнивание заголовка и ячейки

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

Зебра-строки и спокойный hover

Чередующиеся фоны помогают следить за широкими таблицами. Лёгкий :hover на tr подсвечивает активную строку без неонового шума.

Зебра + hover строки

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

Спокойная привычка для таблицы данных

Сливайте границы, давайте ячейкам настоящий padding, держите контраст заголовков скромным и добавляйте зебру или hover только когда широкой таблице нужна помощь в сканировании.

Читаемая таблица статьи

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

Попробуйте сами

  1. Поставьте border-collapse: collapse и лёгкую границу на th/td.
  2. Добавьте удобный padding внутри ячеек.
  3. Выровняйте заголовки влево; попробуйте vertical-align: top на многострочных ячейках.
  4. Полоса́йте чётные строки через tr:nth-child(even).
  5. Добавьте мягкий фон tr:hover — затем сравните со второй таблицей и border-spacing.

Частые ошибки

  • Оставлять раздельные границы по умолчанию, чтобы линии выглядели двойными и грязными
  • Задавать border-spacing при border-collapse: collapse (игнорируется)
  • Крошечный padding, из‑за которого плотные данные трудно читать
  • Неоновый hover или тяжёлая зебра, которая спорит с контентом
  • Смешивать этот урок с маркерами list-style (прошлый урок)

Кратко

  • border-collapse: collapse — спокойный default для таблиц данных
  • separate + border-spacing для зазоров между ячейками
  • Ширина, padding и выравнивание формируют читаемость
  • Зебра и лёгкий hover помогают сканировать
  • Структура в HTML; внешний вид в CSS

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

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

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

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

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

📝 Инструкции

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