Свойство 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; > Рамка и отступы HTML-таблицы
Вид, толщину, цвет рамки таблицы определяет свойство border . Его можно указать в атрибуте style .
Установить рамку каждой ячейке также можно с помощью атрибута style . Но предпочтительней стиль вынести в тег style или файл .css : кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).
border-spacing : расстояние между ячейками таблицы
слева+справа
сверху+снизу initial 0 inherit наследует значение родителя unset наследует значение родителя
.raz < border-spacing: 0; /* или */ border-spacing: 0 0; /*border-collapseнаследуется, применяется только кtableилиinline-tableэлементам сborder-collapse: separate;*/ > .raz, .raz td
Убрать промежутки от ячеек до краёв таблицы
/* один из возможных вариантов сделать отступы вокруг ячеек таблицы */ .raz < border-spacing: 0; padding: 0 2em 3em 0; /* значенияleftиtopпоследних ячеек */ > .raz, .raz td < position: relative; border: 1px solid red; >.raz td:nth-child(2) < left: 1em; >.raz td:nth-child(3) < left: 2em; /* каждая дополнительная ячейка сдвигается на +1 единицу */ > .raz tr:nth-child(2) td < top: 1em; >.raz tr:nth-child(3) td < top: 2em; >.raz tr:nth-child(4) td
empty-cells : наличие границ и фона у пустых ячеек
show у пустой ячейки есть граница и фон hide у пустой ячейки нет границы и фона initial show inherit наследует значение родителя unset наследует значение родителя
.raz < empty-cells: show; /*empty-cellsнаследуется, применяется только кtableилиinline-tableэлементам сborder-collapse: separate;*/ > .raz, .raz td < border: 1px solid red; >.raz td
border-collapse : схлопывание границ ячеек
separate у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead , tfoot , tbody и tr collapse между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing , empty-cells , padding у table initial separate inherit наследует значение родителя unset наследует значение родителя
Жирные внешние границы таблицы
.raz < border-collapse: collapse; border: 4px solid red; > .raz td
Таблица без границ аки сетка без внешней рамки
.raz < border-collapse: collapse; border-style: hidden; > .raz td
Свойство border у tr
Свойство padding у table при border-collapse: collapse;
.raz < border-collapse: collapse; outline: 1px solid red; /* outline можно задавать только для четырёх сторон одновременно */ outline-offset: 2px; margin: 3px; /* outline-width + outline-offset = 1px + 2px = 3px */ > .raz, .raz td
Отступы внутри ячейки таблицы
Расстояние от содержимого до края ячейки определяет свойство padding .
Отступы внутри ячеек
Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.
CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:
- padding-top ,
- padding-right ,
- padding-bottom ,
- padding-left .
Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим