गुण 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;
}
:
