Qu'est-ce qui remplace le remplissage des cellules, l'espacement des cellules, le valignage et l'alignement dans les tableaux HTML5?

320

Dans Visual Studio , je vois ces avertissements:

Validation (HTML 5): l'attribut 'cellpadding' n'est pas un attribut valide de l'élément 'table'.

Validation (HTML 5): l'attribut 'cellspacing' n'est pas un attribut valide de l'élément 'table'.

Validation (HTML 5): l'attribut 'valign' n'est pas un attribut valide de l'élément 'td'.

Validation (HTML 5): l'attribut 'align' n'est pas un attribut valide de l'élément 'td'.

S'ils ne sont pas des attributs valides en HTML5 , qu'est-ce qui les remplace en CSS?

— Code Maverick
source

4

J'ai constaté que même avec HTML5, les attributs de remplissage de cellule et d'espacement de cellule sont toujours requis. Autrement dit, sans déclarer explicitement ces attributs, le remplissage et l'espacement par défaut sont appliqués. Par conséquent, je trouve que je dois toujours les mettre à la valeur "0" afin d'annuler les valeurs par défaut. Il est possible qu'ils soient obsolètes, mais les navigateurs ne les ont pas encore détectés. Les valeurs par défaut sont toujours appliquées dans la version 37 de Chrome.

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

— peiner
source

6

Il convient de noter que l'espacement des bordures ne semble fonctionner que si vous utilisez également cette propriété sur la table "border-collapse: distinct;"

— Blowsie

3

@Samir - Semble que ça float:right;fera l'affaire. jsfiddle.net/HGFH7

— drudge

70

Cela devrait résoudre votre problème:

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
source

Pour info: déplacé de stackoverflow.com/questions/10367387/…

— Shog9

13

Sur une table particulière

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

Développer l'extrait

— Xtian11
source

3

Alternativement, peut utiliser pour une table particulière

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

Ajouter ce css dans un fichier externe

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

— JaiSankarN
source

Pour info: déplacé de stackoverflow.com/questions/10367387/…

— Shog9

1

css en ligne non recommandé.

— Samuel Ramzan

Oui, tu as raison. je ne recommande pas. Nous allons pour le fichier CSS externe .ClassName {largeur: 100%; alignement du texte: centre; vertical-align: top;} Merci

— JaiSankarN