Tablas con CSS

El objetivo de este artículo es conocer toda la estructura de una tabla, organizar el contenido y darle estilos fácilmente.

Estructura HTML de una tabla

Las tablas pueden componerse de varios elementos. Aunque no son obligatorios, es interesante utilizarlos para poder acceder a ellos desde las reglas CSS y darle un estilo diferenciado.

La cabecera o <thead> es ideal para colocar los nombres de las columnas.

En el cuerpo de la tabla o <tbody> se colocan los datos.

Y, en el pie de página de un tabla <tfoot> puedes mostrar un resultado, sumatorio o repetir los nombres de las columnas.

Fíjate en la siguiente estructura que uso en el ejemplo:

Source code

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellidos</th>
            <th>Edad</th>
            <th>Nómina</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Martin</td>
            <td>Gonzalez</td>
            <td>56</td>
            <td>2.560€</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Gonzalez</td>
            <td>56</td>
            <td>2.560€</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Gonzalez</td>
            <td>56</td>
            <td>2.560€</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Gonzalez</td>
            <td>56</td>
            <td>2.560€</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3">Total</th>
            <th class="text-center">7.680 €</th>
        </tr>
    </tfoot>
</table>

Como ves, esta estructura es la de una tabla completa con su cabecera, cuerpo y pie de página.

Con esto conseguimos el esqueleto de la tabla sin estilos y se vería así en el navegador:

Nada atractivo, ¿verdad?

¿Cómo darle estilos a la tabla con CSS?

Puedes aplicar las siguientes reglas de estillos con CSS:

Source code

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 800px;
    margin: 0px auto;
}
 
td, th {
    border: 1px solid #ccc;
    padding: 5px;   
}
 
tr:nth-child(even) {
    background-color: #eee;
}
 
td:nth-child(n + 3),
th:nth-child(n + 3) {
    text-align: center;
}
 
tbody tr:hover {
    background-color: aquamarine;
}
 
thead {
    background-color: black;
    color: white;
}

Donde al elemento <table> le quito el  espaciado de las celdas, establezco un borde fino, le doy un ancho y lo centro en el contenedor.

A las celdas en sí, le doy un borde sólido de color gris suave y le coloco un espaciado interior de 5px.

Con tr:nth-child(even) puedes iluminar las filas que sean pares.

Con td:nth-child(n + 3) estoy seleccionando aquellas columnas a partir de la tercera para, en este caso, centrar sus valores.

Con tbody tr:hover estoy dándole un color de fondo diferente cuando pase el ratón por encima.

Y, por último, le doy estilo a la cabecera para ponerle un fondo negro y el texto de color blanco.

Y conseguimos como resultado un aspecto bastante interesante:

Ahora está mejor ¿verdad?

Ver demo Descargar

Conclusiones

Esta es una de las formas más rápidas y óptimas de darle formato a una tabla hoy en día.

Existen infinidad de plugins o recursos que puedes usar para cambiar el aspecto de las tablas pero no dejan de tener infinidad de funciones que muchas de ellas seguro que ni necesitas.

Para algo sencillo, lo que se ilustra en esta entrada es más que suficiente.

En cualquier caso, me gustaría saber ¿Qué recursos utilizas para darle formato a una tabla en tus diseños?