`, que significa “table row”. Se necesita una etiqueta de introducción y otra de cierre para cada fila.
- `| `: la etiqueta ` | ` significa “Datos de tabla”, es decir, los datos reales de la tabla. Para cada elemento ` | ` insertado se genera automáticamente una celda de tabla y, por tanto, una columna. La información deseada se introduce entre la introducción (` | `) y el cierre (` | `).
- ``: la mencionada etiqueta ` | ` es básicamente una forma especial de la etiqueta de celda de tabla ` | `. 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:
```html
| Plato |
Descripción |
Precio |
| Espaguetis boloñesa |
Pasta casera con salsa de carne |
9,50 € |
| Pizza margarita |
Pizza con salsa de tomate, mozzarella y albahaca fresca |
9,00 € |
| Ensalada César |
Lechuga, pechuga de pollo, picatostes, aliño César |
8,50 € |
```
En la página web, la tabla tiene este aspecto:
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/tablas-html-ejemplo.png) El diseño real de la tabla depende de las respectivas instrucciones CSS de tu proyecto web. ## 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](https://www.ionos.es/digitalguide/paginas-web/diseno-web/que-es-el-diseno-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](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/html-entities/) 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:
| Caracteres especiales |
Entidad HTML |
| `<` |
`<` |
| `>` |
`>` |
| `&` |
`&` |
| `"` |
`"` |
| `'` |
`'` |
This is a markdown version of: [https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/tablas-en-html/](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/tablas-en-html/) for AI/LLM consumption. |