A la hora de definir una cabecera en tabla HTML tenemos que conocer dos elementos del lenguaje HTML. El primer elemento es thead. thead es un elemento agrupador de celdas, estas celdas serán las que conformen una cabecera en tabla HTML. El segundo de los elementos será th. En este caso th representa a una celda independiente que es una cabecera en sí misma.
Como ejemplo y para mostrar de una forma sencilla que sería la cabecera en tabla HTML vamos a ver la siguiente tabla…
| Cabecera 1 | Cabecera 2 | Cabecera 3 |
|---|---|---|
| Celda 1.1 | Celda 1.2 | Celda 1.3 |
| Celda 2.1 | Celda 2.2 | Celda 2.3 |
| Celda 3.1 | Celda 3.2 | Celda 3.3 |
Como podemos apreciar, los elementos Cabecera 1, 2 y 3 serán aquellos que formen la cabecera en tabla HTML.
Pero veamos como utilizar los elementos thead y th para conseguir estos efectos.
Agrupado una cabecera en tabla HTML con thead
Cuando creamos una tabla en HTML utilizamos como base el elemento table. Después vamos a ir añadiendo las filas mediante elementos tr y td. Es decir una tabla básica sería algo así:
| Celda 1.1 | Celda 1.2 | Celda 1.3 |
| Celda 2.1 | Celda 2.2 | Celda 2.3 |
| Celda 3.1 | Celda 3.2 | Celda 3.3 |
Lo que nos va a permitir el elemento thead es agrupar una serie de elementos, para indicar que estos elementos son la cabecera. Estos elementos no dejarán de ser una o varias líneas, dependiendo de lo compleja que sea nuestra cabecera.
Utilizaremos el elemento thead de la siguiente forma:
| Cabecera 1 | Cabecera 2 | Cabecera 3 |
| Celda 1.1 | Celda 1.2 | Celda 1.3 |
| Celda 2.1 | Celda 2.2 | Celda 2.3 |
| Celda 3.1 | Celda 3.2 | Celda 3.3 |
De esta forman hemos identificado que la primera línea de celdas delimitada por el elemento tr es la cabecera. Visualmente, los navegadores ante esta situación no hacen ningún cambio de aspecto visual, es más una información semántica.
Definiendo celdas de cabecera con th
Si queremos realmente dar más información sobre la cabecera en tabla HTML deberemos de definir celdas que sean de tipo th.
Las celdas de una tabla se definen con el elemento td. Si bien, si queremos hacer que las celdas representen a una cabecera deberemos definirlas de la misma forma, pero utilizando el elemento th.
Es decir el código sería el siguiente:
| Cabecera 1 | Cabecera 2 | Cabecera 3 |
|---|
Importante destacar que los navegadores web suelen resaltar en negrita los elementos que se encuentran dentro de los elementos th. Si bien, recomendamos que utilices CSS para darle forma a las cabeceras.
Si ahora combinamos los elementos thead y th para crear una cabecera en tabla HTML nos quedaría el siguiente código:
| Cabecera 1 | Cabecera 2 | Cabecera 3 |
|---|---|---|
| Celda 1.1 | Celda 1.2 | Celda 1.3 |
| Celda 2.1 | Celda 2.2 | Celda 2.3 |
| Celda 3.1 | Celda 3.2 | Celda 3.3 |
