2008-12-03 16 views
50

No sé por qué esto me molesta tanto, pero cuando creo sitios web, siempre trato de hacer todo mi estilo con CSS. Sin embargo, una cosa que siempre debo recordar cuando trabajo con tablas es agregar cellspacing = "0" y cellpadding = "0"¿Por qué CellSpacing y cellpadding no son estilos CSS

¿Por qué no hay una propiedad de CSS para anular estos atributos anticuados de HTML 4?

Respuesta

63

Cellspacing:

table { border-collapse: collapse; } 

En cuanto a cellpadding, puede hacerlo

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

Gracias por eso, nunca entendí realmente lo que se suponía que significaba un colapso de frontera. Tendré que empezar a usar eso en lugar de usar el antiguo atributo HTML. –

+0

Bueno, sin colapso de borde, si hay dos celdas adyacentes con un borde de 1px cada una, terminará teniendo un borde de 2px, porque los bordes son adyacentes, con colapso de borde, los bordes están, así, colapsados:) – mat

+17

Tenga en cuenta que 'border-collapse: collapse' produce un efecto visual completamente diferente que' cellspacing = "0" '; los dos métodos no son realmente equivalentes ni intercambiables de ninguna manera significativa o útil. – Martha

1
table { border-collapse:collapse; } 
0

supongo que alguien considerado celular espaciamiento de una “mala práctica”. Cómo entiendo que es equivalente incluido en el estándar CSS2 pero IE no admite esta propiedad. border-collapse permite establecer el espaciado a 0 valor. El relleno de celdas se puede lograr estableciendo la propiedad de relleno a elementos TD de una tabla.

40

estera ya ha respondido, pero simplemente para la corrección:

  • paddingcellpadding
  • border-spacingcellspacing
  • border-collapse → sin HTML equivalente

También vale la pena recordar que se puede establecer separar los valores horizontales y verticales para los CSS, por ejemplo border-spacing: 0 1px.

+1

+1 para el espacio entre los bordes. colapso de borde en mi caso produce bordes negrita extraños en algunas tablas, pero el espacio entre los bordes: 0; en realidad hace lo mismo que el atributo cellspacing = "0px" en el elemento de tabla. – Ignas2526

8

Eric Myer reset stylesheet contiene el estilo siguiente 'reset' para la tabla:

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

Además TD, TR se restablecen:

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

La razón por la que menciono esto es que tiene un comentario 'las tablas todavía necesitan cellpadding = 0'. Supongo que puso esto aquí por una razón, probablemente necesaria para algunos navegadores antiguos. A juzgar por el hecho de que este es uno de los pocos comentarios que incluyó, creo que es importante y que hay una buena razón para ello.

Basado en este comentario, ¡y este comentario solo! - Sigo usando cellspacing = "0" en el marcado a menos que alguien me diga definitivamente (debajo) por qué no necesito hacerlo. Sin embargo, podría ser innecesario en cualquier navegador moderno que valga la pena en estos días.

Cuestiones relacionadas