Encabezados en las tablas HTML

En el artículo anterior vimos el procedimiento básico para crear tablas en HTML. Hoy voy a explicarte cómo mejorar la presentación definiendo encabezados que sirvan de títulos a las filas o columnas.

Abre la página de ejemplo y déjala a la vista en una ventana o pestaña aparte, pues acudiremos a ella continuamente.

La Tabla 1 ya la conoces. Es una simple matriz de datos de dos filas por tres columnas que nos servirá como conejillo de indias y sobre la que realizaremos todo tipo de perversiones.

Recordemos su código:

Tabla 1
<table border="1">
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

Vimos que el método para crearla era aproximarnos a ella fila a fila, cada una contenida entre las etiquetas <tr> ... </tr>. Cada celda individual dentro de una fila se delimitaba con las etiquetas <td> ... </td>. Todo el conjunto quedaba encerrado entre <table> ... </table>.

Los encabezados de una tabla, sus títulos, no son más que celdas que tienen un formato diferente al de una celda normal. Los navegadores suelen presentarlas destacando su contenido en negrita. Obsérvalo en las tablas 3, 4 y 5 del ejemplo.

El único secreto que tiene la confección de encabezados es entender que pueden aplicarse a cualquier celda, no sólo a la primera fila o columna. Observa la Tabla 2 y fíjate cómo aparecen destacados elementos que estrictamente no constituyen un encabezado. Para crearlos, basta con cambiar la etiqueta de sus celdas: en vez de <td> empleamos <th> (de table header, cabecera de tabla).

Este es el código que genera la tabla:

Tabla 2
<table border="1">
<tr>
  <th>manzana</th><td>pera</td><th>fresa</th>
</tr>
<tr>
  <td>tomate</td><th>cebolla</th><td>pepino</td>
</tr>
</table>

Fíjate cómo aquellos elementos que queremos destacados tienen la etiqueta <th> y los que no <td>.

Entendido esto el resto no tiene historia. Vamos a programar la Tabla 3, en la que la fila superior titula cada columna.

Tenemos tres filas (la de título más las dos de datos), por lo que nos aparecerán tres secciones <tr>. En la primera fila todas sus celdas están destacadas, por los que su etiqueta será <th>.

Tabla 3
<table border="1">
<tr>
  <th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La Tabla 4 ilustra un ejemplo en el que los encabezados titulan cada fila. Tenemos dos filas por cuatro columnas esta vez. Sólo el primer elemento de cada fila tendrá por etiqueta <th>.

Tabla 4
<table border="1">
<tr>
  <th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La Tabla 5 tiene títulos tanto en las filas como en las columnas. En este caso, el primer elemento de la primera fila no contiene dato alguno, pero aún así ponemos el par de etiquetas <td></td>, aunque no haya nada entre ellas. Las restantes celdas de la fila son encabezados. En las filas 2 y 3, sólo el primer elemento es un encabezado. El código te ilustrará esto con claridad:

Tabla 5
<table border="1">
<tr>
  <td></td><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
  <th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

En el próximo artículo veremos cómo crear tablas con celdas irregulares, resultado de combinar entre sí celdas contiguas.

Javier Montero Gabarró


Encabezados en las tablas HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

HTML: Seis niveles de encabezados

ECDA-HTMLObjetivo: mostrar los seis niveles de encabezados que ofrece HTML.

HTML permite seis niveles de encabezados. Para que te hagas una idea de su aspecto, comienza haciendo clic sobre el enlace que contiene el código del capítulo.

Las etiquetas que nos permiten crear encabezados son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, ordenadas por nivel decreciente de importancia.

El siguiente ejemplo muestra cómo generar un encabezado de máximo nivel:

<h1>Encabezado de nivel 1</h1>

Gracias a los encabezados podemos estructurar nuestros documentos en secciones sin preocuparnos por su aspecto. Por defecto, los navegadores los muestran escritos en negrita, con un tamaño de fuente adecuado para cada nivel de títulos y separados del texto anterior y posterior por una línea en blanco. Más adelante, cuando tratemos las hojas de estilo CSS veremos cómo personalizar su aspecto, en el caso de que no nos satisfaga el diseño por omisión.

Utiliza los seis niveles de encabezados de un modo coherente: recuerda que el de mayor importancia es H1 y el de menor H6. No queda muy estético, por ejemplo, usar un H2 para el nivel principal y un H1 para los secundarios.

<!DOCTYPE html>
<html>
<head>
<title>Seis niveles de encabezados</title>
</head>
<body>
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
<p>Y este es el texto normal.</p>
</body>
</html>

Javier Montero Gabarró


Fecha de la última revisión: 23 de diciembre de 2012


HTML: Seis niveles de encabezados


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies