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, estructurando así la información de forma clara. Especificando celdas de encabezado, filas y celdas de datos, puedes determinar individualmente cómo se estructuran.

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

Una tabla en HTML es un elemento HTML estructurado que se utiliza para mostrar datos y texto en formato tabular. Para definir y estructurar una tabla se necesitan varias etiquetas HTML. El diseño gráfico de las tablas, el HTML Table Styling, se realiza por separado utilizando las instrucciones CSS correspondientes.

Las tablas en HTML ofrecen las posibilidades de las tablas clásicas: organizan la información a mostrar en filas (horizontalmente) y columnas (verticalmente). Por esta razón, las tablas en los documentos HTML están predestinadas como alternativa a las listas, especialmente para la presentación de los siguientes contenidos:

• Calendario
• Datos de contacto
• Clasificaciones
• Horarios
• Listas de precios
• Comparación de productos
• Estadísticas

¿Qué etiquetas son necesarias para una tabla HTML?

Para crear una tabla HTML, siempre se necesitan al menos tres etiquetas diferentes. La etiqueta <th> para cabeceras de tabla HTML es una etiqueta opcional. Las etiquetas principales:

• <table>: la etiqueta HTML <table> es el elemento más importante 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 introducció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 automáticamente una celda de tabla y, por tanto, una columna. La información deseada se introduce entre la introducción (<td>) y el cierre (</td>).
• <th>: la mencionada etiqueta <th> es básicamente una forma especial de la etiqueta de celda de tabla <td>. Suele utilizarse para resaltar las celdas de cabecera (“table heading”), pero también puede utilizarse para resaltar la entrada inicial de una fila.

Ejemplo de tabla HTML sencilla

Para ilustrar las posibilidades de las etiquetas de tabla, a continuación, te mostramos un sencillo ejemplo de tabla HTML. Como ejemplo, se presentan descripciones y precios de tres platos. En la fila de cabecera, definimos los encabezamientos de las tres columnas “Plato”, “Descripción” y “Precio”. A continuación, aparecen otras tres filas en la que se ofrece la informació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 soluciones

Al crear tablas HTML existen algunos problemas recurrentes, pero que pueden evitarse en gran medida trabajando de forma limpia y cuidadosa. Hemos resumido los problemas más comunes:

• Legibilidad: las tablas son difíciles de leer para los usuarios y los lectores de pantalla si no se define una estructura clara. Por lo tanto, omite los encabezados solo si son absolutamente irrelevantes para la estructura de la información.
• Visualización en dispositivos móviles: las tablas HTML estándar suelen visualizarse mal en smartphones y tablets. Por ello, para que las tablas integradas puedan verse también en dispositivos móviles, debes realizar las instrucciones CSS adecuadas para un diseño responsivo.
• Tablas como elemento de diseño: en el pasado, las tablas HTML se utilizaban a menudo para el diseño gráfico de las páginas web. Hoy en día, es preferible no hacerlo y organizar el diseño exclusivamente a través de las hojas CSS.
• Unidades ausentes o incoherentes: si incluyes una tabla con valores numéricos, puede ocurrir fácilmente que se utilicen unidades incorrectas o que no se utilicen unidades en absoluto para entradas individuales. Asegúrate de que haya coherencia para evitar confusiones.

Otro problema al crear tablas HTML es el relativo a la visualización de caracteres especiales. Como tienen un significado especial en HTML, los caracteres <, >, &, " y ', por ejemplo, provocan muy a menudo que las tablas se muestren incorrectamente. La solución en este caso es utilizar las entidades HTML correspondientes. Si uno de los caracteres de la lista aparece en tu tabla prevista, sustitúyelo por la cadena de caracteres adecuada. Nuestro resumen muestra de cuáles se trata: