Как сделать отступ между ячейками в таблице html

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;
>

Если урок был полезным,
можете поделиться им с друзьями

Рамка и отступы HTML-таблицы

Вид, толщину, цвет рамки таблицы определяет свойство border . Его можно указать в атрибуте style .

style="border: 1px solid red;"> Ячейка Ячейка Ячейка Ячейка

Установить рамку каждой ячейке также можно с помощью атрибута style . Но предпочтительней стиль вынести в тег style или файл .css : кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).

style="border: 1px solid red;"> style="border: 1px solid red;">Ячейка style="border: 1px solid red;">Ячейка style="border: 1px solid red;">Ячейка style="border: 1px solid red;">Ячейка
   class="raz"> Ячейка Ячейка Ячейка Ячейка

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 .

   Ячейка Ячейка Ячейка Ячейка

Как сделать отступ в таблице html

Для формирования отсутпов внутри ячеек таблицы необходимо использовать свойство padding .

Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются. Свойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (padding-top, padding-right, padding-bottom, padding-left).

Например, чтобы задать у ячеек все отступы в 20 пикселей, а отступ справа в 40 пикселей, нужно написать такой CSS-код:

td  padding: 20px; padding-right: 40px; >

Полностью убрать расстояния между ячейками

Первое свойство — расстояние между ячейками.
Второе — предотвращает задвоение рамок.

table

Отслеживать
ответ дан 22 апр 2016 в 15:31
Утка Учится Укрываться Утка Учится Укрываться
7,147 3 3 золотых знака 29 29 серебряных знаков 56 56 бронзовых знаков
Ну да все работает, спасибо, у самого возникал такой вопрос как то jsfiddle.net/72eg3o9x
22 апр 2016 в 15:57

Почти как у остальных, но border-spacing не нужен при border-collapse: collapse :

table < border-collapse: collapse; >td

   foo  bar  baz

Отслеживать
ответ дан 3 янв 2017 в 21:16
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака

   foo  bar  baz

Отслеживать
ответ дан 22 апр 2016 в 15:33
user176262 user176262
Этот метод стал deprecated как минимум лет пять назад
22 апр 2016 в 15:35
@ru_volt «А я до сих пор поезда взрываю.»
– user176262
22 апр 2016 в 15:38

Попробуйте изменить отступы и толщину границы:

margin: 0px; border-width: 0px;

Также и для таблицы.

Отслеживать
ответ дан 22 апр 2016 в 15:21
Vanyamba Electronics Vanyamba Electronics
2,693 13 13 золотых знаков 18 18 серебряных знаков 26 26 бронзовых знаков
не помогает: jsfiddle.net/ntLzdf5m
22 апр 2016 в 15:29

Полный ответ на ваш вопрос выглядит так:

// Remove default spacing table < border-spacing: 0; border-collapse: collapse; >// Remove default padding td, th

Отслеживать
ответ дан 3 янв 2017 в 12:49
MobiDevices MobiDevices
7,299 5 5 золотых знаков 27 27 серебряных знаков 71 71 бронзовый знак
text-align: center; — откуда взялся?
3 янв 2017 в 15:22
@VenZell, угадай с одной попытки. Строка 227.
3 янв 2017 в 21:13

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.