Својството 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;
}

Результат: