Применение CSS вместо cellpadding и cellspacing в HTML

Быстрый ответ

Для задания отступов вокруг содержимого ячейки используйте свойство padding применительно к td, th:

td, th { padding: 10px;} /* Ваш пространственный буфер! */

Установите расстояние между ячейками, применяя border-spacing к тегу table:

table { border-spacing: 10px; }  /* Закон сохранения пространства для ячеек! */

Скрепите границы ячеек, использовав border-collapse: collapse;:

table { border-collapse: collapse; } /* Ячейки, общающиеся через общие стены. */

Боксовая модель: основа стилизации таблиц

Стилизация таблиц в CSS организована на основе боксовой модели (box model). Рассмотрим, как HTML-атрибуты cellpadding и border-spacing переводятся на CSS-свойства боксовой модели.

Свойство cellpadding в CSS: Padding

Свойство Padding в CSS выполняет функцию cellpadding из HTML. Padding задает внутренний отступ от содержимого ячейки до её границы. Другими словами, он играет роль подушки для содержимого ячейки:

table td, table th { padding: 10px; } /* Уютная подушка на подоконнике для ячеек */

Подробнее об этом расскажет наш спикер на видео

Аналог cellspacing в CSS: Border-spacing

Свойство border-spacing эффективно заменяет cellspacing в CSS. Примените его с одним или двумя параметрами для создания произвольного расстояния по вертикали и горизонтали:

table { border-spacing: 8px 2px; /* Нужно больше пространства? */ }

Схлопывание границ: решение для устаревших браузеров

Internet Explorer до версии 7 (IE7) не поддерживает border-spacing. Однако, свойство border-collapse станет идеальным решением для этого случая:

table { border-collapse: collapse; /* Стратегия диеты IE: границ больше нет! */ }

Если задано collapse, соседние ячейки будут иметь общую границу.

Работа со старыми версиями Internet Explorer

Воспользуйтесь следующим приемом, чтобы обойти ограничения старых версий Internet Explorer. Этот код не учтут современные браузеры:

*+html table { 
    /* Заклинание для призраков IE */
    *border-collapse: expression('separate', cellSpacing='10px'); 
}

Визуализация

Восприятие отступов в ячейках и расстояния между ячейками в CSS проще при использовании визуализации:

Представим, что ячейки – это танцпол:
  💃🕺👯‍♂️ – Сальса плотной формации (cellspacing=0)
  💃   🕺   👯‍♂️ – Вальс с дистанцией (cellspacing в CSS)

Padding задает личное пространство танцора:

🕺 – Без персонального пространства (cellpadding=0)
🕺💤 – С комфортом (cellpadding в CSS)

/* CSS вместо 'cellspacing' из HTML */
table { border-collapse: separate; border-spacing: 10px; }

/* Роль 'cellpadding' из HTML в JavaScript */
td, th { padding: 10px; }

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

Работа с CSS-таблицами: Практическое применение

Когда браузеры пересекаются с классикой

Для обеспечения однородного расстояния между ячейками в различных браузерах иногда необходимо использовать HTML-атрибут cellspacing. Однако, для современного и поддерживаемого кода, выбор в поддержку CSS понятен.

<!-- Старый добрый HTML – всё ещё актуален для дела -->
<table cellspacing="10"></table>

Сложности с объединением ячеек: Colspan и rowspan

При использовании объединения ячеек по столбцам или строкам (colspan или rowspan), следует понимать, как свойства padding и border-spacing взаимодействуют с объединенными ячейками.

Адаптивность: Реагирующие и масштабные дизайны

Для создания масштабируемых и адаптивных макетов используйте относительные единицы измерения, такие как rem или em:

/* Адаптивные ячейки для каждого! */
td, th { padding: 1rem; }
table { border-spacing: 0.5rem; }

Отладочный рай: Онлайн-редакторы

Интерактивные онлайн-редакторы, такие как jsfiddle или CodePen, облегчают отладку свойств CSS таблиц, предоставляя быстрый визуальный отклик.

Полезные материалы

1. A Complete Guide to the Table Element | CSS-Tricks — Обстоятельный обзор таблиц HTML и их стилизации c помощью CSS.
2. border-spacing – CSS: Cascading Style Sheets | MDN — Обзор MDN свойства border-spacing в CSS.
3. CSS Styling Tables — Шаг за шагом руководство по проектированию и настройке таблиц с помощью CSS.
4. Rem in CSS: Understanding and Using rem Units — SitePoint — Подробное руководство по использованию единиц rem для гибкого дизайна с CSS.
5. CSS Table Module Level 3 — Официальная спецификация W3C по струтктуре таблиц CSS.
6. html – Set cellpadding and cellspacing in CSS? – Stack Overflow — Опытные заметки по вопросу о нюансах реализации отступов и интервалов между ячейками в CSS.