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 di­re­c­ta­me­n­te en el documento HTML o mediante una re­fe­re­n­cia a un archivo CSS externo.

¿Cómo se puede dar formato a tablas HTML?

Para HTML Table Styling, es decir, la pe­r­so­na­li­za­ción del estilo de las tablas HTML, puedes utilizar las opciones de CSS en el diseño web moderno. Uti­li­za­n­do el lenguaje de hojas de estilo, puedes cambiar la apa­rie­n­cia de los elementos de contenido de la tabla prá­c­ti­ca­me­n­te a tu gusto. Por ejemplo, puedes definir colores de fondo pe­r­so­na­li­za­dos para las celdas o un grosor especial para el marco. Dispones de tres opciones di­fe­re­n­tes 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> di­re­c­ta­me­n­te en el área de cabecera de un documento HTML.
  • Archivo CSS externo: Otra opción es utilizar un archivo CSS in­de­pe­n­die­n­te, 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 di­re­c­ta­me­n­te en el elemento de la tabla. Sin embargo, esto solo se re­co­mie­n­da en casos pa­r­ti­cu­la­res en los que la re­uti­li­za­ción y el ma­n­te­ni­mie­n­to sencillo del código no sean im­po­r­ta­n­tes.
Consejo

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

¿Qué opciones de estilo están di­s­po­ni­bles para las tablas HTML?

Hay una gran variedad de pro­pie­da­des CSS que puedes utilizar para mejorar la apa­rie­n­cia y usa­bi­li­dad de las tablas en los do­cu­me­n­tos web. Por ejemplo, puedes cambiar las pro­pie­da­des básicas de las tablas con los si­guie­n­tes códigos CSS:

  • width: define el ancho de la tabla o de columnas in­di­vi­dua­les
  • border: define el ancho, el estilo y el color del borde
  • border-collapse: controla si los bordes de las celdas están co­m­bi­na­dos (collapse) o separados (separate)
  • border-spacing: determina la distancia entre las celdas cuando se utiliza border-collapse: separate

A co­n­ti­nua­ción, se presentan, de forma resumida y ordenadas por ca­te­go­rías, algunas de las opciones de Table Styling en HTML más im­po­r­ta­n­tes.

Espaciado entre celdas y ali­nea­ción del texto

Código CSS De­s­cri­p­ción
padding Añade espacio dentro de las celdas
margin Añade espacio por toda la tabla
text-align Determina la ali­nea­ción ho­ri­zo­n­tal del texto de las celdas (left, center, right)
vertical-align Determina la ali­nea­ción vertical del contenido de las celdas (top, middle, bottom

Colores e imagen de fondo

Código CSS De­s­cri­p­ció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 De­s­cri­p­ció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 ma­yú­s­cu­las y mi­nú­s­cu­las del texto (uppercase, lowercase, capitalize)

Borde de la tabla

Código CSS De­s­cri­p­ció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 fu­n­cio­na­li­dad de las tres variantes posibles para cambiar el estilo de tablas HTML mediante ejemplos prácticos. También se analizan bre­ve­me­n­te las ventajas y de­s­ve­n­ta­jas de las distintas opciones.

Formateo de tablas HTML en el área <head>

El estilo CSS de las tablas en el área de cabecera es es­pe­cia­l­me­n­te práctico para pequeños proyectos y cambios rápidos. No necesitas una hoja de estilo adicional ni reglas mediante ID para de­te­r­mi­nar a qué tablas se deben aplicar las in­s­tru­c­cio­nes. Sin embargo, las ca­ra­c­te­rí­s­ti­cas solo se aplican a la página web co­rre­s­po­n­die­n­te, lo que no favorece su re­uti­li­za­ción y ma­n­te­ni­mie­n­to.

Incluye el código CSS deseado en el área de cabecera uti­li­za­n­do un elemento <style>. En el siguiente ejemplo, se es­pe­ci­fi­ca 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 al­te­r­na­ti­va­me­n­te:

<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 en­ca­be­za­do del color deseado y a co­n­ti­nua­ció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 in­s­tru­c­cio­nes son es­pe­cia­l­me­n­te fáciles de repetir para otras páginas. Como los na­ve­ga­do­res 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 di­fe­re­n­tes. En primer lugar, crea un archivo CSS llamado styles.css, que se al­ma­ce­na­rá en el mismo di­re­c­to­rio 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 es­pe­cí­fi­cos 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 re­uti­li­za­ción no es im­po­r­ta­n­te. Sin embargo, para es­ce­na­rios de código más so­s­te­ni­bles, se re­co­mie­n­da utilizar siempre uno de los otros dos tipos de in­cru­s­ta­ción.

El estilo inline se realiza di­re­c­ta­me­n­te en los elementos pe­r­ti­ne­n­tes 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
Ir al menú principal