El ancho de una tabla NO es la suma de los anchos de sus celdas.

Cuando dibujamos una tabla en HTML confiamos ciegamente en que las dimensiones que establecemos para la tabla y para cada una de las celdas sean respetadas por el navegador. Pero ¿cuántas veces nos hemos preocupado por realmente sacar la regla y confirmar que nuestra tabla de 200px de ancho mida exactamente los 200 pixeles?. Normalmente nunca es necesario tanta exactitud hasta que el layout de nuestra página se ve comprometido por alguna tabla con algunos pixeles de más. ¿De dónde vienen esos pixeles de más? ¿Por que la tabla no tiene las medidas que yo establezco en sus propiedades?.

Los factores pueden ser varios, pero el problema generalmente surge cuando asumimos que el ancho de la tabla es la suma del ancho de cada una de sus celdas, y subestimamos los valores que el navegador establece por default a los bordes, al modo de los bordes (colapsados o separados), al modo de la tabla (fixed o auto), al padding de las celdas, y a los márgenes. Todos estos elementos (excepto los márgenes), afectan el ancho total de la tabla, y muchas veces olvidamos tomarlos en cuenta para considerar el ancho total. Como ejemplo tenemos el siguiente código básico que genera una tabla de dos líneas y tres columnas. He agregado unos estilos a dicha tabla para colorear el fondo de la tabla y el fondo de las celdas y visualizar más fácilmente dónde empieza y termina cada elemento.

<table> <tr> <td>Celda 1.1</td> <td>Celda 1.2</td> <td>Celda 1.3</td> </tr> <tr> <td>Celda 2.1</td> <td>Celda 2.2</td> <td>Celda 2.3</td> </tr> </table> <style> table { background-color: #99CCFF; } td { background-color: #FFFFCC; } </style>

La diferencia entre los anchos de esta tabla se debe a que cada navegador tiene una fuente y tamaño por default. Recordemos que las tablas se ensancharán el mínimo espacio necesario para mostrar el contenido de sus celdas, por eso tenemos que los navegadores con fuentes por default más pequeñas, mostrarán celdas más angostas. Empecemos a cambiar el ancho de la tabla por medio de los estilos:

Definiendo el ancho en el elemento <table>

<table> <tr> <td>Celda 1.1</td> <td>Celda 1.2</td> <td>Celda 1.3</td> </tr> <tr> <td>Celda 2.1</td> <td>Celda 2.2</td> <td>Celda 2.3</td> </tr> </table> <style> table { background-color: #99CCFF; width: 240px; } td { background-color: #FFFFCC; } </style>

Cuando definimos el ancho en el elemento <table> no parece haber ningún tipo de problema en ninguno de los navegadores. Nuestra tabla mide los 240 pixeles que establecimos. Por lógica, podríamos deducir que si le ponemos a cada celda un ancho de 80 pixeles, el resultado sería exactamente lo mismo, pues tres celdas de 80 pixeles por fuerza tendrían que darnos una tabla de 240 pixeles. Veamos lo que pasa:

Definiendo el ancho en cada celda <td>

<table> <tr> <td>Celda 1.1</td> <td>Celda 1.2</td> <td>Celda 1.3</td> </tr> <tr> <td>Celda 2.1</td> <td>Celda 2.2</td> <td>Celda 2.3</td> </tr> </table> <style> table { background-color: #99CCFF; } td { background-color: #FFFFCC; width: 80px; } </style>

¡¡La tabla ya no mide los 240 pixeles!! ¿De dónde salieron estos 14 pixeles extras?. La respuesta está en los valores que por default le establece el navegador a las tablas. Estos valores por default pueden variar de navegador a navegador, pero al parecer Internet Explorer y Firefox le establecen los mismos valores por default y podemos enunciar que:

• Las celdas de las tablas tienen por default un padding de 1px (cellpadding).
• Las celdas de las tablas se separan por default unas de otras 2px (cellspacing).

Si no conocemos estos valores, podemos terminar con tablas que pensamos que tienen un ancho, pero que en realidad son más grandes. Te estarás preguntando quizás, por qué cuando definimos el ancho en la tabla, éste si se mantuvo. El motivo es que al definir un ancho en la tabla y no en las celdas, la tabla usa (o más bien sacrifica) el espacio interno de las celdas (si es que el contenido de la celda no está muy justo y lo permite).

En nuestro ejemplo, cuando definimos el ancho de la tabla a 240 pixeles, en realidad las celdas terminaron midiendo 75 o 76 pixeles en lugar de 80 pixeles cada una. Podríamos decir que la tabla le quitó a cada celda unos pixeles para acomodar los pixeles que se necesitaban para el cellspacing y el cellpadding.

Cuando el ancho se establece para las celdas, la tabla no tiene otra mas que ensancharse para acomodar los pixeles del cellpadding y del cellspacing que las tablas tienen por default, pero entonces... ¿cómo quitamos este cellpadding y cellspacing?.

Removiendo los espacios por default

Para quitar estos extra-pixeles que la tabla le añade al ancho total tenemos dos opciones:

1. Utilizar los atributos cellpadding="0" y cellspacing="0" en el elemento <table>.
   La tabla quedaría como: <table cellpadding="0" cellspacing="0">. Esta solución sería la más simplista, pero estaríamos mezclando el contenido del documento HTML con instrucciones de presentación, lo cuál no se recomienda. Lo ideal es tener un documento HTML semánticamente bien formado y todas las instrucciones de presentación establecerlas en un archivo CSS por separado.
2. Usar propiedades de CSS.
   Si conoces algo de CSS, sabrás que no existe ninguna propiedad cellpadding ni cellspacing que pudieramos establecer en cero para hacer desaparecer los espacios. Sin embargo, aquí entran en accion dos propiedades CSS que te pueden ayudar para que la suma de los anchos de cada celda, sea el ancho total de la tabla.

padding y border-collapse

El cellpadding, como su propio nombre lo dice, no es otra cosa mas que padding en cada una de las celdas de la tabla, así que modificando nuestros estilos y poniendo padding: 0; para cada <td> ¡voila!.. tenemos cellpadding="0".

El espaciado entre cada celda en realidad se debe a que la tabla por default viene en un modo de bordes separados, es decir que cada celda cuenta con la capacidad de tener su propio bordecito. Los diferentes modos de bordes en las tablas lo trataré en otro articulo, pero por ahora sólo intenta cambiar el modo de la tabla a bordes colapsados, lo cual se logra con la propiedad border-collapse: collapse; en el elemento <table>. Veamos cómo se ve ahora nuestra tabla de ejemplo:

<table> <tr> <td>Celda 1.1</td> <td>Celda 1.2</td> <td>Celda 1.3</td> </tr> <tr> <td>Celda 2.1</td> <td>Celda 2.2</td> <td>Celda 2.3</td> </tr> </table> <style> table { background-color: #99CCFF; border-collapse: collapse; } td { background-color: #FFFFCC; width: 80px; padding: 0; } </style>

Nota que el ancho se definió en cada celda como 80 pixeles, y la suma de las tres columnas ahora si dan 240 pixeles de ancho para toda la tabla. Hemos eliminado el espacio que por default el navegador le pone a las tablas. La división entre celdas ya no es visible, porque las celdas han ocupado todo el espacio disponible de la tabla, y por eso el color azul de fondo de la tabla ya no se ve. 

Para resumir, sólo recuerda que NO es lo mismo establecer el ancho de una tabla en el elemento <table>, que en cada una de las celdas. De hecho, hay que tener mucho cuidado en no caer en propiedades contradictorias, como poner el ancho de 240 pixeles en la tabla y el ancho de 80 pixeles en cada celda sin remover los espacios por default. Cuando sucede este tipo de situaciones, el ancho de la tabla tiene precedencia sobre el ancho de las celdas, así que la tabla quedaría de 240 pixeles. En otro artículo veremos más sobre cómo se distribuye el ancho total de la tabla entre cada una de las columnas que la conforman.