Los encabezados de las tablas suelen contener la información semántica relativa al contenido de las tabla. Es por ello que muchas veces nos interese tener un color del encabezado en una tabla HTML, el cual sea diferente al resto de la tabla.
Para definir el color del encabezado en una tabla HTML lo primero que tenemos es que definir una tabla y entender qué es el encabezado dentro de una tabla.
Echemos un vistazo a esta tabla:
| País | Capital | Superficie | Habitantes |
|---|---|---|---|
| España | Madrid | 504.645 km2 | 46,6 M |
Como puedes ver la cabecera se puede identificar de dos formas. Por un lado mediante las celdas th. Estas celdas son diferentes a las celdas normales td y se utilizan en el encabezado de la tabla.
Por otro tenemos el agrupador thead. Este permite agrupar a varias filas que puedan representar al encabezado de la tabla. Recuerda que el encabezado no tiene por qué ser una única fila.
Es por ello que al definir el color del encabezado en una tabla HTML lo mejor será dar estilos al elemento thead.
table thead {
color: #fff;
background-color: #f00;
}
El atributo backgorund-color nos permite dar el color al fondo de la celda y el atributo color nos permite dar color al texto.
De igual forma será valido para dar color del encabezado en una tabla HTML el código que de estilo al elemento th.
table th {
color: #fff;
background-color: #f00;
}
Y si la persona que ha codificado la tabla no ha utilizado ni el elemento thead ni el elemento th siempre podremos recurrir al pseudoelemento de CSS first-child. este pseudoelemento selecciona el primer elemento de una lista de elementos. De esta forma si seleccionamos todas las filas o tr y luego first-child, obtendremos la primera fila de la tabla.
table tr:first-child {
color: #fff;
background-color: #f00;
}
