HTML th
La etiqueta <th> de HTML es utilizada para definir un encabezado de celda en una tabla. Los encabezados de celda son utilizados para describir el contenido de las celdas en una fila o columna específica.
El contenido dentro de la etiqueta <th> se mostrará en negrita y centrado por defecto, pero estos estilos pueden ser modificados utilizando CSS.
Ejemplo de uso
Un ejemplo de uso de la etiqueta <th> en HTML podría ser:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>30</td>
<td>Madrid</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
<td>Barcelona</td>
</tr>
</tbody>
</table>
Lenguaje del código: HTML, XML (xml)
En este ejemplo, se está creando una tabla con tres columnas “Nombre”, “Edad” y “Ciudad”. Los encabezados de las columnas se especifican utilizando la etiqueta <th> dentro de una fila <tr> dentro de un <thead> que especifica que es el encabezado de la tabla.
Los datos de la tabla se especifican utilizando <td> dentro de <tr> dentro de un <tbody> que especifica que es el cuerpo de la tabla.
Atributos
Los atributos más comunes de la etiqueta <th> en HTML son:
- colspan: define el número de columnas que debe ocupar la celda.
- rowspan: define el número de filas que debe ocupar la celda.
- headers: define los ID de las celdas que son encabezados para la celda actual.
- scope: indica el ámbito de la celda, puede ser “col” para indicar que es un encabezado de columna, “row” para indicar que es un encabezado de fila o “auto” para dejarlo a discreción del navegador.
- abbr: define una abreviatura para el contenido de la celda.
- sorted: indica si la columna o fila está ordenada.
- sortable: indica si la columna o fila se puede ordenar.
- sort-direction: indica la dirección de ordenamiento.
- sort-datatype: indica el tipo de datos a ordenar.
Ejemplo
Un ejemplo completo de uso de la etiqueta <th> con varios atributos podría ser el siguiente:
<table>
<tr>
<th scope="col" colspan="2" style="text-align: center; background-color: #dddddd;">Encabezado de la tabla</th>
</tr>
<tr>
<th scope="row">Fila 1, Columna 1</th>
<td>Fila 1, Columna 2</td>
</tr>
<tr>
<th scope="row">Fila 2, Columna 1</th>
<td>Fila 2, Columna 2</td>
</tr>
</table>
Lenguaje del código: HTML, XML (xml)
En este ejemplo, se utiliza el atributo “scope” para especificar que esta celda es un encabezado de columna o fila. Se utiliza el atributo “colspan” para especificar que esta celda ocupa 2 columnas.
Se usa el atributo “style” para especificar un estilo CSS personalizado (en este caso, para centrar el texto y cambiar el color de fondo).