Insertar tabla estática
Presentá datos de manera organizada para facilitar la lectura y la comprensión de los usuarios.
En esta página
Qué es la tabla
La tabla dispone datos en filas y columnas de manera ordenada y estructurada.
La primera fila tiene el encabezado de cada columna.
A partir de la segunda fila, cada una presenta un registro y cada columna presenta un dato asociado con el registro (el tipo de dato que indique su título).
La tabla puede tener tantos registros y columnas como necesite la información.
Por ejemplo, la siguiente tabla
| Provincia | Partido o departamento | Localidad |
|---|---|---|
| Buenos Aires | La Matanza | San Justo |
| Buenos Aires | La Matanza | Ramos Mejía |
| Buenos Aires | Berazategui | Villa España |
| Buenos Aires | Berazategui | Ranelagh |
| Córdoba | Río Cuarto | Coronel Baigorria |
| Córdoba | Río Cuarto | Vicuña Mackenna |
| Córdoba | Cruz del Eje | San Marcos Sierras |
| Córdoba | Cruz del Eje | Villa de Soto |
nos informa en su primera fila el título de cada columna (dice el tipo de información que contienen esas celdas). A partir de la segunda fila leemos los registros: muy rápidamente podemos leer que Ranelagh pertenece al departamento Berazategui de la provincia de Buenos Aires y que cuatro de las localidades están en Córdoba.
Cuando clasificamos o estructuramos la información en tablas, podemos hacer más comprensible y útil una infomación para el usuario.
Buenas y malas prácticas
La tabla siempre presenta información estructurada.
Si la tabla es muy extensa o compleja, quizá te convenga más usar las tablas dinámicas con buscador.
Nunca uses una tabla para diseñar (por ejemplo, para disponer imágenes o videos en varias columnas de una misma fila), es una pésima práctica web.
Insertar una tabla
Para insertar una tabla, copiá el siguiente bloque de código, editalo y pegalo entre dos párrafos con una línea libre arriba y abajo.
| Título columna 1 | Título columna 2 | Título columna 3 | Título columna n |
| ----------------- | ----------------- | ----------------- | ----------------- |
| Registro 1 dato 1 | Registro 1 dato 2 | Registro 1 dato 3 | Registro 1 dato n |
| Registro 2 dato 1 | Registro 2 dato 2 | Registro 2 dato 3 | Registro 2 dato n |
| Registro n dato 1 | Registro n dato 2 | Registro n dato 3 | Registro 1 dato n |
En la primera fila del bloque encerramos el título de cada columna entre barras verticales | y un espacio a cada lado.
En la segunda fila del bloque encerramos entre barras verticales | y un espacio a cada lado tres o más guiones por cada columna.
Por defecto, los registros se alinean a la izquierda. Si querés alinear el contenido de una columna centrado o a la izquierda (excepto la primera columna, que siempre se alinea a la izquierda), en la columna correspondiente de la segunda fila del código agregá dos puntos a cada lado de los guiones para centrar y dos puntos a la derecha de los guiones para alinear a la derecha.
A partir de la tercera fila del bloque de código escribimos una línea de código por registro. Los datos de cada columna del registro (de cada celda de la tabla) también se escriben en un solo párrafo entre barras verticales | y un espacio a cada lado. Cuidado, si saltás de línea dentro de una celda se rompe el código.
Dentro de una celda podés insertar hipervínculos y botones de acción.
Por ejemplo, la siguiente tabla
| Nombre | Descripción 1 | Número | Sitio web |
|---|---|---|---|
| Nombre 1 | Párrafo descripción 1 | 1 | Botón 1 |
| Nombre 2 | Párrafo descripción 2 | 1 | Botón 2 |
| Nombre 3 | Párrafo descripción 3 | 1 | Botón 3 |
| Nombre 4 | Párrafo descripción 4 | 1 | Botón 4 |
| Nombre 5 | Párrafo descripción 5 | 1 | Botón 5 |
que tiene la penúltima columna alineada a la izquierda (porque son cifras) y la última centrada con botones info chicos se escribe así.
| Nombre | Descripción 1 | Número | Sitio web |
| -------- | --------------------- | -----: | :-----------------------------------: |
| Nombre 1 | Párrafo descripción 1 | 1 | [Botón 1](https://url){.btn.btn-primary.btn-sm} |
| Nombre 2 | Párrafo descripción 2 | 1 | [Botón 2](https://url){.btn.btn-primary.btn-sm} |
| Nombre 3 | Párrafo descripción 3 | 1 | [Botón 3](https://url){.btn.btn-primary.btn-sm} |
| Nombre 4 | Párrafo descripción 4 | 1 | [Botón 4](https://url){.btn.btn-primary.btn-sm} |
| Nombre 5 | Párrafo descripción 5 | 1 | [Botón 5](https://url){.btn.btn-primary.btn-sm} |