КодSEOБлогИное

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

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

Вид, толщину, цвет рамки таблицы определяет свойство 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: расстояние между ячейками таблицы

слева+справа
сверху+снизу
0
наследует значение родителя
наследует значение родителя
Ячейка Ячейка
Ячейка Ячейка 
<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
наследует значение родителя
наследует значение родителя
Ячейка
Ячейка Ячейка 
<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: схлопывание границ ячеек

у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead, tfoot, tbody и tr
между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing, empty-cells, padding у table
separate
наследует значение родителя
наследует значение родителя
Ячейка Ячейка
Ячейка Ячейка 
<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 у table при border-collapse: collapse;

Ячейка Ячейка
Ячейка Ячейка 
<style>
.raz {
  border-collapse: collapse;
  outline: 1px solid red;  /* outline можно задавать только для четырёх сторон одновременно */ 
  outline-offset: 2px;
  margin: 3px;  /* outline-width + outline-offset = 1px + 2px = 3px */ 
}
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table class="raz">
  <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>
◄▲►
Все комментарии