Tablas en HTML

Práctica

Esta práctica se basará en todas las prácticas previas de la serie de turoriales, y consistirá en la creación de un nuevo documento con, principalmente, una tabla. Antes de comenzar, necesitarás crear un nuevo archivo, agregarlo a una de las carpetas dentro del directorio "publicaciones" y llenarlo con la Estructura básica de un documento HTML.

Una vez que tu archivo está listo, comenzaremos por insertar un título (h1) y un párrafo (p) con una pequeña descripción acerca de la información que vamos a presentar. Esto se añdirá al cuerpo del documento (body). Como anteriormente, sólo mostraremos el contenido del cuerpo (body) en los ejemplos siguientes, con el fin de reducir su longitud. Pero recuerda que deberías tener el encabezado (head) y los otros elementos en tu archivo.

<h1>Lo que he aprendido hasta el momento</h1>
<p>La siguiente tabla resume todos los elementos de <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.</p>

Lo que he aprendido hasta el momento

La siguiente tabla resume todos los elementos de HTML que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.

Esto es solamente un arrancador. Ahora agregaremos la tabla (table). Antes de tomar cualquier decisión, crearemos las etiquetas de apertura y cierre de la tabla (table), un elemento caption que proveerá una descripción de la tabla, y una fila (elemento tr) que, por ahora, no tendrá ninguna celda.

<h1>Lo que he aprendido hasta el momento</h1>
<p>La siguiente tabla resume todos los elementos de <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.</p>
<table class="default">
  <caption>Elementos de HTML que he aprendido hasta ahora</caption>
  <tr>
 
  </tr>
</table>

Es hora de determinar cuántas columnas tendrá nuestra tabla. Al comienzo de esta práctica dijimos que íbamos a mostrar nombre y descripción de los elementos, de manera que dos columnas serán más que suficientes por el momento. Más tarde puedes agregar más columnas a esta estructura, si te parece necesario.

Esta primera fila contendrá nuestras celdas de encabezado, así que utilizaremos el elemento th para agregar celdas aquí.

<h1>Lo que he aprendido hasta el momento</h1>
<p>La siguiente tabla resume todos los elementos de <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.</p>
<table class="default">
  <caption>Elementos de HTML que he aprendido hasta ahora</caption>
  <tr>
    <th>Elemento</th>
    <th>Descripción</th>
  </tr>
</table>

Lo que he aprendido hasta el momento

La siguiente tabla resume todos los elementos de HTML que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.

Elementos de HTML que he aprendido hasta ahora
Elemento Descripción

Esto se está viendo muy bien. Ahora agregaremos más filas para mostrar información acerca de algunos de los elementos tratados en los tutoriales. Estas filas seguirán a la primera y contendrán celdas regulares (td).

<h1>Lo que he aprendido hasta el momento</h1>
<p>La siguiente tabla resume todos los elementos de <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.</p>
<table class="default">
  <caption>Elementos de HTML que he aprendido hasta ahora</caption>
  <tr>
    <th>Elemento</th>
    <th>Descripción</th>
  </tr>
  <tr>
    <td>html</td>
    <td>Es el contenedor para todos los elementos de un documento</td>
  </tr>
  <tr>
    <td>head</td>
    <td>Contiene el título e información relacional acerca del documento</td>
  </tr>
  <tr>
    <td>title</td>
    <td>Provee un título para el documento</td>
  </tr>
  <tr>
    <td>body</td>
    <td>Es la sección donde se encuentra el contenido del documento</td>
  </tr>
  <tr>
    <td>h1-h6</td>
    <td>Representa un encabezado</td>
  </tr>
  <tr>
    <td>p</td>
    <td>Representa un párrafo</td>
  </tr>
</table>

Lo que he aprendido hasta el momento

La siguiente tabla resume todos los elementos de HTML que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.

Elementos de HTML que he aprendido hasta ahora
Elemento Descripción
html Es el contenedor para todos los elementos de un documento
head Contiene el título e información relacional acerca del documento
title Provee un título para el documento
body Es la sección donde se encuentra el contenido del documento
h1-h6 Representa un encabezado
p Representa un párrafo

Ésta ya podría ser considerada una buena tabla. Pero como siempre nos gusta ir un poco más allá, agregaremos grupos horizontales a su estructura. Básicamente, envolveremos a las celdas de encabezado con un elemento thead y dividiremos las otras filas en cuerpos temáticos (tbody). Estos grupos o categorías serán las mismas usadas en la tabla de referencia de los elementos.

<h1>Lo que he aprendido hasta el momento</h1>
<p>La siguiente tabla resume todos los elementos de <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.</p>
<table class="default">
  <caption>Elementos de HTML que he aprendido hasta ahora</caption>
  <thead>
    <tr>
      <th>Elemento</th>
      <th>Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>html</td>
      <td>Es el contenedor para todos los elementos de un documento</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>head</td>
      <td>Contiene el título e información relacional acerca del documento</td>
    </tr>
    <tr>
      <td>title</td>
      <td>Provee un título para el documento</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>body</td>
      <td>Es la sección donde se encuentra el contenido del documento</td>
    </tr>
    <tr>
      <td>h1-h6</td>
      <td>Representa un encabezado</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>p</td>
      <td>Representa un párrafo</td>
    </tr>
  </tbody>
</table>

Lo que he aprendido hasta el momento

La siguiente tabla resume todos los elementos de HTML que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.

Elementos de HTML que he aprendido hasta ahora
Elemento Descripción
html Es el contenedor para todos los elementos de un documento
head Contiene el título e información relacional acerca del documento
title Provee un título para el documento
body Es la sección donde se encuentra el contenido del documento
h1-h6 Representa un encabezado
p Representa un párrafo

Por supuesto que esta es una agrupación temática y los navegadores no la resaltan por defecto. Entonces, para hacer que la tabla sea más legible haremos que estas divisiones sean claramente palpables, al agregar una celda de encabezado encima de cada grupo tbody. Esta operación consistirá en la inserción de una fila justo después de cada etiqueta de apertura de los elementos tbody, la cual contendrá solo una celda de encabezado que abarcará el espacio de dos celdas horizontalmente (con el atributo colspan). Presta atención al código.

<h1>Lo que he aprendido hasta el momento</h1>
<p>La siguiente tabla resume todos los elementos de <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.</p>
<table class="default">
  <caption>Elementos de HTML que he aprendido hasta ahora</caption>
  <thead>
    <tr>
      <th>Elemento</th>
      <th>Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">El elemento raíz</th>
    </tr>
    <tr>
      <td>html</td>
      <td>Es el contenedor para todos los elementos de un documento</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">Metadatos del documento</th>
    </tr>
    <tr>
      <td>head</td>
      <td>Contiene el título e información relacional acerca del documento</td>
    </tr>
    <tr>
      <td>title</td>
      <td>Provee un título para el documento</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">Secciones</th>
    </tr>
    <tr>
      <td>body</td>
      <td>Es la sección donde se encuentra el contenido del documento</td>
    </tr>
    <tr>
      <td>h1-h6</td>
      <td>Representa un encabezado</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">Agrupación de contenido</th>
    </tr>
    <tr>
      <td>p</td>
      <td>Representa un párrafo</td>
    </tr>
  </tbody>
</table>

Lo que he aprendido hasta el momento

La siguiente tabla resume todos los elementos de HTML que he aprendido hasta el momento. Sé que esta lista es corta, pero espero que crezca considerablemente en las próximas semanas.

Elementos de HTML que he aprendido hasta ahora
Elemento Descripción
El elemento raíz
html Es el contenedor para todos los elementos de un documento
Metadatos del documento
head Contiene el título e información relacional acerca del documento
title Provee un título para el documento
Secciones
body Es la sección donde se encuentra el contenido del documento
h1-h6 Representa un encabezado
Agrupación de contenido
p Representa un párrafo

Como puedes ver, aquí utilizamos por primera vez el atributo scope con el valor "rowgroup", en las celdas de encabezado. Con dicho valor, indicamos que estas celdas de encabezado afectan a todas las celdas en su grupo de filas.

Y eso es todo con tablas por ahora. Este nuevo conocimiento te debería permitir presentar información tabulada en la mayoría de los casos más habituales. Si quieres indagar más sobre el tema, revisa la referencia de elementos de información tabular.

Próximo tutorial ›

Prev12345