Cellpadding es un atributo HTML utilizado en la etiqueta ‘table’. Este atributo establece el espacio entre el contenido de una celda y su borde. Es opción es útil cuando creas tablas. Y es que el contenido se visualiza mejor. Además, es mucho más legible y atractivo para el lector.
En este artículo, explicaré cómo utilizar el atributo ‘cellpadding’. También te daré ejemplos para que mejores la apariencia y usabilidad de tus tablas HTML.
¡Vamos allá!
Índice de Contenidos
¿Qué es atributo cellpadding en tablas HTML?
Como comentaba, cellpadding es un atributo de la etiqueta HTML ‘table’. Se trata de uno de los atributos más útiles de las tablas, ya que separa el contenido de las celdas. De esta manera, se le da un poco de «aire» al diseño de la tabla.
El valor de cellpadding se especifica en píxeles. Un valor con el que puedes ajustar a tu gusto esa separación para conseguir el aspecto que desees.
Por ejemplo, si quieres que haya 10 píxeles de espacio entre el contenido de las celdas y sus bordes, puedes utilizar el siguiente texto HTML:
<table cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
A la hora de aplicar el atributo ‘cellpadding’, tienes que tener en cuenta que se aplica a todas las celdas de la tabla. Es decir, no se personaliza. Por ello, ten muy en cuenta que no sea demasiado grande o pequeño para ninguno de los valores que vayas a añadir.
Al final de este artículo puedes ver y experimentar con diferentes tablas HTML y su ‘cellpadding’.
¿Es recomendable usar el cellpadding en HTML?
Durante mucho tiempo, la manera más utilizada de establecer el cellpadding ha sido en HTML. Sin embargo, en lugar de utilizar cellpadding, se recomienda utilizar estilos CSS para controlar el diseño de las tablas y cualquier otro aspecto que tenga que ver con los estilos. Y es que esto permite un mayor control y flexibilidad. Además, es más consistente con las buenas prácticas de diseño web modernas.
Aquí te resumo en 4 puntos por qué debes usar CSS y no HTML a la hora de definir el ‘cellpadding’ o cualquier otro elemento de estilo:
- Separación de contenido y presentación: Modificando el cellpadding en HTML combinas contenido y estilo. Esto dificulta el mantenimiento y escalabilidad del sitio web. Al utilizar CSS, separas ese contenido del estilo. Así, realizar cambios en un futuro te será mucho más fácil.
- Mayor flexibilidad: Si utilizas CSS, defines los estilos para diferentes dispositivos o tamaños de pantalla. Esto da más flexibilidad en el diseño. También mejora la experiencia de usuario en diferentes dispositivos.
- Mejora el rendimiento: Si usas CSS para definir los estilos, mejoras el rendimiento de tu web. Y es que evitas que se descargue y procese información innecesaria en el HTML.
- Mejora la accesibilidad: Al utilizar CSS para definir el cellpadding, puedes hacer ajustes para mejorar la accesibilidad para usuarios con discapacidades visuales, usando técnicas como media queries.
Por ello, en los próximos párrafos te enseño a cómo definir el ‘cellpadding’ con CSS, para que no tengas que hacerlo con HTML.
Definir un cellpadding con CSS
Para definir un cellpadding con CSS, puedes utilizar la propiedad ‘padding’ en un estilo aplicado a las celdas de la tabla (td). Por ejemplo, si quieres que haya 10 píxeles de espacio entre el contenido de las celdas y sus bordes en toda la tabla, puedes utilizar el siguiente estilo:
td {
padding: 10px;
}
Este estilo se aplicará a todas las celdas de la tabla. Pero también se puede personalizar mucho más.
Si lo que quieres es aplicar un estilo diferente a una tabla específica o a un conjunto de celdas, puedes utilizar un selector más específico. Recuerda que, para ello, tienes que aplicar una clase concreta a las celdas a las que quieras cambiar ese estilo. Por ejemplo:
/* Para modificar el cellpadding de una tabla en concreto: */
.tabla1 td {
padding: 10px;
}
/* Para modificar el cellpadding de solo una celda: */
.celda1 {
padding: 10px;
}
También es posible utilizar el ‘padding’ con otras propiedades CSS. De esta manera, podrás controlar el espacio entre el texto y el borde de la celda de forma más detallada.
También puedes utilizarlo para establecer un ‘padding’ diferente para cada lado de la celda. Se puede hacer de la siguiente manera, utilizando estas cuatro propiedades:
td {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 20px;
}
Atributo cellpadding en tablas HTML: ejemplos
En estos ejemplos interactivos puedes ver un ejemplo de cada uno de los casos que hemos tratado en todo el artículo. Además, puedes modificar los pixeles que desees en cada uno de los ‘padding’, para que tú mismo compruebes cómo cambia el estilo de las tablas.
See the Pen Cellpadding en HTML by HTML Masters (@htmlmasters) on CodePen.
Conclusión
En conclusión, el atributo cellpadding de HTML es una forma de establecer el espacio entre el contenido de una celda y su borde en una tabla. Es útil para mejorar la legibilidad y la atractividad visual de una tabla, pero es importante tener en cuenta que también afecta al tamaño de la tabla y de las celdas.
En todo caso, en lugar de utilizar ‘cellpadding’, es recomendable utilizar estilos CSS para controlar el diseño de las tablas. Y es que esto permite un mayor control y flexibilidad. Además, es más consistente con las buenas prácticas de diseño web modernas.
Espero que te haya quedado claro cómo hacer más bonitas y legibles tus tablas HTML. ¡Nos vemos en la próxima!
