Sintaxis de Tablas

Las tablas son una parte importante de la sintaxis extendida de Markdown, utilizadas para mostrar datos de forma estructurada.

Sintaxis Básica de Tablas

Tabla Simple

Utiliza la barra vertical | para separar columnas y - para crear la fila separadora del encabezado:

markdown

| Nombre | Edad | Ocupación |
|--------|------|-----------|
| Zhang  | 25   | Ingeniero |
| Li     | 30   | Diseñador |
| Wang   | 28   | Gerente de Producto |

Visualización Renderizada:

Nombre	Edad	Ocupación
Zhang	25	Ingeniero
Li	30	Diseñador
Wang	28	Gerente de Producto

Alineación de Tablas

Utiliza dos puntos : para controlar la alineación de las columnas:

markdown

| Alineado a la Izquierda | Centrado | Alineado a la Derecha |
|:-----------------------|:--------:|----------------------:|
| Contenido 1            | Contenido 1 | Contenido 1         |
| Contenido 2            | Contenido 2 | Contenido 2         |
| Contenido 3            | Contenido 3 | Contenido 3         |

Visualización Renderizada:

Alineado a la Izquierda	Centrado	Alineado a la Derecha
Contenido 1	Contenido 1	Contenido 1
Contenido 2	Contenido 2	Contenido 2
Contenido 3	Contenido 3	Contenido 3

Detalles de Alineación

Sintaxis de Alineación

Sintaxis	Alineación	Ejemplo
`---`	Izquierda (por defecto)	`
`:--:`	Centrado	`
`--:`	Derecha	`

Tablas de Datos Numéricos

La alineación a la derecha es adecuada para mostrar números:

markdown

| Producto | Precio | Ventas | Ingresos |
|:---------|-------:|-------:|---------:|
| A        | ¥99    | 1,250  | ¥123,750 |
| B        | ¥199   | 856    | ¥170,344 |
| C        | ¥299   | 432    | ¥129,168 |
| **Total**|        | **2,538** | **¥423,262** |

Visualización Renderizada:

Producto	Precio	Ventas	Ingresos
A	¥99	1,250	¥123,750
B	¥199	856	¥170,344
C	¥299	432	¥129,168
Total		2,538	¥423,262

Formato en Tablas

Formato en Línea

Las celdas de la tabla soportan formato en línea de Markdown:

markdown

| Función         | Estado      | Descripción                  |
|-----------------|-------------|------------------------------|
| **Login**       | ✅ Listo     | Los usuarios pueden iniciar sesión por email |
| *Registro*      | 🚧 En progreso | Soporte de registro de terceros |
| `Restablecer contraseña` | ❌ Por hacer | Restablecer contraseña por email |
| [Centro de Usuario](/) | ⏳ Planificado | Gestión de información de usuario |

Visualización Renderizada:

Función	Estado	Descripción
Login	✅ Listo	Los usuarios pueden iniciar sesión por email
Registro	🚧 En progreso	Soporte de registro de terceros
`Restablecer contraseña`	❌ Por hacer	Restablecer contraseña por email
Centro de Usuario	⏳ Planificado	Gestión de información de usuario

Código en Tablas

markdown

| Comando | Función         | Ejemplo              |
|---------|-----------------|----------------------|
| `ls`    | Listar archivos | `ls -la`             |
| `cd`    | Cambiar directorio | `cd /home/user`   |
| `mkdir` | Crear directorio   | `mkdir nueva-carpeta`|
| `rm`    | Eliminar archivos  | `rm -rf carpeta/`  |

Visualización Renderizada:

Comando	Función	Ejemplo
`ls`	Listar archivos	`ls -la`
`cd`	Cambiar directorio	`cd /home/user`
`mkdir`	Crear directorio	`mkdir nueva-carpeta`
`rm`	Eliminar archivos	`rm -rf carpeta/`

Ejemplos de Tablas Complejas

Tabla Comparativa de Tecnologías

markdown

| Característica      | React | Vue | Angular |
|:-------------------|:-----:|:---:|:-------:|
| **Curva de Aprendizaje** | Media | Fácil | Difícil |
| **Rendimiento**         | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **Ecosistema**          | Rico  | Bueno | Completo |
| **Soporte Empresarial** | Facebook | Independiente | Google |
| **TypeScript**          | ✅    | ✅   | ✅ Integrado |
| **Actividad de la Comunidad** | Muy alta | Alta | Media |

Visualización Renderizada:

Característica	React	Vue	Angular
Curva de Aprendizaje	Media	Fácil	Difícil
Rendimiento	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Ecosistema	Rico	Bueno	Completo
Soporte Empresarial	Facebook	Independiente	Google
TypeScript	✅	✅	✅ Integrado
Actividad de la Comunidad	Muy alta	Alta	Media

Tabla de Documentación de API

markdown

| Parámetro | Tipo     | Obligatorio | Predeterminado | Descripción                  |
|-----------|----------|:-----------:|---------------|------------------------------|
| `id`      | `number` | ✅          | -             | Identificador único de usuario |
| `name`    | `string` | ✅          | -             | Nombre de usuario             |
| `email`   | `string` | ✅          | -             | Correo electrónico del usuario |
| `age`     | `number` | ❌          | `null`        | Edad del usuario              |
| `avatar`  | `string` | ❌          | `"/default.jpg"` | URL del avatar           |
| `status`  | `enum`   | ❌          | `"active"`    | Estado de la cuenta: `active` \| `inactive` |

Visualización Renderizada:

Parámetro	Tipo	Obligatorio	Predeterminado	Descripción
`id`	`number`	✅	-	Identificador único de usuario
`name`	`string`	✅	-	Nombre de usuario
`email`	`string`	✅	-	Correo electrónico del usuario
`age`	`number`	❌	`null`	Edad del usuario
`avatar`	`string`	❌	`"/default.jpg"`	URL del avatar
`status`	`enum`	❌	`"active"`	Estado de la cuenta: `active` \| `inactive`

Consejos de Formato de Tablas

Uso de Emoji

markdown

| SO      | Soporte | Nota         |
|---------|:-------:|--------------|
| Windows | ✅      | Soporte total |
| macOS   | ✅      | Soporte total |
| Linux   | ⚠️      | Soporte parcial |
| iOS     | ❌      | No soportado  |
| Android | 🚧      | En desarrollo |

Visualización Renderizada:

SO	Soporte	Nota
Windows	✅	Soporte total
macOS	✅	Soporte total
Linux	⚠️	Soporte parcial
iOS	❌	No soportado
Android	🚧	En desarrollo

Uso de Insignias

markdown

| Proyecto | Estado | Versión |
|----------|--------|---------|
| React    | ![Estable](https://img.shields.io/badge/status-stable-green) | `v18.2.0` |
| Vue      | ![Estable](https://img.shields.io/badge/status-stable-green) | `v3.3.0`  |
| Angular  | ![Beta](https://img.shields.io/badge/status-beta-orange)     | `v16.0.0` |

Manejo de Celdas Vacías

Representación de Contenido Vacío

markdown

| Ítem | Q1   | Q2   | Q3   | Q4   |
|------|:----:|:----:|:----:|:----:|
| Ingresos | 1M   | 1.2M | -    | -    |
| Gastos   | 800K | 900K | 950K | -    |
| Beneficio| 200K | 300K |      |      |

Visualización Renderizada:

Ítem	Q1	Q2	Q3	Q4
Ingresos	1M	1.2M	-	-
Gastos	800K	900K	950K	-
Beneficio	200K	300K

Errores Comunes y Soluciones

1. Barras Verticales Desalineadas

markdown

❌ Incorrecto:
| Nombre | Edad|Ocupación|
|--------|----|----------|
|Zhang|25|Ingeniero|

✅ Correcto:
| Nombre | Edad | Ocupación |
|--------|------|-----------|
| Zhang  | 25   | Ingeniero |

2. Fila Separadora Faltante

markdown

❌ Incorrecto:
| Nombre | Edad | Ocupación |
| Zhang  | 25   | Ingeniero |

✅ Correcto:
| Nombre | Edad | Ocupación |
|--------|------|-----------|
| Zhang  | 25   | Ingeniero |

3. Cantidad de Columnas Inconsistente

markdown

❌ Incorrecto:
| Nombre | Edad | Ocupación |
|--------|------|-----------|
| Zhang  | 25   |  ← Falta la tercera columna

✅ Correcto:
| Nombre | Edad | Ocupación |
|--------|------|-----------|
| Zhang  | 25   | Ingeniero |

4. Manejo de Caracteres Especiales

markdown

❌ Problema:
| Precio | Descripción |
|--------|-------------|
| $100|impuestos incluidos |  ← Barra vertical mal usada

✅ Solución:
| Precio | Descripción |
|--------|-------------|
| $100 | impuestos incluidos |
| $200 | Precio\|impuestos incluidos |  ← Escapa la barra vertical

Funciones Avanzadas de Tablas

Mejorando con HTML

markdown

<table>
  <tr>
    <th colspan="2">Encabezado de columna combinado</th>
    <th>Columna normal</th>
  </tr>
  <tr>
    <td rowspan="2">Fila combinada</td>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

Visualización Renderizada:

Encabezado de columna combinado		Columna normal
Fila combinada	Dato 1	Dato 2
Fila combinada	Dato 3	Dato 4

Estilos de Tabla Personalizados

markdown

<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">Producto</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Precio</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
  </tr>
</table>

Escenarios de Aplicación Práctica

1. Gestión de Proyectos

markdown

## Tabla de Progreso de Tareas

| Tarea               | Responsable | Fecha Inicio | Fecha Fin | Estado | Avance |
|---------------------|-------------|-------------|-----------|:------:|:------:|
| Análisis de Requisitos | Zhang     | 2023-10-01  | 2023-10-07| ✅     | 100%   |
| Diseño UI           | Li         | 2023-10-08  | 2023-10-15| 🚧     | 75%    |
| Desarrollo Frontend | Wang       | 2023-10-16  | 2023-10-30| ⏳     | 0%     |
| Desarrollo Backend  | Zhao       | 2023-10-16  | 2023-11-05| ⏳     | 0%     |
| Pruebas             | Sun        | 2023-11-06  | 2023-11-12| ⏳     | 0%     |

2. Comparación de Productos

markdown

## Comparación de Planes de Suscripción

| Característica   | Gratis | Pro | Empresa |
|------------------|:------:|:---:|:-------:|
| **Límite de usuarios** | 5 | 50 | Ilimitado |
| **Almacenamiento**     | 1GB | 100GB | 1TB |
| **Llamadas API**       | 1000/mes | 100k/mes | Ilimitado |
| **Soporte**            | Comunidad | Email | Dedicado |
| **SLA**                | - | 99.9% | 99.99% |
| **Precio**             | Gratis | ¥99/mes | ¥999/mes |
|                        | [Elegir](/) | [Elegir](/) | [Contactar ventas](/) |

3. Informe Financiero

markdown

## Informe Financiero Mensual

| Ítem         | Ene   | Feb   | Mar   | Total   |
|-------------|------:|------:|------:|--------:|
| **Ingresos**|       |       |       |         |
| Ventas      | 50,000| 55,000| 60,000| 165,000 |
| Servicios   | 20,000| 22,000| 25,000| 67,000  |
| Otros       | 2,000 | 1,500 | 3,000 | 6,500   |
| *Subtotal*  |*72,000*|*78,500*|*88,000*|*238,500*|
| **Gastos**  |       |       |       |         |
| Sueldos     | 30,000| 30,000| 30,000| 90,000  |
| Alquiler    | 8,000 | 8,000 | 8,000 | 24,000  |
| Marketing   | 10,000| 12,000| 15,000| 37,000  |
| *Subtotal*  |*48,000*|*50,000*|*53,000*|*151,000*|
| **Beneficio Neto**|**24,000**|**28,500**|**35,000**|**87,500**|

Mejores Prácticas

1. Mantén la Simplicidad

markdown

✅ Recomendado: Simple y claro
| Ítem | Estado |
|------|--------|
| A    | Listo  |
| B    | En progreso |

❌ No recomendado: Demasiada información
| Nombre del Proyecto | Estado Actual | Descripción Detallada | Responsable | Fecha Inicio | Fecha Fin | Notas |

2. Usa Encabezados Significativos

markdown

✅ Recomendado: Encabezados descriptivos
| Lenguaje de Programación | Dificultad | Aplicación |

❌ No recomendado: Encabezados vagos
| Ítem1 | Ítem2 | Ítem3 |

3. Usa la Alineación Apropiadamente

markdown

✅ Recomendado: Números alineados a la derecha
| Producto | Precio | Cantidad |
|:---------|------:|--------:|
| A        | ¥100  | 50      |

✅ Recomendado: Texto alineado a la izquierda
| Nombre | Departamento | Puesto |
|:-------|:-------------|:-------|
| Zhang  | Tecnología   | Ingeniero |

Salida HTML

Las tablas de Markdown se convierten a HTML:

markdown

| Nombre | Edad |
|--------|------|
| Zhang  | 25   |

Se convierte en:

html

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zhang</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Sintaxis Relacionada

Descripción general de la sintaxis básica - Fundamentos de Markdown
Descripción general de la sintaxis extendida - Más extensiones
Sintaxis HTML - Mejoras HTML

Práctica

Intenta crear las siguientes tablas:

Una tabla de presentación de miembros del equipo
Una tabla comparativa de precios de productos
Una tabla de seguimiento de progreso de proyectos
Una tabla de evaluación de stack tecnológico

Herramientas Recomendadas

Generadores de Tablas

Herramientas online: Tables Generator, Markdown Tables Generator
Plugins de editor: VS Code Markdown Table, Edición de tablas en Typora
Herramientas de conversión: Excel a Markdown, CSV a Markdown

Embellecimiento de Tablas

Frameworks CSS: Bootstrap, Tailwind CSS
Librerías de tablas: DataTables, AG Grid
Extensiones de Markdown: markdown-it-table, remark-gfm

Sintaxis de Tablas ​

Sintaxis Básica de Tablas ​

Tabla Simple ​

Alineación de Tablas ​

Detalles de Alineación ​

Sintaxis de Alineación ​

Tablas de Datos Numéricos ​

Formato en Tablas ​

Formato en Línea ​

Código en Tablas ​

Ejemplos de Tablas Complejas ​

Tabla Comparativa de Tecnologías ​

Tabla de Documentación de API ​

Consejos de Formato de Tablas ​

Uso de Emoji ​

Uso de Insignias ​

Manejo de Celdas Vacías ​

Representación de Contenido Vacío ​

Errores Comunes y Soluciones ​

1. Barras Verticales Desalineadas ​

2. Fila Separadora Faltante ​

3. Cantidad de Columnas Inconsistente ​

4. Manejo de Caracteres Especiales ​

Funciones Avanzadas de Tablas ​

Mejorando con HTML ​

Estilos de Tabla Personalizados ​

Escenarios de Aplicación Práctica ​

1. Gestión de Proyectos ​

2. Comparación de Productos ​

3. Informe Financiero ​

Mejores Prácticas ​

1. Mantén la Simplicidad ​

2. Usa Encabezados Significativos ​

3. Usa la Alineación Apropiadamente ​

Salida HTML ​

Sintaxis Relacionada ​

Práctica ​

Herramientas Recomendadas ​

Generadores de Tablas ​

Embellecimiento de Tablas ​

Sintaxis de Tablas

Sintaxis Básica de Tablas

Tabla Simple

Alineación de Tablas

Detalles de Alineación

Sintaxis de Alineación

Tablas de Datos Numéricos

Formato en Tablas

Formato en Línea

Código en Tablas

Ejemplos de Tablas Complejas

Tabla Comparativa de Tecnologías

Tabla de Documentación de API

Consejos de Formato de Tablas

Uso de Emoji

Uso de Insignias

Manejo de Celdas Vacías

Representación de Contenido Vacío

Errores Comunes y Soluciones

1. Barras Verticales Desalineadas

2. Fila Separadora Faltante

3. Cantidad de Columnas Inconsistente

4. Manejo de Caracteres Especiales

Funciones Avanzadas de Tablas

Mejorando con HTML

Estilos de Tabla Personalizados

Escenarios de Aplicación Práctica

1. Gestión de Proyectos

2. Comparación de Productos

3. Informe Financiero

Mejores Prácticas

1. Mantén la Simplicidad

2. Usa Encabezados Significativos

3. Usa la Alineación Apropiadamente

Salida HTML

Sintaxis Relacionada

Práctica

Herramientas Recomendadas

Generadores de Tablas

Embellecimiento de Tablas