border-spacing
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse .
Синтаксис
border-spacing: значение1 [значение2]
Значения
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
HTML5 CSS 2.1 IE Cr Op Sa Fx
border-spacing 1 2 3 4
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-spacing
66. Отступы между ячейками в HTML таблицах
Отступ можно задать при помощи атрибута cellspacing . Атрибут принимает целые числа. Но в наше время атрибуты уже не эффективны, поэтому будем использовать стили CSS, чтобы сделать отступ между ячейками. Будем использовать два свойства: border-collapse и border-spacing . Итак, свойство border-collapse пишем в стилях для таблицы со значением separate (о свойстве можете почитать в интернете подробно). И пишем для стилей таблицы свойство border-spacing – оно задает расстояние между ячейками, является аналогом атрибуту cellspacing . Измеряется в пикселях, процентах и т.д. Важно понять, что если свойство border-collapse со значением collapse : ( border-collapse: collapse ), то свойство border-spacing работать не будет, потому что при таком значении, ячейки в таблице склеиваются, образую одну линию. Если в свойстве border-spacing одно значение, то отступ будет со всех сторон, а если два значения, то первое значение определяет горизонтальное расстояние, а второе вертикальное. Далее пример:
table border-collapse: separate;
border-spacing: 8px 3px;
>Если урок был полезным,
можете поделиться им с друзьями
Похожие уроки и записи блога
Первое знакомство с Python Знакомство с Python
Универсальные атрибуты в HTML Разметка текста
Работа с файлами в Python Знакомство с Python
Тег TD в HTML таблицах Таблицы
Погружение в Python Знакомство с Python
Свойство background для работы с фоном Цвета и фон
Еще о возможностях модулей в Python Знакомство с Python
Модули в Python Знакомство с Python
Условная инструкция if-elif-else в Python Знакомство с Python
Как сделать расстояния между ячейками таблицы, чтобы при этом по краям этой таблицы отступов от ячеек не было?
Если задавать таблице border-spacing: 5px; , например, то отступы появляются не только внутри вокруг ячеек, но и по краям также появляются отступы. Как желательно без костылей сделать, чтобы по краям (отмечены красными стрелками) не было отступов? 
Нужно вот-так: 
Отслеживать
задан 1 авг 2018 в 13:34
47 1 1 серебряный знак 6 6 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Как вариант — отрицательные поля, равные значению border-spacing .
table < border-spacing: 10px; border-collapse: separate; margin: -10px; >td < padding: 1em; border: 1px solid; >body
1 2 3 4
Отслеживать
ответ дан 1 авг 2018 в 14:21
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
Как убрать расстояние между ячейками таблицы с помощью CSS.
Продолжаем заметку о создании границ для таблиц и настройке их отображения с помощью CSS.
В прошлой заметке мы остановились на том, что у нас получилась вот такая таблица.
Проблема была в том, что у этой таблицы имеется большое расстояние между ячейками. Очень желательно было бы это расстояние убрать.
Сейчас я покажу очень простую технику, которая позволит решить эту проблему.
Все, что нужно сделать, это добавить к таблице одно свойство CSS:
border-collapse:collapse;
Это свойство убирает все внутренние отступы между ячейками.
В итоге это будет выглядеть вот так:
| Столбец 1 | Столбец 2 |
| Столбец 1 | Столбец 2 |
table td table
И таблица принимает следующий вид:
Теперь все как надо. Мы убрали то самое не нужное пространство.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: