Својство border-spacing
Својство border-spacing поставља размак
између ћелија td
или ћелија th
HTML табеле
(и између границе ћелије и саме табеле).
Вредност својства су било које јединице
за величине, осим процената.
Синтакса
селектор {
border-spacing: једна или две вредности;
}
Вредности
| Вредност | Опис |
|---|---|
| једна вредност | Једна вредност поставља једнаке размаке између ћелија по вертикали и по хоризонтали. |
| две вредности | Прва вредност поставља размак по хоризонтали, а друга вредност - размак по вертикали. |
Подразумевана вредност: 0. Међутим,
сваки прегледач има своју, ненулту вредност
атрибута cellspacing,
па ћете подразумевано видети размаке између
ћелија.
Напомене
Примењујте својство за табеле, а не за њене ћелије (за ћелије неће радити).
Сличан ефекат није могуће постићи помоћу
margin,
јер margin за ћелије табеле не
ради.
Ако је постављено својство border-collapse
у вредности collapse - border-spacing
неће радити.
Пример . Једна вредност
Хајде да направимо размаке између ћелија (и
између ћелије и границе табеле) од 10px:
<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>
table {
border-spacing: 10px;
border-collapse: separate;
width: 400px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
:
Пример . Две вредности
А сада направимо размаке од 10px по
хоризонтали и 30px по вертикали:
<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>
table {
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:
<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>
table {
border-collapse: collapse;
border-spacing: 10px 30px;
width: 400px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
: