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?

html css visual-studio css-tables 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

Jawaban:

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