HTML5 तालिकाओं में सेलपैड, सेलस्पेसिंग, वैलिग्न और संरेखित क्या बदलता है?

Question

में विजुअल स्टूडियो , मैं इन चेतावनियों दिखाई दे रही है:

• सत्यापन (HTML 5): 'सेलपैडिंग' को अटेंड करना तत्व 'टेबल' का एक वैध गुण नहीं है।
• सत्यापन (HTML 5): 'सेलस्पेसिंग' को अटेंड करना तत्व 'टेबल' का एक वैध गुण नहीं है।
• सत्यापन (एचटीएमएल 5): गुण 'मान्य' तत्व 'td' का एक वैध गुण नहीं है।
• सत्यापन (HTML 5): गुण 'संरेखित' तत्व 'td' का एक वैध गुण नहीं है।

यदि वे HTML5 में मान्य विशेषता नहीं हैं , तो सीएसएस में उन्हें क्या बदल दिया जाता है?

Comments

मैंने पाया है कि HTML5 के साथ भी, सेलपैड और सेलस्पेसिंग विशेषताओं की आवश्यकता है। यह कहना है, उन विशेषताओं को स्पष्ट रूप से घोषित किए बिना, डिफ़ॉल्ट पैडिंग और रिक्ति लागू होती हैं। इसलिए, मुझे लगता है कि मुझे डिफ़ॉल्ट मानों को समाप्त करने के लिए हमेशा उन्हें "0" के मूल्य पर सेट करना होगा। यह संभव है कि उन्हें पदावनत कर दिया गया है लेकिन ब्राउज़र अभी तक उन पर नहीं चढ़े हैं। Chrome संस्करण 37 में डिफ़ॉल्ट मान अभी भी लागू होते हैं।

— एक्सेलल सिप

Answer 1

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

/* cellspacing */
table { border-collapse: separate; border-spacing: 5px; } /* cellspacing="5" */
table { border-collapse: collapse; border-spacing: 0; }   /* cellspacing="0" */

/* valign */
th, td { vertical-align: top; }

/* align (center) */
table { margin: 0 auto; }

Comments

यह ध्यान देने योग्य है कि सीमा-रिक्ति केवल तभी काम करती है जब इस संपत्ति का उपयोग टेबल पर भी किया जाता है "सीमा-पतन: अलग;"

— Blowsie

@ आमिर - लगता है कि एक float:right;चाल चलेंगे । jsfiddle.net/HGFH7

— परिश्रम से काम करना

Answer 2

इससे आपकी समस्या का समाधान हो जाना चाहिए:

td {
    /* <http://www.w3.org/wiki/CSS/Properties/text-align>
     * left, right, center, justify, inherit
     */
    text-align: center;
    /* <http://www.w3.org/wiki/CSS/Properties/vertical-align>
     * baseline, sub, super, top, text-top, middle,
     * bottom, text-bottom, length, or a value in percentage
     */
    vertical-align: top;
}

Comments

FYI करें: stackoverflow.com/questions/10367387/…

— Shog9

Answer 3

विशेष टेबल पर

<table style="border-collapse: separate; border-spacing: 10px;" >
    <tr>
      <td>Hi</td>
      <td>Hello</td>
    <tr/>
    <tr>
      <td>Hola</td>
      <td>Oi!</td>
    <tr/>
</table>

Answer 4

वैकल्पिक रूप से, विशेष तालिका के लिए उपयोग कर सकते हैं

 <table style="width:1000px; height:100px;">
    <tr>
        <td align="center" valign="top">Text</td> //Remove it
        <td class="tableFormatter">Text></td>
    </tr>
</table>

इस सीएसएस को बाहरी फाइल में जोड़ें

.tableFormatter
{
width:100%;
vertical-align:top;
text-align:center;
}

Comments

FYI करें: stackoverflow.com/questions/10367387/…

— Shog9

इनलाइन सीएसएस अनुशंसित नहीं है।

— शमूएल रमजान

हाँ आप सही है। मैं सिफारिश नहीं कर रहा हूँ हम बाहरी सीएसएस फ़ाइल के लिए जाते हैं। ClassName {चौड़ाई: 100%; पाठ-संरेखित करें: केंद्र; ऊर्ध्वाधर-संरेखित करें: शीर्ष;} धन्यवाद

— जयसंकर