HTML Отступы и промежутки в таблице

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


С отступами
hello hello hello
hello hello hello
hello hello hello
С промежутками
hello hello hello
hello hello hello
hello hello hello

Отступы внутри ячеек влияют на пространство между краями ячейки и её содержанием, а межячейковые промежутки определяют расстояния между соседними ячейками.


Отступы внутри ячеек (Padding)

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

По умолчанию внутренний отступ равен нулю.

Чтобы добавить отступы в ячейки таблицы, используйте CSS-свойство padding:

th, td {
  padding: 15px;
}

Если нужно настроить отступы отдельно сверху, снизу, слева и справа, используйте соответствующие свойства — padding-top, padding-bottom, padding-left, padding-right:

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

Расстояние между ячейками (Spacing)

Расстояние между ячейками определяет промежуток между границами смежных ячеек.

По умолчанию расстояние составляет 2 пикселя.

Изменить его можно с помощью CSS-свойства border-spacing, применяемого к самой таблице:

table {
  border-spacing: 30px;
}

Эти настройки позволяют гибко регулировать внешний вид вашей таблицы.

To top