Уласцівасць border-spacing

Уласцівасць border-spacing задае адступ паміж ячэйкамі td ці ячэйкамі th HTML табліцы (і паміж мяжой ячэйкі і самой табліцы). Значэннем уласцівасці служаць любыя адзінкі вымярэння памераў, акрамя працэнтаў.

Сінтаксіс

cssселектар {
  border-spacing: адно ці два значэнні;
}

Значэнні

Значэнне	Апісанне
адно значэнне	Адно значэнне задае аднолькавыя адступы паміж ячэйкамі па вертыкалі і па гарызанталі.
два значэнні	Першае значэнне задае адступ па гарызанталі, а другое значэнне - адступ па вертыкалі.

Значэнне па змаўчанні: 0. Аднак, кожны браўзэр мае ўласнае, ненулявое значэнне атрыбута cellspacing, таму па змаўчанні вы ўбачыце адступы паміж ячэйкамі.

Заўвагі

Ужывайце ўласцівасць для табліц, а не для яе ячаек (для ячаек не будзе працаваць).

Аналагічнага эфекту нельга дабіцца з дапамогай margin, бо margin для ячаек табліцы не працуе.

Калі зададзена ўласцівасць border-collapse у значэнні collapse - border-spacing працаваць не будзе.

Прыклад . Адно значэнне

Давайце зробім адступы паміж ячэйкамі (і паміж ячэйкай і мяжой табліцы) ў 10px:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Прыклад . Два значэнні

А цяпер зробім адступы ў 10px па гарызанталі і 30px па вертыкалі:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Прыклад . Зададзім border-collapse: collapse

А вось цяпер border-spacing працаваць не будзе з-за ўласцівасці border-collapse у значэнні collapse:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: