web-dev-qa-db-fra.com

Pourquoi l'espacement des cellules et le remplissage des cellules ne sont-ils pas des styles CSS

Je ne sais pas pourquoi cela me dérange autant, mais quand je crée des sites Web, j'essaie toujours de faire tout mon style avec CSS. Cependant, une chose que je dois toujours me rappeler de faire lorsque je travaille avec des tableaux est d'ajouter cellspacing = "0" et cellpadding = "0"

Pourquoi n'y a-t-il pas une propriété CSS pour remplacer ces attributs HTML 4 désuets?

htmlcsshtml-tablecellpaddingcellspacing
50
Ryan Smith

Cellspacing :

table { border-collapse: collapse; }

Quant à cellpadding , vous pouvez le faire

table tr td, table tr th { padding: 0; }
63
mat

mat a déjà répondu, mais juste pour être complet:

  • padding → cellpadding
  • border-spacing → cellspacing
  • border-collapse → pas d'équivalent HTML

Il convient également de se rappeler que vous pouvez définir des valeurs horizontales et verticales distinctes pour celles CSS, par exemple border-spacing: 0 1px.

41
user42092

Eric Myer réinitialiser la feuille de style contient le style de réinitialisation suivant pour le tableau:

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

De plus TD, TR sont réinitialisés:

thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

La raison pour laquelle je mentionne cela est qu'il a un commentaire "les tables ont toujours besoin de cellpadding = 0". Je suppose qu'il l'a mis ici pour une raison - probablement requise par certains anciens navigateurs. À en juger par le fait que c'est l'un des très rares commentaires qu'il a inclus, je suppose que c'est important et qu'il y a une bonne raison à cela.

Basé sur ce commentaire - et ce seul commentaire! - Je continue d'utiliser cellspacing = "0" dans le balisage à moins que quelqu'un ne me dise définitivement (ci-dessous) pourquoi je n'en ai pas besoin. Cela pourrait cependant être inutile dans tout navigateur moderne qui mérite d'être supporté de nos jours.

8
Simon_Weaver
table { border-collapse:collapse; }
1
Jimmy

Je suppose que quelqu'un considérait l'espacement des cellules comme une "mauvaise pratique". Comment je comprends qu'il est équivalent inclus dans la norme CSS2 mais IE ne prend pas en charge cette propriété. Border-collapse permet de définir l'espacement à la valeur 0. Le remplissage des cellules peut être atteint en définissant la propriété padding sur TD éléments d'une table.

0
Din