¿Como funciona el comando en HTML5: 'Th'?

Instrucción html5 <th>

En HTML5, el elemento <th> es utilizado para definir una celda de encabezado en una tabla. A diferencia del elemento <td>, que se usa para definir celdas de datos, <th> semánticamente implica que la celda que se está creando es un encabezado, proporcionando contexto tanto visual como programático para los datos dentro de la tabla.

Atributos de <th>

1. colspan: Especifica el número de columnas que la celda de encabezado debe abarcar. Valor por defecto es 1.

   <th colspan="2">Encabezado Abarcando 2 Columnas</th>

2. rowspan: Especifica el número de filas que la celda de encabezado debe abarcar. Valor por defecto es 1.

   <th rowspan="2">Encabezado Abarcando 2 Filas</th>

3. headers: Especifica una lista de ID`s (identificadores únicos de otras celdas) que está asociada a la celda actual, proporcionando más contexto sobre la relación entre encabezados y datos.

   <th headers="header1 header2">Encabezado con Referencias</th>

4. scope: Define el alcance de la celda de encabezado. Puede tomar los siguientes valores:

   • row: Especifica que la celda de encabezado es para una fila.
   • col: Especifica que la celda de encabezado es para una columna.
   • rowgroup: Indica que la celda de encabezado es para un grupo de filas.
   • colgroup: Indica que la celda de encabezado es para un grupo de columnas.

     <th scope="col">Encabezado de Columna</th>

5. abbr: Proporciona una versión abreviada del contenido de la celda de encabezado. Muy útil para dispositivos que leen el contenido de la tabla y para estilización.

   <th abbr="ID">Identificador</th>

Uso de <th> en HTML5: Ejemplos Sencillos

A continuación se presentan algunos ejemplos de cómo usar <th> en distintas situaciones.

Ejemplo 1: Encabezado Básico de Columna

<table>
   <tr>
       <th>Nombre</th>
       <th>Edad</th>
       <th>Ciudad</th>
   </tr>
   <tr>
       <td>Juan</td>
       <td>30</td>
       <td>Madrid</td>
   </tr>
</table>

En este ejemplo, cada celda de la fila de encabezado (<th>) define una columna de la tabla.

Ejemplo 2: Uso del atributo colspan

<table>
   <tr>
       <th colspan="2">Nombre Completo</th>
       <th>Edad</th>
   </tr>
   <tr>
       <td>Juan</td>
       <td>Pérez</td>
       <td>30</td>
   </tr>
</table>

Este ejemplo muestra una celda de encabezado que abarca dos columnas.

Ejemplo 3: Uso del atributo rowspan

<table>
   <tr>
       <th rowspan="2">Nombre</th>
       <th>Edad</th>
   </tr>
   <tr>
       <th>Ciudad</th>
   </tr>
   <tr>
       <td>Juan</td>
       <td>30</td>
       <td>Madrid</td>
   </tr>
</table>

Aquí, la celda de encabezado "Nombre" abarca dos filas.

Ejemplo 4: Uso del atributo scope

<table>
   <tr>
       <th scope="col">Nombre</th>
       <th scope="col">Edad</th>
       <th scope="col">Ciudad</th>
   </tr>
   <tr>
       <td>Juan</td>
       <td>30</td>
       <td>Madrid</td>
   </tr>
</table>

El atributo scope define explícitamente que cada celda de encabezado en la fila de encabezado tiene alcance de columna.

Ejemplo 5: Uso del atributo headers

<table>
   <tr>
       <th id="nameHeader">Nombre</th>
       <th id="ageHeader">Edad</th>
       <th id="cityHeader">Ciudad</th>
   </tr>
   <tr>
       <td headers="nameHeader">Juan</td>
       <td headers="ageHeader">30</td>
       <td headers="cityHeader">Madrid</td>
   </tr>
</table>

En este ejemplo, cada celda de datos (<td>) refiere a su correspondiente celda de encabezado usando el atributo headers.

Estos ejemplos ilustran cómo utilizar el elemento <th> y sus atributos para crear tablas accesibles y semánticamente correctas en HTML5.