Чат Telegram
Группа ВКонтакте
Как сделать отступы в таблице HTML

Отступы в таблицах

Итак, мы изучили с вами наиболее простые действия, которые можно осуществлять с границами таблиц. И теперь таблица выглядит куда более эстетично. Однако, наполнение ячеек прямо таки упирается в границы. Это легко можно исправить, достаточно лишь сделать отступы в ячейках в таблице HTML. И тогда текст внутри рамки, в ячейке, будет более читабельным.

Для того, чтобы сделать отступы в ячейке следует использовать атрибут cellpadding для тега <table>. Однако, есть и другой, более предпочтительный вариант: CSS.

В таком случае отступы задаются с помощью свойства padding. С его помощью не составит труда сделать отступ там, где надо, то есть – сверху, справа, снизу или слева, используя, соответственно, одно из данных свойств: padding-top, padding-right, padding-bottom и padding-left.

Можно задать, на сколько именно пикселей должен осуществляться отступ. Приведем пример, в котором нижний отступ будет составлять 20 пикселей, а все остальные будут по 10. Такой CSS-код будет выглядеть вот так:

td {
  padding: 10px;
  padding-bottom: 20px;
}

А полный код стилей на данном этапе:

table {
    border: solid 1px blue;
    border-collapse: collapse;
}

td {
    border: solid 1px blue;
    padding: 10px;
    padding-bottom: 20px;
}

Результат в браузере:
Таблица с отступами

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

Как правило, задачи, связанные с созданием таблиц, можно решить, используя для этого теги, атрибуты и свойства, которые позволяют создавать рамки, отступы в ячейках, а также задать цветовой фон самих ячеек.

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

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

  1. с использованием атрибута cellspacing для тега <table>.
  2. с использованием CSS-свойства border-spacing.

Надо подчеркнуть, что border-spacing прописывается для таблицы в целом, в то время как свойство padding прописывается непосредственно для ячеек.

Давайте глянем на пример:

table {
    border: solid 1px blue;
    border-collapse: separate;
    border-spacing: 5px;
}

td {
    border: solid 1px blue;
    padding: 10px;
    padding-bottom: 20px;
}

И на получившийся результат:
Таблица с отступами между ячеек

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

А чтобы они находились отдельно друг от друга, следует использовать border-collapse: separate. Важно понимать, что данное значение является значением по умолчанию. И применяется оно только для того, чтобы наглядно показать, как решается эта задача. Если мы удалим эту строку, то результат в виде отдельно расположенных друг от друга ячеек будет сохранен.

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • создайте таблицу, у которой отступы внутри ячеек будут: сверху - 10px, справа - 5px, снизу - 15px, слева - 20px
  • сделайте отступы между ячейками по 10px
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Комментарии (10)
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
loader
Есть вопрос по программированию?
Здесь быстро ответят!
Задать вопрос
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
loader
Форум веб-разработчиков
Здесь все!
Перейти
loader
Логические задачи с собеседований