Хосияти 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;
}
: