html - tbody - ¿Es necesario agregar cellpacing="0" cellpadding="0" en<table>?

javascript add tbody to table

Question

Eric Meyer reset css sugiere que "las tablas aún necesitan ''cellspacing =" 0 "'' en el marcado". ¿Es necesario? y cuál es el beneficio del border-collapse: collapse de la border-collapse: collapse ; y border-spacing: 0; ?

y solo sugiere el uso de espacios de celdas, mientras que la tabla tiene otra propiedad llamada cellpadding?

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

Answer 1

Hay dos tipos de bordes en una tabla, la tabla en sí puede tener bordes (bordes exteriores y bordes entre celdas), y cada celda puede tener bordes alrededor de ellos.

Usando border-collapse: collapse; significa que dos celdas con la misma configuración de borde una al lado de la otra solo obtendrán un único conjunto de bordes en lugar de un doble, por ejemplo, el borde derecho de una celda se colapsará con el borde izquierdo en la siguiente celda de la fila.

No hay ningún estilo CSS para el borde de la tabla entre las celdas hasta CSS 2, por lo que debe desactivarse mediante el atributo HTML cellspacing="0" en la tabla para admitir navegadores más antiguos como IE 7 *. Si hay bordes de tabla entre las celdas, el colapso del borde, naturalmente, no funcionará ya que los bordes no están uno al lado del otro.

_{* Realmente disfruté la sensación de llamar a IE 7 un "navegador antiguo";)}

Answer 2

Internet Explorer 6 y 7, y probablemente otros exploradores anteriores, no reconocen el atributo de border-spacing los border-spacing y, como tal, sugiere que también proporcione los valores en el HTML.

Echa un vistazo a la tabla de compatibilidad en SitePoint

Answer 3

cellpadding se sugiere el uso de cellpadding porque la propiedad css del padding anula suficientemente las propiedades predeterminadas para el cellpadding tabla de cellpadding . Como dice la otra respuesta, no hay una propiedad CSS compatible para el cellspacing de cellspacing en navegadores más antiguos, dejando un atributo HTML como la única forma de "restablecer" completamente esta configuración a 0. border-spacing: 0; se encarga de esto para los navegadores que lo soportan.

En cuanto border-collapse de border-collapse , de forma predeterminada, cada celda de la tabla tiene su propio borde, y el collapse fusionará los bordes entre las celdas adyacentes, dando la apariencia de una cuadrícula (generalmente de un solo píxel), que no se puede lograr de otra manera cuando cellspacing="0" . Antes de que se cellspacing="1" border-collapse , esta es la razón por la que vería tablas con cellspacing="1" y un color de fondo en la tabla, y fondos blancos en las celdas de la tabla.

border-collapse:collapse; está en reset.css simplemente porque es el resultado deseado más común. Si no desea este modo, estaría bien eliminarlo de reset.css.