html सीएसएस में सेलपैडिंग और सेलस्पेसिंग सेट करें?

तालिका डेटा के साथ बस सीएसएस पैडिंग नियमों का उपयोग करें:

td { 
    padding: 20px;
}

और सीमा अंतर के लिए:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

हालांकि, यह बॉक्स मॉडल के diff कार्यान्वयन के कारण इंटरनेट एक्सप्लोरर जैसे ब्राउज़र के पुराने संस्करण में समस्याएं पैदा कर सकता है।

इसे इस्तेमाल करे:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

या इसे आजमाएं:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

चूक

ब्राउज़र का डिफ़ॉल्ट व्यवहार बराबर है:

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 तरीका ढूंढ सकते हैं।

एक 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;
}

सीएसएस स्रोत लिंक द्वारा अधिक टेबल शैली यहां आपको सीएसएस द्वारा अधिक टेबल शैली मिलती है

जहां तक ​​मुझे पता है, तालिका कक्षों पर मार्जिन सेट करना वास्तव में कोई प्रभाव नहीं पड़ता है। cellspacing लिए समतुल्य सच्चा सीएसएस border-spacing - लेकिन यह इंटरनेट एक्सप्लोरर में काम नहीं करता है।

आप border-collapse: collapse उपयोग कर सकते हैं border-collapse: collapse सेल स्पेसिंग को विश्वसनीय रूप से 0 पर सेट करने के लिए border-collapse: collapse करें, लेकिन किसी भी अन्य मूल्य के लिए मुझे लगता है कि cellspacing विशेषता का उपयोग करना ही एकमात्र क्रॉस-ब्राउज़र तरीका है।

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

डब्ल्यू 3 सी वर्गीकरण से जो मैं समझता हूं उससे यह है कि <table> एस केवल 'डेटा' प्रदर्शित करने के लिए हैं।

उस पर आधारित मैंने पृष्ठभूमि के साथ एक <div> बनाने के लिए बहुत कुछ पाया और यह सब कुछ है और position: absolute; का उपयोग कर उस पर तैरते डेटा के साथ एक टेबल है position: absolute; और background: transparent; ...

यह क्रोम, आईई (6 और बाद में) और मोज़िला (2 और बाद में) पर काम करता है।

मार्जिन का उपयोग कंटेनर तत्वों, जैसे <table> , <div> और <form> , <tr> , <td> , <span> या <input> जैसे कंटेनर तत्वों के बीच एक स्पेसर बनाने के लिए किया जाता है (या किसी भी तरह से)। कंटेनर तत्वों के अलावा किसी अन्य चीज़ के लिए इसका उपयोग करने से आप भविष्य में ब्राउज़र अपडेट के लिए अपनी वेबसाइट को समायोजित करने में व्यस्त रहेंगे।

सीएसएस:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

अगर margin काम नहीं करता है, तो block को block करने के लिए सेट सेट करने का प्रयास करें और फिर मार्जिन काम करेगा।

आप आसानी से सीएसएस पैडिंग संपत्ति का उपयोग कर तालिका कक्षों के अंदर पैडिंग सेट कर सकते हैं, यह तालिका के सेलपैडिंग विशेषता के समान प्रभाव उत्पन्न करने का वैध तरीका है।

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

इसी तरह, आप सीएसएस सीमा-रिक्ति संपत्ति का उपयोग कर सकते हैं ताकि आसन्न तालिका सेल सीमाओं जैसे सेलस्पेसिंग विशेषता के बीच अंतर को लागू किया जा सके। हालांकि, सीमा-दूरी पर काम करने के लिए सीमा-पतन संपत्ति का मूल्य अलग होना अलग है, जो डिफ़ॉल्ट है।

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

TBH। सीएसएस के साथ सभी fannying के लिए आप cellpadding="0" cellspacing="0" कर सकते हैं क्योंकि वे बहिष्कृत नहीं हैं ...

<td> के स्पष्ट रूप से मार्जिन का सुझाव देने वाले किसी और ने इसका प्रयास नहीं किया है।

मैंने इस्तेमाल किया !important सीमा-पतन के बाद !important

border-collapse: collapse !important;

और यह आईई 7 में मेरे लिए काम करता है। ऐसा लगता है कि सेलस्पेसिंग विशेषता को ओवरराइड करना है।

यह हैक इंटरनेट एक्सप्लोरर 6 और बाद में, Google क्रोम , फ़ायरफ़ॉक्स और Opera लिए काम करता है:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

* घोषणा इंटरनेट एक्सप्लोरर 6 और 7 के लिए है, और अन्य ब्राउज़र इसे ठीक से अनदेखा करेंगे।

expression('separate', cellSpacing = '10px') 'separate' , लेकिन दोनों कथन चलाए जाते हैं, क्योंकि जावास्क्रिप्ट में आप अपेक्षा से अधिक तर्क पारित कर सकते हैं और उन सभी का मूल्यांकन किया जाएगा।

साथ ही, यदि आप cellspacing="0" , तो border-collapse: collapse जोड़ने के लिए मत भूलना border-collapse: collapse अपनी table की स्टाइलशीट में border-collapse: collapse करें।

यह शैली टेबल के लिए पूर्ण रीसेट के लिए है - सेलपैडिंग , सेलस्पेसिंग और सीमाएं ।

मेरी शैली मेरी रीसेट.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>

उन लोगों के लिए जो गैर-शून्य सेलस्पेसिंग मान चाहते हैं, निम्न सीएसएस मेरे लिए काम करता है, लेकिन मैं केवल फ़ायरफ़ॉक्स में इसका परीक्षण करने में सक्षम हूं। संगतता विवरण के लिए कहीं और पोस्ट किए गए Quirksmode लिंक देखें। ऐसा लगता है कि यह पुराने इंटरनेट एक्सप्लोरर संस्करणों के साथ काम नहीं कर सकता है।

table {
    border-collapse: separate;
    border-spacing: 2px;
}

table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

एक 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>

हाँ, यह एक परेशानी है। हाँ, यह आईई के साथ काम करता है। वास्तव में, मैंने केवल आईई के साथ इसका परीक्षण किया है, क्योंकि यह सब हमें काम पर उपयोग करने की अनुमति है।