Чем заменить cellpadding и cellspacing в CSS

Для замены cellpadding в html используйте свойство padding у ячеек, а cellspacing замените свойством border-spacing у таблицы. Для плотной сетки задайте border-collapse: collapse. Для промежутков между ячейками оставьте режим separate.

Атрибуты устарели в HTML, но браузеры сохраняют их поддержку ради старой разметки. Новые таблицы оформляйте CSS-правилами: так вы зададите отступы в одном месте и сможете менять их без правки HTML.

Чем заменить cellpadding и cellspacing в CSS

Сначала определите нужное расстояние. Поле между текстом и границей задают ячейкам, промежуток между границами соседних ячеек – таблице.

Запрос «cellpadding в html» означает внутреннее поле ячейки. Запрос «cellspacing в html» означает расстояние между соседними ячейками. Фразы «border collapse css» и «border spacing css» описывают те же CSS-настройки в поисковых запросах.

В HTML спецификация относит cellpadding и cellspacing к устаревшим возможностям. Браузеры продолжают читать эти атрибуты, поэтому старые таблицы не перестают работать. Для новой разметки используйте CSS.

Cellpadding в HTML и его замена через padding

Атрибут cellpadding задает расстояние от содержимого до внутренней границы ячейки. Свойство padding с тем же назначением задайте элементам td и th.

td,
th {
    padding: 12px;
}

Одно значение задает поле с четырех сторон. Два значения идут в порядке «вертикаль, горизонталь». Четыре значения идут по часовой стрелке: верх, право, низ, лево.

td {
    padding: 6px 14px 10px 18px;
}

th {
    padding: 10px 16px;
}

Правило для th и отдельное правило для td дают заголовкам и данным разные отступы. Такой прием помогает выделить строку заголовка без повторения инлайн-стилей.

th {
    padding: 10px 16px;
}

td {
    padding: 8px 16px;
}

Свойство padding у table меняет поле между внешней границей таблицы и ее содержимым. Оно не задает расстояние от текста до границы каждой ячейки. Для этого правила нужны у td и th.

Синтаксис и четыре формы записи описаны в справочнике MDN по padding.

Cellspacing в HTML и его замена через border-spacing

Свойство border-spacing применяйте к элементу table. Оно задает пространство между границами соседних ячеек в режиме separate.

table {
    border-collapse: separate;
    border-spacing: 8px;
}

Одно значение создает одинаковый промежуток по горизонтали и вертикали. Два значения идут в порядке «горизонталь, вертикаль».

table {
    border-collapse: separate;
    border-spacing: 14px 6px;
}

В этом примере между колонками остается 14 пикселей, а между строками – 6 пикселей. Правило для td или tr не задает такой сеточный промежуток.

Явно укажите border-collapse: separate, когда таблица должна сохранять зазоры. Так другое правило не переключит модель границ и не скроет промежутки.

Подробности о синтаксисе свойства приведены в справочнике MDN по border-spacing.

Border-collapse в CSS: collapse и separate

Свойство border-collapse выбирает модель границ. Режим separate хранит границу каждой ячейки отдельно, а режим collapse объединяет соседние границы в общую сетку.

Как рисует границы режим separate

Браузер рисует границу каждой ячейки отдельно. Свойство border-spacing оставляет свободное место между линиями.

При border-spacing: 0 свободное место исчезает, но границы остаются отдельными. Соседние линии соприкасаются, поэтому результат может отличаться от ровной единой сетки.

Как рисует границы режим collapse

Соседние границы участвуют в общей сетке. Браузер разрешает конфликт соседних линий и рисует одну итоговую границу.

При border-collapse: collapse свойство border-spacing не влияет на промежутки. Выбирайте этот режим, когда нужна таблица без зазоров и с общими линиями.

Свойства border-collapse и border-spacing описаны в документации MDN по border-collapse.

Как empty-cells меняет пустые ячейки

Свойство empty-cells относится к режиму separate. Значение show оставляет границу и фон пустой ячейки, а hide скрывает их.

table {
    border-collapse: separate;
    empty-cells: hide;
}

В режиме collapse свойство empty-cells не меняет отображение пустых ячеек.

Отступы таблицы по умолчанию

Без собственных правил браузер использует модель border-collapse: separate. Табличная модель задает border-spacing: 2px по горизонтали и вертикали, а ячейкам td и th задает padding: 1px.

Эти значения создают зазоры между ячейками и небольшое расстояние текста от границ. Сведения о стандартном отображении приведены в разделе Rendering спецификации HTML.

Сбросьте значения явно, если таблица должна начинаться без промежутков и внутренних полей.

table {
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

td,
th {
    padding: 0;
}

После сброса добавляйте только нужные границы и поля. Так настройка сетки остается отдельно от настройки текста.

Готовые примеры

Выберите модель по виду результата. В каждом примере CSS и HTML разделены, поэтому правила можно перенести в файл стилей, а разметку – в шаблон страницы.

Таблица без промежутков с одинарными границами

Режим collapse объединяет соседние линии. Свойство padding сохраняет расстояние текста от границы.

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid #555;
    padding: 8px;
}

<table>
    <tr>
        <th>Товар</th>
        <th>Количество</th>
    </tr>
    <tr>
        <td>Кабель</td>
        <td>4</td>
    </tr>
</table>

Соседние ячейки соприкасаются, а текст отступает от линий на 8 пикселей.

Таблица с промежутками между ячейками

Режим separate оставляет свободное место между отдельными границами.

table {
    border-collapse: separate;
    border-spacing: 10px;
}

td,
th {
    border: 1px solid #555;
    padding: 8px;
}

<table>
    <tr>
        <th>Название</th>
        <th>Статус</th>
    </tr>
    <tr>
        <td>Проект A</td>
        <td>Готов</td>
    </tr>
</table>

Каждая ячейка сохраняет собственную границу, а между соседними линиями появляется промежуток 10 пикселей.

Разные промежутки по горизонтали и вертикали

Первое значение border-spacing задает расстояние между колонками. Второе значение задает расстояние между строками.

table {
    border-collapse: separate;
    border-spacing: 18px 6px;
}

td,
th {
    border: 1px solid #555;
    padding: 6px 12px;
}

<table>
    <tr>
        <th>Имя</th>
        <th>Роль</th>
    </tr>
    <tr>
        <td>Анна</td>
        <td>Редактор</td>
    </tr>
</table>

Колонки получают зазор 18 пикселей, а строки – 6 пикселей. Внутреннее поле текста остается отдельной настройкой padding.

Ошибки при замене cellpadding и cellspacing

Большинство ошибок появляется из-за неправильного элемента или смешения двух моделей границ.

• border-spacing вместе с collapse. Режим объединенных границ не учитывает зазоры. Для промежутков выберите separate.
• margin у td и tr. Табличная модель не использует margin ячеек как замену cellspacing. Задайте border-spacing элементу table.
• padding у table вместо ячеек. Такое правило меняет поле между границей таблицы и ее содержимым. Для расстояния от текста до границы задайте padding у td и th.
• Инлайн-стили в каждой ячейке. Повторяющиеся значения сложнее менять. Вынесите их в правило таблицы или отдельный CSS-файл.

Удалите старые атрибуты после переноса настроек в CSS. Перед этим сохраните копию исходной разметки, чтобы быстро вернуть прежние значения при ошибке.

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