Рамка и отступы таблицы (свойства border-spacing, empty-cells, border-collapse)

• border: рамки ячеек и таблицы
• border-spacing: расстояние между ячейками
• empty-cells: наличие границ и фона у пустых ячеек
• border-collapse: схлопывание границ ячеек
• padding: отступ от края до содержимого ячейки

Как сделать рамку для таблицы

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

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

<table style="border: 1px solid red;">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

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

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

<table style="border: 1px solid red;">
  <tr>
    <td style="border: 1px solid red;">Ячейка
    <td style="border: 1px solid red;">Ячейка
  <tr>
    <td style="border: 1px solid red;">Ячейка
    <td style="border: 1px solid red;">Ячейка
</table>

<!-- равнозначная запись -->

<style>
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

border-spacing: расстояние между ячейками таблицы

слева+справа em rem ex ch vh vw vmin vmax px mm cm in pt pc
сверху+снизу em rem ex ch vh vw vmin vmax px mm cm in pt pc

initial

0

inherit

наследует значение родителя

unset

наследует значение родителя

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

<style>
.raz {
  border-spacing: 0;
  /* или */ 
  border-spacing: 0 0; /* border-collapse наследуется, применяется только к table или inline-table элементам с border-collapse: separate; */ 
}
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Убрать промежутки от ячеек до краёв таблицы

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

<style>

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

.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 {
  top: 3em;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
</table>

empty-cells: наличие границ и фона у пустых ячеек

show

у пустой ячейки есть граница и фон

hide

у пустой ячейки нет границы и фона

initial

show

inherit

наследует значение родителя

unset

наследует значение родителя

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

<style>
.raz {
  empty-cells: show; /* empty-cells наследуется, применяется только к table или inline-table элементам с border-collapse: separate; */ 
}
.raz,
.raz td {
  border: 1px solid red;
}
.raz td {
  background: lightpink;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Скрыть пустые ячейки в таблице c border-collapse: collapse; можно с помощью псевдоклассов :empty или :blank.

border-collapse: схлопывание границ ячеек

separate

у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead, tfoot, tbody и tr

collapse

между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing, empty-cells, padding у table

initial

separate

inherit

наследует значение родителя

unset

наследует значение родителя

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

<style>
.raz {
  border-collapse: collapse; /* border-collapse наследуется, применяется только к table или inline-table элементам */ 
}
.raz,
.raz td {
  border: 1px solid red;
}
.raz tbody,
.raz tr,
.raz td {
  margin: 1em; /* не работает */ 
}
.raz tbody,
.raz tr {
  padding: 1em; /* не работает */ 
}
</style>

<table class="raz">
  <tbody>
    <tr>
      <td>Ячейка
      <td>Ячейка
    <tr>
      <td>Ячейка
      <td>Ячейка
</table>

Жирные внешние границы таблицы

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

<style>
.raz {
  border-collapse: collapse;
  border: 4px solid red;
}
.raz td {
  border: 1px solid red;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Таблица без границ аки сетка без внешней рамки

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

<style>
.raz {
  border-collapse: collapse;
  border-style: hidden;
}
.raz td {
  border: 1px solid red;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство border у tr

Заголовок	Заголовок
Ячейка	Ячейка
Ячейка	Ячейка

<style>
.raz {
  border-collapse: collapse;
}
.raz tr:first-child {
  border-bottom: 1px solid red;
}
.raz th+th,
.raz td+td {
  padding-left: 1em;  /* отступы между столбцами без вертикальных рамок */
}
</style>

<table class="raz">
  <tr>
    <th>Заголовок
    <th>Заголовок
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Отступы внутри ячейки таблицы

Расстояние от содержимого до края ячейки определяет свойство padding.

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

<style>
.raz {
  border-collapse: collapse;
}
.raz td {
  border: 1px solid red;
  padding: .3em 1em;  /* значения внутренних отступов ячейки от верхнего и нижнего и от правого и левого краёв */
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>