Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.
| Prerrequisitos: | Conceptos básicos de HTML (ver Introducción al HTML). |
|---|---|
| Objetivo: | Adquirir conocimientos básicos de las tablas HTML. |
Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.
Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:
Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.
El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.
| Nombre | Masa (1024 kg) | Diámetro (km) | Densidad (kg/m3) | Gravedad (m/s2) | Duración del día (horas) | Distancia del Sol (106km) | Temperatura media (°C) | Número de lunas | Observaciones | ||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Planetas terrestres | Mercurio | 0,330 | 4.879 | 5.427 | 3,7 | 4.222,6 | 57,9 | 167 | 0 | El más cercano al Sol | |
| Venus | 4,87 | 12.104 | 5.243 | 8,9 | 2.802,0 | 108,2 | 464 | 0 | |||
| La Tierra | 5,97 | 12.756 | 5.514 | 9,8 | 24,0 | 149,6 | 15 | 1 | Nuestro planeta | ||
| Marte | 0,642 | 6.792 | 3.933 | 3,7 | 24,7 | 227,9 | -65 | 2 | El planeta rojo | ||
| Planetas jovianos | Los gigantes de gas | Júpiter | 1.898 | 142.984 | 1.326 | 23,1 | 9,9 | 778,6 | -110 | 67 | El planeta más grande |
| Saturno | 568 | 120.536 | 687 | 9,0 | 10,7 | 1.433,5 | -140 | 62 | |||
| Los gigantes de hielo | Urano | 86,8 | 51.118 | 1.271 | 8,7 | 17,2 | 2.872,5 | -195 | 27 | ||
| Neptuno | 102 | 49.528 | 1.638 | 11,0 | 16,1 | 4.495,1 | -200 | 14 | |||
| Planetas enanos | Plutón | 0,0146 | 2.370 | 2.095 | 0,7 | 153,3 | 5.906,4 | -225 | 5 | Desclasificado como planeta en 2006, pero aún es una cuestión polémica. | |
Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.
También puedes echar un vistazo al ejemplo vivo en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.
No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con CSS, así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo Aplicar estilo a las tablas.
En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo aquí, así como también una plantilla HTML para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).
Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en Diseños de página en nuestro Módulo de aprendizaje de accesibilidad. Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.
En resumen, es una mala idea usar tablas para el diseño en lugar de las técnicas de diseño CSS. Las razones principales son las siguientes:
Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.
<table></table>. Añádelas al cuerpo de tu código HTML.<td> ('td' significa 'table data', datos de tabla). Añade lo siguiente dentro de tus etiquetas de tabla:
<td>Hola, soy tu primera celda.</td>
<td>Hola, soy tu primera celda.</td> <td>Soy tu segunda celda.</td> <td>Soy tu tercera celda.</td> <td>Soy tu cuarta celda.</td>
Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento <td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.
Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <tr> ('tr' significa 'table raw', fila de tabla). Vamos a verlo en detalle.
<tr>, de esta forma:
<tr> <td>Hola, soy tu primera celda.</td> <td>Soy tu segunda celda.</td> <td>Soy tu tercera celda.</td> <td>Soy tu cuarta celda.</td> </tr>
<tr> adicional, con cada celda contenida en un <td>.Esto debería dar como resultado una tabla similar a la siguiente:
| Hola, soy tu primera celda. | Soy tu segunda celda. | Soy tu tercera celda. | Soy tu cuarta celda. |
| Segunda fila, primera celda. | Celda 2. | Celda 3. | Celda 4. |
Nota: También puedes encontrar esto en GitHub como simple-table.html (consúltalo en vivo).
Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:
<table>
<tr>
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Raza</td>
<td>Jack Russell</td>
<td>Caniche</td>
<td>Perro callejero</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Edad</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Propietario</td>
<td>Suegra</td>
<td>Yo</td>
<td>Yo</td>
<td>Cuñada</td>
</tr>
<tr>
<td>Hábitos alimentarios</td>
<td>Come las sobras de todos</td>
<td>Mordisquea la comida</td>
<td>Come en abundancia</td>
<td>Come hasta que revienta</td>
</tr>
</table>
Ahora observa la tabla representada:
| Knocky | Flor | Ella | Juan | |
| Raza | Jack Russell | Caniche | Perro callejero | Cocker Spaniel |
| Edad | 16 | 9 | 10 | 5 |
| Propietario | Suegra | Yo | Yo | Cuñada |
| Hábitos alimentarios | Come las sobras de todos | Mordisquea la comida | Come en abundancia | Come hasta que revienta |
El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.
Intentemos mejorar esta tabla.
<th> ('th' significa 'table header', encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <td> que delimitan los encabezados de tabla por elementos <th>.Nota: Puedes encontrar nuestro ejemplo terminado en dogs-table-fixed.html en GitHub (o consultarlo en vivo).
Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.
Nota: Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.
Los encabezados de tabla también presentan otra ventaja: junto con el atributo de scope (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.
A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.
El marcado inicial se ve así:
<table>
<tr>
<th>Animales</th>
</tr>
<tr>
<th>Hipopótamo</th>
</tr>
<tr>
<th>Caballo</th>
<td>Yegua</td>
</tr>
<tr>
<td>Semental</td>
</tr>
<tr>
<th>Cocodrilo</th>
</tr>
<tr>
<th>Pollo</th>
<td>Gallina</td>
</tr>
<tr>
<td>Gallo</td>
</tr>
</table>
Pero la salida no nos da exactamente lo que queremos:
| Animales | |
|---|---|
| Hipopótamo | |
| Caballo | Yegua |
| Semental | |
| Cocodrilo | |
| Pollo | Gallina |
| Gallo |
Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos colspan y rowspan, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, colspan="2" extiende una celda dos columnas más allá.
Usemos colspan y rowspan para mejorar esta tabla.
colspan para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.rowspan para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.Nota: Puedes encontrar nuestro ejemplo terminado en animals-table-fixed.html en GitHub (o consultarlo en vivo).
Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <col> y <colgroup>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en cada <td> o <th> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.
Tomemos el ejemplo sencillo siguiente:
<table>
<tr>
<th>Dato 1</th>
<th style="background-color: yellow">Dato 2</th>
</tr>
<tr>
<td>Calcuta</td>
<td style="background-color: yellow">Pizza</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
Esto nos da el resultado siguiente:
| Dato 1 | Dato 2 |
|---|---|
| Calcuta | Naranja |
| Robots | Jazz |
Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase class en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <col>. Los elementos <col> se especifican dentro de un contenedor <colgroup> justo debajo de la etiqueta de apertura <table>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:
<table>
<colgroup>
<col>
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Dato 1</th>
<th>Dato 2</th>
</tr>
<tr>
<td>Calcuta</td>
<td>Pizza</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>
En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento <col> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.
Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <col> con un atributo span, como este:
<colgroup> <col style="background-color: yellow" span="2"> </colgroup>
Al igual que colspan y rowspan, span toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.
Ahora es el momento de intentarlo tú mismo.
A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.
{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}
Recrea la tabla a partir de los pasos siguientes.
<colgroup> en la parte superior de la tabla, justo debajo de la etiqueta <table>, en la que puedes añadir tus elementos <col> (consulta los pasos restantes a continuación).style es background-color:#97DB9A;style es width: 42px;style es background-color:#97DB9A;style son background-color:#DCC48E; border:4px solid #C1437A;style es width: 42px;Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como timetable-fixed.html (o también puedes consultarlo en vivo).
Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.