Tablas en HTML: conceptos básicos y ejemplos

Puedes utilizar la etiqueta <table> en HTML para integrar tablas en cualquier lugar de tus páginas web, es­tru­c­tu­ra­n­do así la in­fo­r­ma­ción de forma clara. Es­pe­ci­fi­ca­n­do celdas de en­ca­be­za­do, filas y celdas de datos, puedes de­te­r­mi­nar in­di­vi­dua­l­me­n­te cómo se es­tru­c­tu­ran.

¿Qué son las tablas en HTML y para qué se utilizan?

Una tabla en HTML es un elemento HTML es­tru­c­tu­ra­do que se utiliza para mostrar datos y texto en formato tabular. Para definir y es­tru­c­tu­rar una tabla se necesitan varias etiquetas HTML. El diseño gráfico de las tablas, el HTML Table Styling, se realiza por separado uti­li­za­n­do las in­s­tru­c­cio­nes CSS co­rre­s­po­n­die­n­tes.

Las tablas en HTML ofrecen las po­si­bi­li­da­des de las tablas clásicas: organizan la in­fo­r­ma­ción a mostrar en filas (ho­ri­zo­n­ta­l­me­n­te) y columnas (ve­r­ti­ca­l­me­n­te). Por esta razón, las tablas en los do­cu­me­n­tos HTML están pre­de­s­ti­na­das como al­te­r­na­ti­va a las listas, es­pe­cia­l­me­n­te para la pre­se­n­ta­ción de los si­guie­n­tes co­n­te­ni­dos:

• Ca­le­n­da­rio
• Datos de contacto
• Cla­si­fi­ca­cio­nes
• Horarios
• Listas de precios
• Co­m­pa­ra­ción de productos
• Es­ta­dí­s­ti­cas

¿Qué etiquetas son ne­ce­sa­rias para una tabla HTML?

Para crear una tabla HTML, siempre se necesitan al menos tres etiquetas di­fe­re­n­tes. La etiqueta <th> para cabeceras de tabla HTML es una etiqueta opcional. Las etiquetas pri­n­ci­pa­les:

• <table>: la etiqueta HTML <table> es el elemento más im­po­r­ta­n­te para crear una tabla. Este elemento marca el inicio de la tabla HTML, y </table> marca el final.
• <tr>: para crear una nueva fila, utiliza la etiqueta <tr>, que significa “table row”. Se necesita una etiqueta de in­tro­du­c­ción y otra de cierre para cada fila.
• <td>: la etiqueta <td> significa “Datos de tabla”, es decir, los datos reales de la tabla. Para cada elemento <td> insertado se genera au­to­má­ti­ca­me­n­te una celda de tabla y, por tanto, una columna. La in­fo­r­ma­ción deseada se introduce entre la in­tro­du­c­ción (<td>) y el cierre (</td>).
• <th>: la me­n­cio­na­da etiqueta <th> es bá­si­ca­me­n­te una forma especial de la etiqueta de celda de tabla <td>. Suele uti­li­zar­se para resaltar las celdas de cabecera (“table heading”), pero también puede uti­li­zar­se para resaltar la entrada inicial de una fila.

Ejemplo de tabla HTML sencilla

Para ilustrar las po­si­bi­li­da­des de las etiquetas de tabla, a co­n­ti­nua­ción, te mostramos un sencillo ejemplo de tabla HTML. Como ejemplo, se presentan de­s­cri­p­cio­nes y precios de tres platos. En la fila de cabecera, definimos los en­ca­be­za­mie­n­tos de las tres columnas “Plato”, “De­s­cri­p­ción” y “Precio”. A co­n­ti­nua­ción, aparecen otras tres filas en la que se ofrece la in­fo­r­ma­ción. La tabla HTML tiene, por tanto, un total de cuatro filas y tres columnas:

<table> 
<tr> 
<th>Plato</th> 
<th>Descripción</th> 
<th>Precio</th> 
</tr> 
<tr> 
<td>Espaguetis boloñesa</td> 
<td>Pasta casera con salsa de carne</td> 
<td>$9.50</td> 
</tr> 
<tr> 
<td>Pizza margarita</td> 
<td>Pizza con salsa de tomate, mozzarella y albahaca fresca</td> 
<td>$9.00</td> 
</tr> 
<tr> 
<td>Ensalada César</td> 
<td>Lechuga, pechuga de pollo, picatostes, aliño César</td> 
<td>$8.50</td> 
</tr> 
</table>

En la página web, la tabla tiene este aspecto:

Close

Tablas HTML: problemas comunes y so­lu­cio­nes

Al crear tablas HTML existen algunos problemas re­cu­rre­n­tes, pero que pueden evitarse en gran medida tra­ba­ja­n­do de forma limpia y cuidadosa. Hemos resumido los problemas más comunes:

• Le­gi­bi­li­dad: las tablas son difíciles de leer para los usuarios y los lectores de pantalla si no se define una es­tru­c­tu­ra clara. Por lo tanto, omite los en­ca­be­za­dos solo si son ab­so­lu­ta­me­n­te irre­le­va­n­tes para la es­tru­c­tu­ra de la in­fo­r­ma­ción.
• Vi­sua­li­za­ción en di­s­po­si­ti­vos móviles: las tablas HTML estándar suelen vi­sua­li­zar­se mal en sma­r­t­pho­nes y tablets. Por ello, para que las tablas in­te­gra­das puedan verse también en di­s­po­si­ti­vos móviles, debes realizar las in­s­tru­c­cio­nes CSS adecuadas para un diseño re­s­po­n­si­vo.
• Tablas como elemento de diseño: en el pasado, las tablas HTML se uti­li­za­ban a menudo para el diseño gráfico de las páginas web. Hoy en día, es pre­fe­ri­ble no hacerlo y organizar el diseño ex­clu­si­va­me­n­te a través de las hojas CSS.
• Unidades ausentes o in­cohe­re­n­tes: si incluyes una tabla con valores numéricos, puede ocurrir fá­ci­l­me­n­te que se utilicen unidades in­co­rre­c­tas o que no se utilicen unidades en absoluto para entradas in­di­vi­dua­les. Asegúrate de que haya co­he­re­n­cia para evitar co­n­fu­sio­nes.

Otro problema al crear tablas HTML es el relativo a la vi­sua­li­za­ción de ca­ra­c­te­res es­pe­cia­les. Como tienen un si­g­ni­fi­ca­do especial en HTML, los ca­ra­c­te­res <, >, &, " y ', por ejemplo, provocan muy a menudo que las tablas se muestren in­co­rre­c­ta­me­n­te. La solución en este caso es utilizar las entidades HTML co­rre­s­po­n­die­n­tes. Si uno de los ca­ra­c­te­res de la lista aparece en tu tabla prevista, su­s­ti­tú­ye­lo por la cadena de ca­ra­c­te­res adecuada. Nuestro resumen muestra de cuáles se trata: