HTML5 tablolarında hücre dolgusu, hücre aralığı, değerleme ve hizalamanın yerini alan nedir?

320

Gelen Visual Studio , ben bu uyarıları görüyorum:

Doğrulama (HTML 5): 'cellpadding' özelliği 'table' öğesinin geçerli bir özelliği değil.

Doğrulama (HTML 5): 'hücre boşluğu' özelliği 'tablo' öğesinin geçerli bir özelliği değil.

Doğrulama (HTML 5): 'valign' özelliği 'td' öğesinin geçerli bir özelliği değil.

Doğrulama (HTML 5): 'align' özelliği 'td' öğesinin geçerli bir özelliği değil.

HTML5'teki geçerli öznitelikler değilse , bunları CSS'de ne değiştirir?

— Kod Maverick
kaynak

4

HTML5 ile bile, hücre dolgusu ve hücre boşluğu niteliklerinin hala gerekli olduğunu gördüm. Yani, bu nitelikleri açıkça bildirmeden, varsayılan dolgu ve aralık uygulanır. Bu nedenle, varsayılan değerleri geçersiz kılmak için bunları her zaman "0" değerine ayarlamam gerektiğini bulurum. Kullanımdan kaldırılmış olmaları mümkündür, ancak tarayıcılar henüz onları almamıştır. Varsayılan değerler, Chrome 37 sürümünde hala geçerlidir.

— Aquarelle

496

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

— köle
kaynak

6

Kenarlık aralığının yalnızca bu özelliği tabloda da kullanırken işe yaradığını belirtmek gerekir "border-collapse: separa;

— Blowsie

3

@Samir - float:right;Hile yapacak bir şey gibi görünüyor . jsfiddle.net/HGFH7

— köle

70

Bu probleminizi çözmeli:

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

— Cole Johnson
kaynak

Bilginize: stackoverflow.com/questions/10367387/…

— Shog9 adresinden

13

Belirli bir tabloda

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

Snippet'i genişlet

— Xtian11
kaynak

3

Alternatif olarak, belirli bir tablo için kullanılabilir

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

Bu css'yi harici dosyaya ekle

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

— JaiSankarN
kaynak

Bilginize: stackoverflow.com/questions/10367387/…

— Shog9 adresinden

1

satır içi css önerilmez.

— Samuel Ramzan

Evet haklısın. ben tavsiye etmiyorum. Harici css dosyası için gidiyoruz .ClassName {width: 100%; metin hizalama: merkez; vertical-align: top;} Teşekkürler

— JaiSankarN