html - सीएसएस में सेलपैडिंग और सेलस्पेसिंग सेट करें?
css html-table (18)
एक HTML तालिका में, cellpadding
और cellspacing
इस तरह सेट किया जा सकता है:
<table cellspacing="1" cellpadding="1">
सीएसएस का उपयोग करके इसे कैसे पूरा किया जा सकता है?
चूक
ब्राउज़र का डिफ़ॉल्ट व्यवहार बराबर है:
table {border-collapse: collapse;}
td {padding: 0px;}
Cellpadding
सेल और सेल दीवार की सामग्री के बीच की जगह सेट करता है
table {border-collapse: collapse;}
td {padding: 6px;}
cellspacing
टेबल कोशिकाओं के बीच की जगह को नियंत्रित करता है
table {border-spacing: 2px;}
td {padding: 0px;}
दोनों
table {border-spacing: 2px;}
td {padding: 6px;}
दोनों (विशेष)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
नोट: यदि
border-spacing
सेट है, तो यह इंगित करता है कि तालिका कीborder-collapse
संपत्तिseparate
।
Here आप इसे प्राप्त करने का पुराना HTML तरीका ढूंढ सकते हैं।
TBH। सीएसएस के साथ सभी fannying के लिए आप cellpadding="0"
cellspacing="0"
कर सकते हैं क्योंकि वे बहिष्कृत नहीं हैं ...
<td>
के स्पष्ट रूप से मार्जिन का सुझाव देने वाले किसी और ने इसका प्रयास नहीं किया है।
इस समस्या का सरल समाधान है:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
इसे इस्तेमाल करे:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
या इसे आजमाएं:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
एक HTML तालिका में, cellpadding
और cellspacing
इस तरह सेट किया जा सकता है:
सेल-पैडिंग के लिए : बस सरल td/th
सेल padding
कॉल करें
पूर्व:
/******Call-Padding**********/
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
}
<table>
<tr>
<th>Head1 </th>
<th>Head2 </th>
<th>Head3 </th>
<th>Head4 </th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
}
सेल-स्पेसिंग के लिए
बस सरल table
border-spacing
कॉल करें
पूर्व:
/********* Cell-Spacing ********/
table {
border-spacing: 10px;
border-collapse: separate;
}
td {
border: 1px solid red;
}
<table>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
/********* Cell-Spacing ********/
table {
border-spacing: 10px;
border-collapse: separate;
}
td {
border: 1px solid red;
}
सीएसएस स्रोत लिंक द्वारा अधिक टेबल शैली यहां आपको सीएसएस द्वारा अधिक टेबल शैली मिलती है
एक div के साथ सेल की सामग्री लपेटें और आप जो कुछ भी चाहते हैं वह कर सकते हैं, लेकिन आपको एक समान प्रभाव प्राप्त करने के लिए प्रत्येक सेल को कॉलम में लपेटना होगा। उदाहरण के लिए, व्यापक बाएं और दाएं मार्जिन प्राप्त करने के लिए:
तो सीएसएस होगा,
div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}
<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>
हाँ, यह एक परेशानी है। हाँ, यह आईई के साथ काम करता है। वास्तव में, मैंने केवल आईई के साथ इसका परीक्षण किया है, क्योंकि यह सब हमें काम पर उपयोग करने की अनुमति है।
टेबल सेलस्पेसिंग और सेलपैडिंग के लिए एचटीएमएल 5 में अप्रचलित हैं। अब सेलस्पेसिंग के लिए आपको सीमा-अंतर का उपयोग करना होगा और सेलपैडिंग के लिए आपको सीमा-पतन का उपयोग करना होगा।
और सुनिश्चित करें कि आप इसका उपयोग अपने HTML5 कोड में नहीं करते हैं। हमेशा इन मानों का उपयोग सीएसएस -3 फ़ाइल में करने का प्रयास करें।
डब्ल्यू 3 सी वर्गीकरण से जो मैं समझता हूं उससे यह है कि <table>
एस केवल 'डेटा' प्रदर्शित करने के लिए हैं।
उस पर आधारित मैंने पृष्ठभूमि के साथ एक <div>
बनाने के लिए बहुत कुछ पाया और यह सब कुछ है और position: absolute;
का उपयोग कर उस पर तैरते डेटा के साथ एक टेबल है position: absolute;
और background: transparent;
...
यह क्रोम, आईई (6 और बाद में) और मोज़िला (2 और बाद में) पर काम करता है।
मार्जिन का उपयोग कंटेनर तत्वों, जैसे <table>
, <div>
और <form>
, <tr>
, <td>
, <span>
या <input>
जैसे कंटेनर तत्वों के बीच एक स्पेसर बनाने के लिए किया जाता है (या किसी भी तरह से)। कंटेनर तत्वों के अलावा किसी अन्य चीज़ के लिए इसका उपयोग करने से आप भविष्य में ब्राउज़र अपडेट के लिए अपनी वेबसाइट को समायोजित करने में व्यस्त रहेंगे।
मैंने इस्तेमाल किया !important
सीमा-पतन के बाद !important
border-collapse: collapse !important;
और यह आईई 7 में मेरे लिए काम करता है। ऐसा लगता है कि सेलस्पेसिंग विशेषता को ओवरराइड करना है।
यह शैली टेबल के लिए पूर्ण रीसेट के लिए है - सेलपैडिंग , सेलस्पेसिंग और सीमाएं ।
मेरी शैली मेरी रीसेट.cएसएस फ़ाइल में थी:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px;/*replace cellpadding*/
}
शैली को सीधे तालिका में जोड़ने के बारे में कैसे? यह आपके सीएसएस में table
का उपयोग करने के बजाय है, जो आपके पृष्ठ पर एकाधिक टेबल होने पर एक बीएडी दृष्टिकोण है:
<table style="border-collapse: separate;border-spacing: 2px;">
<tr>
<td style="padding: 4px 4px;">Some Text</td>
</tr>
</table>
साथ ही, यदि आप cellspacing="0"
, तो border-collapse: collapse
जोड़ने के लिए मत भूलना border-collapse: collapse
अपनी table
की स्टाइलशीट में border-collapse: collapse
करें।
border-spacing
और padding
का उपयोग करके आप बस अपने सीएसएस में ऐसा कुछ कर सकते हैं:
table {
border-collapse: collapse;
}
td, th {
padding: 1em;
border: 1px solid blue;
}
<table>
<tr>
<th>head_1</th>
<th>head_2</th>
<th>head_3</th>
<th>head_4</th>
</tr>
<tr>
<td>txt_1</td>
<td>txt_2</td>
<td>txt_3</td>
<td>txt_4</td>
</tr>
</table>
तालिका डेटा के साथ बस सीएसएस पैडिंग नियमों का उपयोग करें:
td {
padding: 20px;
}
और सीमा अंतर के लिए:
table {
border-spacing: 1px;
border-collapse: collapse;
}
हालांकि, यह बॉक्स मॉडल के diff कार्यान्वयन के कारण इंटरनेट एक्सप्लोरर जैसे ब्राउज़र के पुराने संस्करण में समस्याएं पैदा कर सकता है।
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
cell-padding
को सीएसएस में padding
द्वारा दिया जा सकता है जबकि cell-spacing
को टेबल के लिए border-spacing
सेट करके सेट किया जा सकता है।
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}
td {
padding: npx; //for cellpadding
margin: npx; //for cellspacing
border-collapse: collapse; //for showing borders in a better shape.
}
अगर margin
काम नहीं करता है, तो block
को block
करने के लिए सेट सेट करने का प्रयास करें और फिर मार्जिन काम करेगा।