# Table Styling en HTML: cómo dar formato a tus tablas HTML HTML Table Styling se refiere al diseño gráfico de las tablas web. Para el formato puedes utilizar códigos CSS que se integran directamente en el documento HTML o mediante una referencia a un archivo CSS externo. ## ¿Cómo se puede dar formato a tablas HTML? Para HTML Table Styling, es decir, la personalización del estilo de las tablas HTML, puedes utilizar las opciones de CSS en el diseño web moderno. Utilizando el lenguaje de hojas de estilo, puedes cambiar la **apariencia de los elementos de contenido de la tabla** prácticamente a tu gusto. Por ejemplo, puedes definir colores de fondo personalizados para las celdas o un grosor especial para el marco. Dispones de tres opciones diferentes para integrar el código CSS apropiado y así dar formato a una tabla HTML: - **Inclusión en el área ``:** Los estilos CSS deseados se incluyen con la [HTML tag](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/html-tags/) `
Columna 1 Columna 2 Columna 3 Columna 4
Entrada 1 Entrada 2 Entrada 3 Entrada 4
Entrada 5 Entrada 6 Entrada 7 Entrada 8
Entrada 9 Entrada 10 Entrada 11 Entrada 12
Entrada 13 Entrada 14 Entrada 15 Entrada 16
``` [![Imagen: Formateo tabla HTML: ejemplo](https://www.ionos.com/es-us/digitalguide/fileadmin/_processed_/9/1/csm_html-table-styling_ejemplo-formato-tabla-html_84ca6e5265.webp "Formateo tabla HTML: ejemplo")](https://www.ionos.com/es-us/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-table-styling_ejemplo-formato-tabla-html.png) La tabla de ejemplo con formato sencillo muestra la fila de encabezado del color deseado y a continuación los colores de fila que se alternan. ### Table Styling en HTML mediante una hoja CSS Diseñar el estilo de tablas HTML mediante una hoja CSS externa es la mejor manera posible de separar contenido y diseño. Además, las instrucciones son especialmente fáciles de repetir para otras páginas. Como los navegadores pueden almacenar en caché el archivo CSS, también se puede optimizar el **tiempo de carga**. Sin embargo, esta variante a veces lleva demasiado tiempo para los proyectos web más pequeños. En este caso, lleva a cabo el ejemplo anterior en dos pasos diferentes. En primer lugar, crea un archivo CSS llamado `styles.css`, que se almacenará en el mismo directorio en el que se encuentra la página web, e inserta allí el siguiente código: ```css thead th { background-color: #4CAF50; / *Verde para la cabecera de la tabla* / } tbody tr:nth-child(odd) { background-color: #f2f2f2; / *Fondo gris claro para las filas impares* / } tbody tr:nth-child(even) { background-color: #ffffff; / *Fondo blanco para las líneas pares* / } ``` En el segundo paso, incluye el archivo en la cabecera mediante un elemento ``. El código posterior de la tabla no cambia: ```html … ``` ### Diseñar tabla HTML mediante código inline El CSS inline es la opción más práctica si solo quieres realizar **ajustes específicos** en un único elemento de la tabla. Por lo tanto, esta opción es ideal para pequeños proyectos o pruebas puntuales en las que la reutilización no es importante. Sin embargo, para escenarios de código más sostenibles, se recomienda utilizar siempre uno de los otros dos tipos de incrustación. El estilo inline se realiza directamente en los elementos pertinentes de una tabla HTML. En el ejemplo, el código sería el siguiente: ```html
Columna 1 Columna 2 Columna 3 Columna 4
Entrada 1 Entrada 2 Entrada 3 Entrada 4
Entrada 5 Entrada 6 Entrada 7 Entrada 8
Entrada 9 Entrada 10 Entrada 11 Entrada 12
Entrada 13 Entrada 14 Entrada 15 Entrada 16
``` This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/html-table-styling/](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/html-table-styling/) for AI/LLM consumption.