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?

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

Réponses:

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