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).