Si estamos definiendo una tabla con datos dentro de nuestra página web es fácil que queramos dar un color especial a esa última fila de la tabla. Ya que esa fila es la que se suele utilizar para indicar agregados o sumatorios de datos.
Pero, a la hora de dar color a la última fila de una tabla, tenemos que saber qué elemento HTML representa realmente la última fila. Es decir, ¿hay algún elemento que represente la última fila?
Si vemos una tabla normal creada con HTML podemos encontrarnos lo siguiente:
| Pieza | Cantidad |
|---|---|
| Mesa | 12 |
Es decir, las filas son todas representadas por el elemento TR. Por lo cual no vamos a poder encontrar diferencias entre la primera, una fila intermedia o la última fila.
En este caso podemos utilizar un selector en CSS que haga referencia a la última fila. El selector que hace referencia a las filas es:
table tr {
...
}
Al apoyarnos en el selector last-child() podemos hacer referencia al último elemento.
table tr:last-child {
...
}
Así solo nos quedará utilizar los atributos background-color y color para darle color a la última fila de una tabla.
table tr:last-child {
color: #fff;
background-color: #000;
}
Si utilizamos un código HTML un poco más avanzado podemos encontrarnos con el elemento tfoot. El elemento tfoot nos sirve para agrupar filas que representen el final de la tabla. Por ende podemos utilizar el elemento tfoot para recubrir a la última fila tr. De esta forma el código nos quedaría:
| Mesa | 12 |
| Total: | 43 |
Lo que hacemos es poner la última fila recubierta con el elemento tfoot. Si tenemos este código podremos dar color a la última fila de una tabla utilizando el selector tfoot.
table tfoot {
color: #fff;
background-color: #000;
}
Hay que tener en cuenta que si utilizamos una tabla que tenga definido el elemento tfoot no deberemos de combinarlo con el selector last-child. Ya que en este caso el last-child será el del cuerpo de la tabla, es decir la última fila antes de tener las filas del tfoot.
Ahora, ¿cuál de las dos formas de dar color a la última fila de una tabla vas a utilizar? Cuéntanoslo en los comentarios.
