En las páginas HTML, los elementos de tipo <table> pueden definir dos atributos llamados cellpadding y cellspacing para controlar, respectivamente, el espacio de relleno de cada celda y la separación entre las celdas de la tabla. Ejemplo:
<table cellspacing="1" cellpadding="1">
¿Cómo se puede conseguir lo mismo que el cellpadding y el cellspacing usando exclusivamente CSS?
Respuestas
El cellpadding es muy sencillo de controlar con CSS, ya que sólo debes definir la propiedad padding de las celdas de la tabla. Ejemplo:
td { padding: 10px; }
El cellspacing no es tan sencillo, ya que debes definir dos propiedades diferentes. La primera es border-collapse, con la que puedes hacer que las celdas de una tabla se separen. La segunda es border-spacing, que sirve para establecer cuánto deben separarse:
table { border-spacing: 10px; border-collapse: separate; }
Lo bueno es que, a diferencia del atributo cellspacing, esta propiedad border-spacing permite definir por separado la separación horizontal y vertical de las celdas:
table { border-spacing: 10px 20px; border-collapse: separate; }
@javiereguiluz