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

Question

एक HTML तालिका में, cellpaddingऔर cellspacingइसे इस तरह सेट किया जा सकता है:

<table cellspacing="1" cellpadding="1">

CSS का उपयोग करके इसे कैसे पूरा किया जा सकता है?

Comments

बस एक सामान्य सुझाव, यह देखने के लिए जांचें कि क्या इन समाधानों को आज़माने से पहले आपका style.css आपके तालिकाओं पर "रीसेट" करता है। उदाहरण: यदि आपके पास टेबल सेट नहीं है width:autoतो border-collapseउम्मीद के मुताबिक काम नहीं कर सकते हैं।

— पीजे ब्रुनेट

टेबल पर बॉर्डर-स्पेसिंग का उपयोग करें और td पर पैडिंग करें।

— शुभ

Answer 1

मूल बातें

CSS में "cellpadding" को नियंत्रित करने के लिए, आप बस paddingटेबल सेल पर उपयोग कर सकते हैं। "सेलपैडिंग" के 10px के लिए जैसे:

td { 
    padding: 10px;
}

"सेलस्पेसिंग" के लिए, आप border-spacingसीएसएस संपत्ति को अपनी मेज पर लागू कर सकते हैं। जैसे "सेलस्पेसिंग" के 10px के लिए:

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

यह संपत्ति अलग-अलग क्षैतिज और ऊर्ध्वाधर रिक्ति की भी अनुमति देगी, ऐसा कुछ जो आप पुराने स्कूल "सेलस्पेसिंग" के साथ नहीं कर सकते थे।

IE <= 7 में समस्याएँ

यह इंटरनेट एक्सप्लोरर 7 के माध्यम से इंटरनेट एक्सप्लोरर को छोड़कर लगभग सभी लोकप्रिय ब्राउज़रों में काम करेगा, जहां आप लगभग भाग्य से बाहर हैं। मैं "लगभग" कहता हूं क्योंकि ये ब्राउज़र अभी भी border-collapseसंपत्ति का समर्थन करते हैं, जो कि आसन्न तालिका कोशिकाओं की सीमाओं को मर्ज करता है। यदि आप सेलस्पेसिंग (यानी cellspacing="0") को खत्म करने की कोशिश कर रहे हैं, border-collapse:collapseतो इसका एक ही प्रभाव होना चाहिए: तालिका कोशिकाओं के बीच कोई स्थान नहीं। यह समर्थन छोटी गाड़ी है, हालांकि, यह cellspacingटेबल तत्व पर मौजूदा HTML विशेषता को ओवरराइड नहीं करता है।

संक्षेप में: गैर-इंटरनेट एक्सप्लोरर 5-7 ब्राउज़रों के लिए, border-spacingआपको संभालता है। इंटरनेट एक्सप्लोरर के लिए, यदि आपकी स्थिति ठीक है (आप 0 सेलस्पेसिंग चाहते हैं और आपकी तालिका में यह पहले से परिभाषित नहीं है), तो आप उपयोग कर सकते हैं border-collapse:collapse।

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

नोट: सीएसएस गुणों के एक महान अवलोकन के लिए, जो तालिकाओं पर लागू हो सकता है और किस ब्राउज़र के लिए, यह शानदार Quirksmode पृष्ठ देखें ।

Comments

सेलपैडडिंग = "0" अभी भी क्रोम 13.0.782.215 में अंतर बना सकता है, भले ही सीमा-पतन: पतन और बॉर्डर-स्पेस टेबल पर लागू हो।

— व्हाइटनीलैंड

@LeeWitney को आपको अपनी टेबल सेल्स पर 0: 0 सेट करने की आवश्यकता है।

— मार्टिन Martinरडिंग-थॉमसन 10

यह विषय से थोड़ा हटकर है, लेकिन एचटीएमएल 5 में सेलपैडिंग और सेलस्पेसिंग विशेषताओं को हटा दिया जाता है, इसलिए सीएसएस अब जाने का एकमात्र तरीका है।

— इग्नास 2526

नमस्ते। मैंने स्पष्टता के लिए उत्तर को अपडेट किया है, जिसमें सेलपैडिंग पर एक खंड शामिल है, जो मुझे लगा कि स्पष्ट था (बस "पैडिंग" का उपयोग करें)। आशा है कि अब यह अधिक उपयोगी है।

— एरिक गुयेन

सच है, @vapcguy, किसी भी तरह की परिवर्तनशील अन्य स्थितियों में आप जिस तालिका में स्टाइल कर रहे हैं, आपको अधिक विशिष्ट चयनकर्ताओं को परिभाषित करने की आवश्यकता होगी। उपरोक्त को उदाहरण के रूप में चिह्नित किया गया है।

— एरिक गुयेन

Answer 2

चूक

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

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।

इसे स्वयं आज़माएं!

यहां आप इसे प्राप्त करने का पुराना HTML तरीका पा सकते हैं।

Comments

टेबल के चारों ओर स्पेसिंग कैसे गायब हो रही है? जब मैं "बॉर्डर-स्पेसिंग: 8 पीएक्स 12 पीएक्स" सेट करता हूं, तो यह रिक्ति को न केवल बीच में, बल्कि टेबल बॉर्डर और बाहर की कोशिकाओं के बीच जोड़ता है! लेकिन जो यहां छवियों में चित्रित नहीं किया गया है, वे बचे हुए हैं।

— Kaz

@ 2astalavista और दुर्भाग्य से अगर कोई बाहरी रिक्ति के प्रभाव को नष्ट करना चाहता है, तो यह इन सीएसएस विशेषताओं के साथ इस तरह से काम नहीं करेगा।

— कज़

@Kaz आपको उस कष्टप्रद भाग को छिपाने के लिए नकारात्मक मार्जिन का उपयोग करने की आवश्यकता हो सकती है।

टीडी पर डिफ़ॉल्ट पैडिंग आम तौर पर 1px है, न कि 0

— Jan M

Answer 3

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

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

Comments

यह वास्तव में केवल एक चीज है जो मुझे मेरे लिए काम करने के लिए मिल सकती है, हालांकि मैंने सामान्य रूप से सामान्य होने से बचने के लिए आईडी पर जानकारी लागू की थी।

— काजकाई

वह cellspacing=0बराबर है। के लिए समकक्ष cellspacing=1पूरी तरह से अलग है। स्वीकृत उत्तर देखें।

— TRGG 25'12

नहीं होना चाहिए table tdऔर table thसिर्फ tdऔर thक्रमशः? यह किसी भी तरह से काम करता है, लेकिन एक छोटे चयनकर्ता का मतलब है थोड़ा तेज मिलान

— कोल जॉनसन

@ वास्तव में, मुझे लगता है कि यह होना चाहिए table > tr > tdऔर table > tr > th। यह लगभग उतना ही तेज है trऔर th, और यह काम करने की गारंटी है यदि आपके पास एक नेस्टेड टेबल है। बस मेरे 2 सी

— लेविथानबर्गर

@ उपर्युक्त लेकिन क्या tableचयनकर्ता की आवश्यकता है? IIRC, a <td>अमान्य है जब तक कि अंदर a <tr>।

— कोल जॉनसन

Answer 4

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

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

Comments

आज के युग में वह वास्तविकता एनथ डिग्री तक चूसना है।

— जॉन के।

यह लगभग सही है, लेकिन border-collapseकेवल IE 5-7 में काम करता है यदि तालिका में पहले से कोई cellspacingविशेषता निर्धारित नहीं है। मैंने एक व्यापक उत्तर लिखा है जो इस पृष्ठ पर अन्य उत्तरों के सभी सही हिस्सों को विलय करता है जो कि सहायक होते हैं।

— एरिक गुयेन

ईमानदार होने के लिए, इंटरनेट एक्सप्लोरर के बारे में कौन परवाह करता है? जो कोई भी इसका उपयोग करता है, उसे पता होना चाहिए कि टूटी हुई वेबसाइटें ऐसी कम गुणवत्ता वाले ब्राउज़र का उपयोग करने के लिए - उनकी गलती हैं । वेबसाइटों को इससे निपटना नहीं चाहिए। Internet Explorer खो जाने दें। इसके लिए समर्थन भूल जाएं। हमें इसकी आवश्यकता नहीं है, और इसे विकसित करने के लिए एक दर्द है।

Answer 5

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

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', लेकिन दोनों स्टेटमेंट चलाए जाते हैं, जैसे कि जावास्क्रिप्ट में आप उम्मीद से अधिक तर्क पारित कर सकते हैं और उन सभी का मूल्यांकन किया जाएगा।

Comments

उन का प्रयास कर उत्तरदायी ईमेल, कृपया ध्यान दें कि * (एक इंजन प्रस्तुत करना के रूप में उपयोग करता है शब्द) दृष्टिकोण 2007+ द्वारा मान्यता प्राप्त नहीं है के लिए campaignmonitor.com/css

— ptim

Answer 6

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

संगतता विवरण के लिए कहीं और पोस्ट किए गए Quirksmode लिंक देखें। ऐसा लगता है कि यह पुराने Internet Explorer संस्करणों के साथ काम नहीं कर सकता है।

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

Answer 7

इस समस्या का सरल समाधान है:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Answer 8

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

Answer 9

एक डिव के साथ सेल की सामग्री को लपेटें और आप अपनी इच्छानुसार कुछ भी कर सकते हैं, लेकिन एक समान प्रभाव पाने के लिए आपको हर सेल को एक कॉलम में लपेटना होगा। उदाहरण के लिए, बस व्यापक बाएं और दाएं मार्जिन प्राप्त करने के लिए:

तो सीएसएस होगा,

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>

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

Comments

काश मैं और अधिक उत्थान कर पाता ... पहला उदाहरण जो दूसरों को नहीं दोहराता था और एक है जो दिखाता है कि पृष्ठ पर उन सभी के बजाय एक एकल तालिका या सेल पर प्रभाव को कैसे सीमित किया जाए !!!

— vapcguy

Answer 10

बस का उपयोग border-collapse: collapseअपनी मेज के लिए, और paddingके लिए thया td।

Answer 11

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

मैंने अपनी रीसेट फ़ाइल में यह शैली बनाई थी:

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 */
}

Answer 12

TBH। सीएसएस के साथ चारों ओर फैनी के लिए आप बस उपयोग कर सकते हैं cellpadding="0" cellspacing="0"क्योंकि वे पदावनत नहीं हैं ...

किसी और ने सुझाव दिया कि हाशिये पर <td>स्पष्ट रूप से यह कोशिश नहीं की गई है।

Comments

वे वास्तव में html5 में पदावनत हैं।

— काजकाई

Answer 13

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

Answer 14

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

td { 
    padding: 20px;
}

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

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

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

Answer 15

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

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

यह क्रोम, इंटरनेट एक्सप्लोरर (6 और बाद में) और मोज़िला फ़ायरफ़ॉक्स (2 और बाद में) पर काम करता है।

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

Comments

ओपी ने कभी नहीं कहा कि वह किस तालिका के लिए उपयोग कर रहा था।

— अल्फ्रावो

Answer 16

सीएसएस:

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

Answer 17

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

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>[e-mail]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

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

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>[e-mail]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Answer 18

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

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

या यह प्रयास करें:

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

Answer 19

मैंने !importantजैसे बॉर्डर-पतन के बाद उपयोग किया

border-collapse: collapse !important;

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

Comments

!importantकेवल एक जटिल स्थिति में अन्य सीएसएस सेटिंग्स को ओवरराइड करने की आवश्यकता होगी (और तब भी ज्यादातर एक गलत दृष्टिकोण)।

— जुक्का के। कोर्पेला

साथ ही डैन के उत्तर को दोहराता है, बस जोड़ता है !important, जिसे दूसरे उत्तर के बजाय टिप्पणी के रूप में शामिल किया जा सकता था।

— vapcguy

Answer 20

<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-paddingpaddingसीएसएस द्वारा दिया जा सकता है जबकि टेबल के लिए cell-spacingसेट करके सेट किया जा सकता है border-spacing।

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

फील करना ।

Answer 21

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

अगर marginकाम नहीं किया, सेट करने की कोशिश displayकी trकरने के लिए blockऔर उसके बाद मार्जिन काम करेंगे।

Answer 22

तालिकाओं के लिए, सेलस्पेसिंग और सेलपैडिंग HTML 5 में अप्रचलित हैं।

अब सेलस्पेसिंग के लिए आपको बॉर्डर-स्पेसिंग का उपयोग करना होगा। और सेलपैडिंग के लिए आपको बॉर्डर-पतन का उपयोग करना होगा।

और सुनिश्चित करें कि आप अपने HTML5 कोड में इसका उपयोग नहीं करते हैं। हमेशा सीएसएस 3 फ़ाइल में इन मानों का उपयोग करने का प्रयास करें।

Answer 23

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

Answer 24

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

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

Answer 25

आप बस अपने सीएसएस में कुछ ऐसा कर सकते हैं, का उपयोग कर 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>

Comments

बॉर्डर-स्पेलिंग नियम को अनदेखा किया जाता है जब सीमाएं ढह जाती हैं।

— dgrogan

Answer 26

कैसे शैली को सीधे टेबल पर सीधे जोड़ने के बारे में? यह tableआपके सीएसएस में उपयोग करने के बजाय है , जो कि आपके पृष्ठ पर कई तालिकाओं के होने पर BAD दृष्टिकोण है:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Comments

टेबल टैग में "स्टाइल" डालना आपकी सीएसएस में "टेबल # someId" डालने से भी बदतर है, क्योंकि स्टाइल को कंटेंट से अलग होना चाहिए। लेकिन सवाल का मुख्य बिंदु यह है कि कैसे हटाए गए HTML को उचित सीएसएस में परिवर्तित किया जाए। जो आपने सही ढंग से किया है, लेकिन आपने वास्तव में अपने उत्तर के साथ कुछ भी नहीं जोड़ा है, और एक असंबंधित मुद्दे पर ध्यान केंद्रित कर रहे हैं।

— तेइपेमम

कुछ नहीं जोड़ा ?! मैंने जो जोड़ा वह इस बात पर ध्यान केंद्रित करने के लिए था कि यहां हर दूसरा जवाब मूल रूप से उपयोग करने के लिए कैसे कहा जाता है td { padding: ... }या table { border-spacing: ... }, बजाय इसे सीधे टेबल पर लागू करने के। वे कुछ नहीं जोड़ते। जैसा कि मैंने कहा, जब आपके पेज पर कई टेबल हैं और उन्हें प्रभावित नहीं करना चाहते हैं, तो आप यह नहीं चाहते हैं! हमें "स्टाइलशीट का उपयोग करें!" कहने वाले उत्तर के पूरे पृष्ठ की आवश्यकता नहीं है, हो सकता है कि जब आप चाहते हैं कि आखिरी चीज हो, क्योंकि आप केवल एक सेल या टेबल के लिए प्रारूपण चाहते हैं। यही कारण है कि जब यह करने के लिए आवेदन है tableया tdयह overkill है के लिए अवांछनीय और एक पूरी नई वर्ग पैदा हो गई।

— vapcguy

हर दूसरे उत्तर में एक स्टाइलशीट का उपयोग किया जाता है क्योंकि मूल प्रश्न "मैं कैसे सीएसएस के साथ ऐसा कर सकता हूं"। यदि प्रश्न यह था कि "मैं कैसे सीएसएस को केवल इस एक तालिका को प्रभावित कर सकता हूं", तो आपका उत्तर अधिक उपयुक्त होगा (हालांकि मैं अभी भी एहसान करूंगा table#someId)।

— तेइपेमम

तकनीकी रूप से, इनलाइन स्टाइलिंग अभी भी सीएसएस है, बस एक स्टाइलशीट का उपयोग नहीं कर रहा हूं, लेकिन मुझे आपकी बात मिल गई है।

— vapcguy

क्योंकि एक वर्ग के पीछे विचार पुन: प्रयोज्य के लिए है। एक-बंद के लिए, जो थोड़ा समझ में आता है और ओवरकिल, IMHO है।

— vapcguy 8:11 बजे

Answer 27

मैं यह सुझाव देता हूं और विशेष तालिका के लिए सभी कोशिकाएं प्रभावित होती हैं।

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Answer 28

आप नीचे दिए गए कोड की जांच कर सकते हैं index.htmlऔर इसे बना सकते हैं।

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

OUTPUT: