Logo de Mosaic
El texto central de HTML
Tablas HTML

19. Tablas HTML

Jenifer Hanen. 8 de julio del 2008. Última modificación: 21 de noviembre de 2017 (equipo docente del grado de Multimedia). Publicado en: encabezamiento, datos, pie, tablas, título de tabla

¡Vaya! ¿Cómo debemos utilizar los estándares de la web para organizar pilas de datos? El simple hecho de pensar en las toneladas de elementos anidados necesarios para conseguir que todos estos datos se distribuyan en filas y cajas ya hace que nuestro cerebro quede totalmente colapsado; pero hay una solución: ¡las tablas pueden salvarnos!

En el diseño web, las tablas son una manera muy buena de organizar datos en un formato tabulado. Es decir, debemos ver las tablas, los gráficos y los demás elementos visuales informativos como una ayuda para ver y procesar una gran cantidad de información de una manera resumida que nos ayuda a comparar y contrastar datos diferentes. Podemos ver estos elementos muy a menudo en los sitios web, ya sea para resumir o comparar resultados de elecciones políticas, estadísticas deportivas, precios, tallas u otros datos.

En la era jurásica de Internet, antes de la popularización del CSS como método para separar la presentación de la estructura del HTML, las tablas se utilizaban para maquetar las páginas web: para crear columnas y cajas y, en general, para distribuir el contenido. Pero ésta no es la manera correcta de hacer las cosas; la maquetación con tablas daba como resultado unas páginas cargadas y confusas con un montón de tablas anidadas; archivos muy grandes, difíciles de mantener y difíciles de modificar. Todavía podréis ver sitios web hechos así en Internet, pero debéis tener muy claro que actualmente las tablas se deben utilizar sólo para lo que fueron diseñadas: los datos tabulares, y el CSS, para controlar la maquetación.

En este apartado explicaremos cómo utilizar adecuadamente las tablas HTML.

Los contenidos de este apartado son los siguientes:

19.1. La tabla más básica

Empezaremos con el código HTML semántico necesario para crear una tabla básica; este ejemplo en concreto compara erupciones volcánicas recientes de la región del Pacífico de América del Norte. A mí me gustan los volcanes y cuando era pequeña convencí a mi madre para que me llevara a varios de estos volcanes durante los viajes que hacíamos en verano para visitar a la abuela. Siempre esperaba que alguno de estos volcanes del noroeste del Pacífico entrara en erupción mientras estábamos de vacaciones, pero fue en vano.

La primera tabla es la siguiente:

<table>
   <tr>
      <td>Volcano Name</td>
      <td>Location</td>
      <td>Last Major Eruption</td>
      <td>Type of Eruption</td>
   </tr>
   <tr>
      <td>Mt. Lassen</td>
      <td>California</td>
      <td>1914-17</td>
      <td>Explosive Eruption</td>
   </tr>
   <tr>
      <td>Mt. Hood</td>
      <td>Oregon</td>
      <td>1790s</td>
      <td>Pyroclastic flows and Mudflows</td>
   </tr>
   <tr>
      <td>Mt. St. Helens</td>
      <td>Washington</td>
      <td>1980</td>
      <td>Explosive Eruption</td>
   </tr>
</table>

Este código se representa de la manera siguiente:

Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

Empezaremos descomponiendo el etiquetado HTML utilizado en el código anterior:

Tened en cuenta que los elementos básicos se deben anidar de la manera siguiente:

<table>
   <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
   </tr>
</table>

Si los ordenamos de otra manera, el navegador generará un embrollo considerable y mostrará la tabla de una manera muy extraña.

19.2. Añadir otras funciones

Ahora que ya tenemos la tabla básica, podéis añadir algunas funciones de tabla un poco más complejas. En primer lugar, añadiremos un título y unos encabezamientos de columna para mejorar los datos tanto respecto a la semántica, como a la legibilidad por parte de los lectores de pantalla. El etiquetado de la tabla mejorada es el siguiente:

<table>
   <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
   <tr>
      <th>Volcano Name</th>
      <th>Location</th>
      <th>Last Major Eruption</th>
      <th>Type of Eruption</th>
   </tr>
   <tr>
      <td>Mt. Lassen</td>
      <td>California</td>
      <td>1914-17</td>
      <td>Explosive Eruption</td>
   </tr>
   <tr>
      <td>Mt. Hood</td>
      <td>Oregon</td>
      <td>1790s</td>
      <td>Pyroclastic flows and Mudflows</td>
   </tr>
   <tr>
      <td>Mt. St. Helens</td>
      <td>Washington</td>
      <td>1980</td>
      <td>Explosive Eruption</td>
   </tr>
</table>

Este código se representa de la manera siguiente:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

Los elementos nuevos que hemos utilizado son:

19.3. Seguir estructurando la tabla

Como paso final para acabar de estructurar nuestra tabla, definiremos unas secciones de encabezamiento y de cuerpo de la tabla, le añadiremos un pie y definiremos el ámbito de los títulos de fila y columna. También añadiremos un atributo de resumen para describir el contenido de la tabla. El etiquetado definitivo de la tabla es el siguiente:

<table>
   <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
   <thead>
      <tr>
         <th scope="col">Volcano Name</th>
         <th scope="col">Location</th>
         <th scope="col">Last Major Eruption</th>
         <th scope="col">Type of Eruption</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td colspan="4">Compiled in 2008 by Ms Jen</td>
      </tr>
   </tfoot>   
   <tbody>
      <tr>
         <th scope="row">Mt. Lassen</th>
         <td>California</td>
         <td>1914-17</td>
         <td>Explosive Eruption</td>
      </tr>
      <tr>
         <th scope="row">Mt. Hood</th>
         <td>Oregon</td>
         <td>1790s</td>
         <td>Pyroclastic flows and Mudflows</td>
      </tr>
      <tr>
         <th scope="row">Mt. St. Helens</th>
         <td>Washington</td>
         <td>1980</td>
         <td>Explosive Eruption</td>
      </tr>
   </tbody>
</table>

Este código de tabla tiene el siguiente aspecto en un navegador:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Compiled in 2008 by Ms Jen
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

Los nuevos elementos/atributos son los siguientes:

19.4. El CSS nos ayuda: una tabla con un aspecto mejor

Los elementos y atributos anteriores son todo lo que necesitáis para codificar una buena tabla de datos. Ahora que ya hemos definido la estructura HTML, pasamos a ver un CSS muy sencillo para hacer que la tabla tenga un aspecto todavía mejor:

body{
   background: #ffffff;
   margin: 0;
   padding: 20px;
   line-height: 1.4em;
   font-family: tahoma, arial, sans-serif;
   font-size: 62.5%;
}
    
table {
   width: 80%;
   margin: 0;
   background: #FFFFFF;
   border: 1px solid #333333;
   border-collapse: collapse;
}
    
td, th {
   border-bottom: 1px solid #333333;
   padding: 6px 16px;
   text-align: left;
}
    
th {
   background: #EEEEEE;
}
    
caption {
   background: #E0E0E0;
   margin: 0;
   border: 1px solid #333333;
   border-bottom: none;
   padding: 6px 16px;
   font-weight: bold;
}

Cuando lo aplicamos al etiquetado definitivo de nuestra tabla, el aspecto que tendrá es el que se puede ver en la figura 1. También podéis comprobar la tabla real de ejemplo.

Exemple de la taula final

Figura 1. Ahora la tabla es visualmente mucho más atractiva.

Archivo fuente: "table3.html"

¡Ooooh...! Mucho mejor, ¿no? Podéis aplicar los estilos que queráis a la tabla, pero el ejemplo anterior es un punto de referencia a partir del cual podéis empezar a trabajar. En otro apartado aprenderéis muchas más cosas sobre los estilos de las tablas; de momento, nos limitaremos a explicar qué hace cada una de las secciones de este CSS:

Resumen

En este apartado hemos explicado todo lo que debéis saber para crear unas tablas de datos en HTML muy efectivas. ¡Eso es todo! Para terminar, os dejaremos con un par de ideas básicas que debéis recordar:

Preguntas de repaso

  1. Empezad escribiendo el código de una tabla sencilla con sólo los 3 elementos de tabla principales: table, tr y td. Guardadla y abridla en un navegador.

  2. Igual que en el segundo ejemplo anterior, añadid un título, títulos de columna y un pie. ¿Cómo cambia lo que podéis ver en el navegador?

  3. ¿Qué podéis hacer para que la tabla sea más accesible para los lectores de pantalla y los dispositivos portátiles?

  4. Ahora cread un archivo CSS. Intentad definir un estilo para los bordes, la separación y el espaciado de celda de la tabla sólo con el CSS y sin utilizar ningún atributo del etiquetado HTML. Añadid un color de fondo y definid el estilo de los tipos de letra.

¡Pasadlo bien!

Lecturas complementarias

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada.
: Ir al índice :