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

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

  • автор:

Отступы между ячейками

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.

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

Отступы между ячейками не работают с border-collapse: collapse , что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Поэтому в этом задании мы используем border-collapse: separate , которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse , то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

  • с помощью атрибута cellspacing тега
  • или c помощью CSS-свойства border-spacing .

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding , которое задаётся для ячеек.

Перейти к заданию

  • index.html

Ячейки и границы таблицы

В CSS-таблицах можно управлять отступами и схлопыванием рамок между ячейками. Для этого, как и у HTML-таблиц, используются свойства border-collapse и border-spacing . Свойство border-collapse «схлопывает» границы ячеек, а border-spacing — определяет расстояние между ячейками внутри таблицы. Подробно свойства разбираются в заданиях «Улучшаем отображение рамок» и «Отступы между ячейками» части «Знакомство с таблицами».

Однако, у свойства border-spacing есть одна тонкость. Если в нём задано одно значение, то расстояние между ячейками устанавливается одновременно по вертикали и горизонтали. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Разберём эти свойства на примере небольшой CSS-таблицы.

Перейти к заданию

  • index.html

HTML Автозапуск

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить

Притормози, дружище

Проходить вызовы части «Таблицы на CSS» тренажёра «Табличные раскладки» можно после регистрации и оформления подписки.

  • Наша группа в VK
  • Наш канал на YouTube
  • Наша страница в Twitter
  • Наш канал в Telegram

Практикум

Профессии

  • Фронтенд-разработчик
  • JavaScript-разработчик (React)
  • JavaScript-разработчик (Vue.js)
  • Фулстек-разработчик
  • HTML и CSS.
    Профессиональная вёрстка сайтов
  • HTML и CSS.
    Адаптивная вёрстка и автоматизация
  • JavaScript.
    Профессиональная разработка веб-интерфейсов
  • JavaScript.
    Архитектура клиентских приложений
  • React.
    Разработка сложных клиентских приложений
  • Node.js.
    Профессиональная разработка REST API
  • Node.js и Nest.js.
    Микросервисная архитектура
  • TypeScript. Теория типов
  • Алгоритмы и структуры данных
  • Паттерны проектирования
  • Webpack
  • Vue.js 3. Разработка клиентских приложений
  • Git и GitHub
  • Анимация для фронтендеров
  • Справочник по HTML
  • Учебник по Git
  • Учебник по PHP

Информация

  • Об Академии
  • О центре карьеры

Услуги

  • Работа наставником
  • Для вузов и колледжей
  • Для учителей
  • Подарочные сертификаты

Свойство 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; >

Как сделать расстояния между ячейками таблицы, чтобы при этом по краям этой таблицы отступов от ячеек не было?

Если задавать таблице 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 серебряных знака 62 62 бронзовых знака

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *