2008-12-03 7 views
50

Je ne sais pas pourquoi cela me dérange tellement, 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 garder à l'esprit lorsque je travaille avec des tables est d'ajouter cellspacing = "0" et cellpadding = "0"Pourquoi les styles de cellules et cellpadding ne sont pas des styles CSS

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

Répondre

63

Cellspacing:

table { border-collapse: collapse; } 

Quant à cellpadding, vous pouvez le faire

table tr td, table tr th { padding: 0; } 
+1

Merci pour cela, je n'ai jamais vraiment compris ce que l'effondrement des frontières était censé signifier. Je vais devoir commencer à utiliser cela au lieu d'utiliser l'ancien attribut HTML. –

+0

Eh bien, sans border-collapse, s'il y a deux cellules adjacentes avec une bordure 1px chacune, vous aurez une bordure de 2px, parce que les bordures sont adjacentes, avec border-collapse, les bordures sont, bien, effondrées: - – mat

+17

Notez que 'border-collapse: collapse' produit un effet visuel complètement différent de' cellspacing = "0" '; les deux méthodes ne sont pas réellement équivalentes ou interchangeables de manière significative ou utile. – Martha

1
table { border-collapse:collapse; } 
0

Je suppose que l'espacement cellulaire considéré comme quelqu'un d'une « mauvaise pratique ». Comment je comprends que c'est équivalent inclus dans la norme CSS2 mais IE ne supporte pas cette propriété. border-collapse permet de définir l'espacement à 0. Le remplissage des cellules peut être obtenu en définissant la propriété de remplissage des éléments TD d'une table.

40
tapis

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

  • paddingcellpadding
  • border-spacingcellspacing
  • border-collapse → pas HTML équivalent

Il est également utile de rappeler que vous pouvez définir valeurs horizontales et verticales séparées pour les CSS, par exemple border-spacing: 0 1px.

+1

+1 pour l'espacement des bordures. border-collapse dans mon cas produit des bordures bizarres dans certaines tables, mais border-spacing: 0; fait en fait la même chose que l'attribut cellspacing = "0px" dans l'élément de table. – Ignas2526

8

Eric Myer de reset stylesheet contient les éléments suivants style 'reset' pour la table:

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

Dans TD outre, TR sont remis à zéro:

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 encore besoin de cellpadding = 0'. Je suppose qu'il a mis ceci ici pour une raison - probablement nécessaire par de vieux 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 commentaire seul! - Je continue d'utiliser cellspacing = "0" dans le balisage à moins que quelqu'un ne me dise définitivement (ci-dessous) pourquoi je n'ai pas besoin de le faire. Il pourrait cependant être inutile dans tout navigateur moderne qui mérite d'être soutenu ces jours-ci.

Questions connexes