HTML - Encabezados y leyendas

Definición de encabezados de tabla

En las tablas HTML, los encabezados etiquetan columnas o filas de datos. Para definir un encabezado de tabla, se usa la etiqueta <th>. La etiqueta <th> se coloca dentro de la etiqueta <tr> (fila de tabla), al igual que las celdas normales de tabla (<td>). La principal diferencia entre las etiquetas <th> y <td> es que <th> se usa para celdas de encabezado, que generalmente tienen un peso de fuente en negrita y alineación de texto centrada por defecto.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
    <td>Dato 3</td>
  </tr>
</table>

La primera fila contiene tres etiquetas <th>, definiendo los encabezados para cada columna. La segunda fila contiene etiquetas <td> regulares con los datos reales.

Atributos de encabezado de tabla

Los encabezados de tabla tienen algunos atributos especiales que se pueden usar para mejorar la estructura y accesibilidad de la tabla:

1. colspan: El atributo colspan permite que una celda de encabezado abarque múltiples columnas. Por ejemplo, <th colspan="2">Encabezado</th> crearía una celda de encabezado que abarca dos columnas.

2. rowspan: El atributo rowspan permite que una celda de encabezado abarque múltiples filas. Por ejemplo, <th rowspan="3">Encabezado</th> crearía una celda de encabezado que abarca tres filas.

3. scope: El atributo scope se usa para asociar una celda de encabezado con las celdas de datos que describe. Esto es importante para la accesibilidad, ya que ayuda a los lectores de pantalla a entender la relación entre los encabezados y los datos. El atributo scope puede tener los siguientes valores:

   • row: El encabezado se aplica a la fila.
   • col: El encabezado se aplica a la columna.
   • rowgroup: El encabezado se aplica a un grupo de filas.
   • colgroup: El encabezado se aplica a un grupo de columnas.

<table>
  <tr>
    <th colspan="2">Encabezado 1 y 2</th>
    <th>Encabezado 3</th>
  </tr>
  <tr>
    <th rowspan="2" scope="row">Encabezado 4</th>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

La primera celda de encabezado abarca dos columnas usando colspan, la cuarta celda de encabezado abarca dos filas usando rowspan, y el atributo scope se usa para indicar que el cuarto encabezado se aplica a la fila.

El uso de encabezados de tabla con los atributos apropiados ayuda a crear tablas bien estructuradas y accesibles en HTML.

Añadir un título a una tabla

El título de una tabla es una breve descripción del contenido o propósito de la tabla. Para añadir un título a una tabla HTML, utiliza la etiqueta <caption>. La etiqueta <caption> debe colocarse justo después de la etiqueta de apertura <table>, antes de cualquier elemento <tr>, <th> o <td>.

<table>
  <caption>Datos de salarios de empleados</caption>
  <tr>
    <th>Nombre</th>
    <th>Puesto</th>
    <th>Salario</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Gerente</td>
    <td>$80,000</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Desarrolladora</td>
    <td>$75,000</td>
  </tr>
</table>

Dar estilo a los títulos de las tablas

Por defecto, los títulos de las tablas se muestran encima de la tabla y centrados. Sin embargo, puedes usar CSS para dar estilo y posicionar el título según sea necesario.

Para dar estilo al título de una tabla, dirígete al elemento <caption> en tu CSS:

table caption {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

Para posicionar el título debajo de la tabla en lugar de encima, utiliza la propiedad CSS caption-side:

table caption {
  caption-side: bottom;
}

La propiedad caption-side acepta dos valores: top (por defecto) y bottom.

Al usar la etiqueta <caption> y darle estilo con CSS, puedes proporcionar una descripción clara y atractiva para tus tablas HTML.