Apa yang menggantikan cellpadding, cellspacing, valign, dan align di tabel HTML5?

320

Di Visual Studio , saya melihat peringatan ini:

Validasi (HTML 5): Atribut 'cellpadding' bukan atribut elemen 'tabel' yang valid.

Validasi (HTML 5): Atribut 'cellspacing' bukan atribut elemen 'tabel' yang valid.

Validasi (HTML 5): Atribut 'valign' bukan atribut elemen 'td' yang valid.

Validasi (HTML 5): Atribut 'align' bukan atribut elemen 'td' yang valid.

Jika mereka bukan atribut yang valid dalam HTML5 , apa yang menggantikannya dalam CSS?

— Code Maverick
sumber

4

Saya telah menemukan bahwa bahkan dengan HTML5, atribut cellpadding dan cellspacing masih diperlukan. Dengan kata lain, tanpa secara eksplisit mendeklarasikan atribut-atribut tersebut, padding dan spacing default diterapkan. Oleh karena itu, saya menemukan bahwa saya harus selalu mengaturnya ke nilai "0" untuk membatalkan nilai default. Mungkin saja mereka sudah usang tetapi browser belum mengambilnya. Nilai default masih diterapkan di Chrome versi 37.

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

— membanting tulang
sumber

6

Perlu dicatat bahwa spasi-batas hanya tampaknya berfungsi ketika menggunakan properti ini di atas meja juga "border-collapse: terpisah;"

— Blowsie

3

@ Samir - Tampaknya float:right;akan melakukan trik. jsfiddle.net/HGFH7

— membanting tulang

70

Ini harus menyelesaikan masalah Anda:

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
sumber

FYI: pindah dari stackoverflow.com/questions/10367387/…

— Shog9

13

Di meja tertentu

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

Luaskan cuplikan

— Xtian11
sumber

3

Atau, bisa digunakan untuk tabel tertentu

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

Tambahkan css ini di file eksternal

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

— Terima kasih
sumber

FYI: pindah dari stackoverflow.com/questions/10367387/…

— Shog9

1

css sebaris tidak dianjurkan.

— Samuel Ramzan

Ya kamu benar. saya tidak merekomendasikan. Kami menggunakan file css eksternal .ClassName {width: 100%; perataan teks: tengah; vertical-align: top;} Terima kasih

— JaiSankarN