Свойство border-spacing
Свойство border-spacing задает отступ между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы). Значением свойства служат любые единицы для размеров, кроме процентов.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| одно значение | Одно значения задает одинаковые отступы между ячейками по вертикали и по горизонтали. |
| два значения | Первое значение задает отступ по горизонтали, а второе значение — отступ по вертикали. |
Значение по умолчанию: 0 . Однако, каждый браузер имеет свое, ненулевое значение атрибута cellspacing , поэтому по умолчанию вы увидите отступы между ячейками.
Замечания
Применяйте свойство для таблиц, а не для ее ячеек (для ячеек не будет работать).
Аналогичного эффекта нельзя добиться с помощью margin , так как margin для ячеек таблицы не работает.
Если задано свойство border-collapse в значении collapse — border-spacing работать не будет.
Пример . Одно значение
Давайте сделаем отступы между ячейками (и между ячейкой и границей таблицы) в 10px :
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-spacing: 10px; border-collapse: separate; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
Пример . Два значения
А теперь сделаем отступы в 10px по горизонтали и 30px по вертикали:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-spacing: 10px 30px; border-collapse: separate; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
Пример . Зададим border-collapse: collapse
А вот теперь border-spacing работать не будет из-за свойства border-collapse в значении collapse :
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
table < border-collapse: collapse; border-spacing: 10px 30px; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >
Как сделать отступ в таблице html
Для формирования отсутпов внутри ячеек таблицы необходимо использовать свойство padding .
Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются. Свойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (padding-top, padding-right, padding-bottom, padding-left).
Например, чтобы задать у ячеек все отступы в 20 пикселей, а отступ справа в 40 пикселей, нужно написать такой CSS-код:
td padding: 20px; padding-right: 40px; > 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