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 <head>: Los estilos CSS deseados se incluyen con la HTML tag <style> directamente en el área de cabecera de un documento HTML.
  • Archivo CSS externo: Otra opción es utilizar un archivo CSS independiente, que se integra mediante la etiqueta <link> en el área <head> del documento HTML.
  • CSS inline: También puedes utilizar style para aplicar Table Styling en HTML directamente en el elemento de la tabla. Sin embargo, esto solo se recomienda en casos particulares en los que la reutilización y el mantenimiento sencillo del código no sean importantes.
Consejo

Descubre en detalle cómo integrar CSS en HTML en nuestro artículo adicional.

¿Qué opciones de estilo están disponibles para las tablas HTML?

Hay una gran variedad de propiedades CSS que puedes utilizar para mejorar la apariencia y usabilidad de las tablas en los documentos web. Por ejemplo, puedes cambiar las propiedades básicas de las tablas con los siguientes códigos CSS:

  • width: define el ancho de la tabla o de columnas individuales
  • border: define el ancho, el estilo y el color del borde
  • border-collapse: controla si los bordes de las celdas están combinados (collapse) o separados (separate)
  • border-spacing: determina la distancia entre las celdas cuando se utiliza border-collapse: separate

A continuación, se presentan, de forma resumida y ordenadas por categorías, algunas de las opciones de Table Styling en HTML más importantes.

Espaciado entre celdas y alineación del texto

Código CSS Descripción
padding Añade espacio dentro de las celdas
margin Añade espacio por toda la tabla
text-align Determina la alineación horizontal del texto de las celdas (left, center, right)
vertical-align Determina la alineación vertical del contenido de las celdas (top, middle, bottom

Colores e imagen de fondo

Código CSS Descripción
background-color Define el color de fondo de las celdas, las filas o de toda la tabla
color Define el color del texto
background-image Determina la imagen de fondo de las celdas o de toda la tabla

Fuentes y tamaño de fuente

Código CSS Descripción
font-family Determina el tipo de letra
font-size Determina el tamaño de la fuente
font-weight Determina el peso de la fuente (por ejemplo, bold para texto en negrita)
text-transform Controla las mayúsculas y minúsculas del texto (uppercase, lowercase, capitalize)

Borde de la tabla

Código CSS Descripción
border-style Define el estilo del borde (solid, dashed, dotted)
border-width Determina el grosor del borde
border-color Determina el color del borde de la tabla

Table Styling en HTML: cómo funciona (con ejemplos)

Por último, se muestra la sintaxis y funcionalidad de las tres variantes posibles para cambiar el estilo de tablas HTML mediante ejemplos prácticos. También se analizan brevemente las ventajas y desventajas de las distintas opciones.

Formateo de tablas HTML en el área <head>

El estilo CSS de las tablas en el área de cabecera es especialmente práctico para pequeños proyectos y cambios rápidos. No necesitas una hoja de estilo adicional ni reglas mediante ID para determinar a qué tablas se deben aplicar las instrucciones. Sin embargo, las características solo se aplican a la página web correspondiente, lo que no favorece su reutilización y mantenimiento.

Incluye el código CSS deseado en el área de cabecera utilizando un elemento <style>. En el siguiente ejemplo, se especifica que la fila de cabecera de la tabla debe tener un fondo verde, mientras que las demás filas deben tener fondos gris claro y blanco alternativamente:

<html> 
<head> 
    <style> 
        table { 
        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* / 
        } 
    </style> 
</head> 
<body> 
    <table> 
        <thead> 
            <tr> 
                <th>Columna 1</th> 
                <th>Columna 2</th> 
                <th>Columna 3</th> 
                <th>Columna 4</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>Entrada 1</td> 
                <td>Entrada 2</td> 
                <td>Entrada 3</td> 
                <td>Entrada 4</td> 
            </tr> 
            <tr> 
                <td>Entrada 5</td> 
                <td>Entrada 6</td> 
                <td>Entrada 7</td> 
                <td>Entrada 8</td> 
            </tr> 
            <tr> 
                <td>Entrada 9</td> 
                <td>Entrada 10</td> 
                <td>Entrada 11</td> 
                <td>Entrada 12</td> 
            </tr> 
            <tr> 
                <td>Entrada 13</td> 
                <td>Entrada 14</td> 
                <td>Entrada 15</td> 
                <td>Entrada 16</td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
</html>
html
Imagen: Formateo tabla HTML: ejemplo
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:

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* / 
}
css

En el segundo paso, incluye el archivo en la cabecera mediante un elemento <link>. El código posterior de la tabla no cambia:

<html> 
<head> 
        <link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
    <table> 
        <thead> 
            <tr> 
… 
</html>
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:

<body> 
    <table> 
        <thead> 
            <tr> 
                <th style="background-color: #4CAF50;">Columna 1</th> 
                <th style="background-color: #4CAF50;">Columna 2</th> 
                <th style="background-color: #4CAF50;">Columna 3</th> 
                <th style="background-color: #4CAF50;">Columna 4</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr style="background-color: #f2f2f2;"> 
                <td>Entrada 1</td> 
                <td>Entrada 2</td> 
                <td>Entrada 3</td> 
                <td>Entrada 4</td> 
            </tr> 
            <tr> 
                <td>Entrada 5</td> 
                <td>Entrada 6</td> 
                <td>Entrada 7</td> 
                <td>Entrada 8</td> 
            </tr> 
            <tr style="background-color: #f2f2f2;"> 
                <td>Entrada 9</td> 
                <td>Entrada 10</td> 
                <td>Entrada 11</td> 
                <td>Entrada 12</td> 
            </tr> 
            <tr> 
                <td>Entrada 13</td> 
                <td>Entrada 14</td> 
                <td>Entrada 15</td> 
                <td>Entrada 16</td> 
            </tr> 
        </tbody> 
    </table> 
</body>
html
¿Le ha resultado útil este artículo?
Ir al menú principal