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

Пользователь

от nikko , в категории: HTML/CSS , 3 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kendall_mckenzie , 3 года назад

@nikko  Задать расстояние между ячейками в таблице в HTML можно так:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
<style>
      table,
      th,
      td {
        border: 2px solid brown;
        border-spacing: 15px 15px;
        border-collapse: separate;
      }
    </style>
  </head>
  <table style="margin: auto">
    <tr>
      <th>Животное</th>
      <th>Возраст</th>
    </tr>
    <tr>
      <td>Кошка</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Собака</td>
      <td>7</td>
    </tr>
  </table>

Пользователь

от felix , 2 года назад

@nikko 

В HTML расстояние между ячейками можно задать с помощью стиля CSS. Вы можете использовать свойство border-spacing для установки расстояния между ячейками таблицы. Например, чтобы установить расстояние между ячейками равным 10px, вы можете использовать следующий код:

1
2
3
table {
    border-spacing: 10px;
}


Если вы хотите задать разное расстояние между строками и столбцами, вы можете использовать свойство border-collapse со значением separate и задать расстояние между строками с помощью border-spacing-x и расстояние между столбцами с помощью border-spacing-y.

1
2
3
4
5
table {
    border-collapse: separate;
    border-spacing-x: 10px;
    border-spacing-y: 15px;
}