Добавляем отступы между ячейками таблицы CSS: основы

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

Для создания пространства между ячейками <td> в таблице используйте свойство CSS border-spacing, применявшееся к элементу <table>:

table {
  border-spacing: 10px; /* Добавляем разделительные пространства между ячейками */
}

Чтобы расширить внутренние поля ячеек, установите padding для <td>:

td {
  padding: 5px; /* Здесь теперь более подробное пространство */
}

Важно: для функционирования border-spacing свойство border-collapse должно быть установлено в значение separate.

Разъясняем методы управления пространством в таблицах

Разница между внутренним полем (padding), внешним полем (margin) и пространством между границами (border-spacing)

Чёткое осознание различий между padding, margin и border-spacing даст вам возможность легко манипулировать пространственным размещением в таблицах:

• padding обеспечивает внутреннее пространство в ячейке, аналогичное комфорту мягких подушек.
• margin никак не влияет на таблицы и для ячеек <td> не используется.
• border-spacing отвечает за пространство между ячейками. Важно помнить, что border-collapse: collapse и border-spacing не могут функционировать совместно.

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

Учёт браузера IE7 и более ранних версий

border-spacing, хотя и эффективен, не поддерживается в IE7 и более старых версиях. Используйте атрибут cellspacing внутри тега <table>, чтобы получить аналогичный результат в этих браузерах:

<table cellspacing="10">
  <!-- Содержимое таблицы -->
</table>

Сохранение цветовых решений

С помощью border-spacing вы не только добавляете пространство между ячейками, но и делаете видимым фон ячеек:

td {
  background-color: blue; /* Разделительное пространство не скроет этот цвет */
}

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

Если бы <td> были домами...

🏠🏠🏠🏠

...border-spacing волшебным образом превратит их в живописные улочки с зелёными аллеями:

table { border-spacing: 10px; }

И вот они, грациозные особняки с собственными садиками:

🏠🌿🏠🌿🏠🌿🏠

Каждый 🌿 символизирует интервалы между ячейками, созданные через CSS. Вот и всё!

Создаём идеальное оформление таблицы

Стильное размещение при помощи border-spacing

Свойство border-spacing дает возможность отдельно задавать расстояния по горизонтали и вертикали:

table {
  border-spacing: 10px 5px; /* Горизонтальные и вертикальные промежутки */
}

Гармония пространства благодаря отступам

Сочетайте border-spacing и padding, чтобы достичь высшей визуальной гармонии:

td {
  padding: 2px 8px 2px 8px; /* Великолепно сгармонировано */
}

Работа со старыми версиями браузеров

У старых браузеров есть свои причуды, поэтому используйте специальные условные комментарии для IE7 и более старых версий:

<!--[if lt IE 8]>
<style>
  table {
    /* Стили для старых версий браузера */
  }
</style>
<![endif]-->

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

1. CSS border-spacing — обзор свойства border-spacing на сайте W3Schools.
2. border-spacing | CSS-Tricks — глубокий декомпоз на border-spacing от CSS-Tricks.
3. Стилизация таблиц – Обучение веб-разработке | MDN — руководство по стилизации таблиц при помощи CSS от MDN Web Docs.
4. CSS Padding — пояснение функции отступов (padding) в CSS от W3Schools.
5. Контекст форматирования в строку – CSS: каскадные таблицы стилей | MDN — введение в инлайновую разметку и блоковые модели от MDN.
6. CSS table – CSS: каскадные таблицы стилей | MDN — объяснение макетов таблиц в CSS и их атрибутов от MDN.
7. Топ-10 дизайнов таблиц CSS — Smashing Magazine — рейтинг дизайнов таблиц от Smashing Magazine.