Clase 03 — Tablas y Estructura
Tablas básicas
| Herramienta | Uso | Tipo |
|-------------|----------------|------|
| Docker | Contenedores | CLI |
| Kubernetes | Orquestación | CLI |
| Terraform | IaC | CLI |
| Herramienta | Uso | Tipo |
|---|---|---|
| Docker | Contenedores | CLI |
| Kubernetes | Orquestación | CLI |
| Terraform | IaC | CLI |
Alineación de columnas
| Izquierda | Centro | Derecha |
|:----------|:------:|--------:|
| texto | texto | texto |
| más | más | más |
| Izquierda | Centro | Derecha |
|---|---|---|
| texto | texto | texto |
| más | más | más |
:---→ alineación izquierda (default):---:→ alineación centro---:→ alineación derecha
Tablas con formato
| Variable | Descripción | Default |
|----------|-------------|---------|
| `PORT` | Puerto del servidor | `8000` |
| `DB_URL` | URL de la base de datos | `sqlite://` |
| `DEBUG` | Modo debug | `false` |
| `LOG_LEVEL` | Nivel de logging | `info` |
| Variable | Descripción | Default |
|---|---|---|
PORT | Puerto del servidor | 8000 |
DB_URL | URL de la base de datos | sqlite:// |
DEBUG | Modo debug | false |
LOG_LEVEL | Nivel de logging | info |
Tablas complejas con HTML
Cuando Markdown no alcanza, podés usar HTML:
<table>
<tr>
<th>Servicio</th>
<th>Puerto</th>
<th>Estado</th>
</tr>
<tr>
<td>Frontend</td>
<td>3000</td>
<td>Running</td>
</tr>
<tr>
<td>Backend</td>
<td>8080</td>
<td>Running</td>
</tr>
<tr>
<td>Database</td>
<td>5432</td>
<td>Degraded</td>
</tr>
</table>
Secciones colapsables (details y summary)
Para crear contenido que se expande al hacer clic, usá las etiquetas HTML details y summary:
<details>
<summary>Configuración avanzada</summary>
Contenido oculto que se muestra al hacer clic.
- Opción 1: valor
- Opción 2: valor
</details>
Ejemplo renderizado:
🔧 Configuración avanzada
Contenido oculto que se muestra al hacer clic.
services:
web:
image: nginx:alpine
environment:
- NODE_ENV=production
Colapsables anidados
Podés anidar secciones colapsables usando details dentro de details:
<details>
<summary>Servicios</summary>
<details>
<summary>Frontend</summary>
Puerto: 3000, Framework: React
</details>
<details>
<summary>Backend</summary>
Puerto: 8080, Framework: Express
</details>
</details>
Líneas horizontales
---
Usá --- para separar secciones visualmente. Es equivalente a hr en HTML.
Notas al pie (footnotes)
Docker[^1] es una plataforma de contenedores.
Kubernetes[^2] orquesta esos contenedores.
[^1]: https://www.docker.com
[^2]: https://kubernetes.io
Ejemplo: Tabla de comparación de herramientas
## Comparación de herramientas CI/CD
| Característica | GitHub Actions | GitLab CI | Jenkins |
|:---------------|:--------------:|:---------:|:-------:|
| Cloud hosted | ✅ | ✅ | ❌ |
| Self-hosted | ✅ | ✅ | ✅ |
| YAML config | ✅ | ✅ | ⚠️ |
| Marketplace | ✅ | ❌ | ✅ |
| Gratis (público) | ✅ | ✅ | ✅ |
| Curva de aprendizaje | Baja | Media | Alta |
Ejercicios
- Creá una tabla con 5 comandos Docker, su descripción y un ejemplo
- Creá una sección colapsable con instrucciones de troubleshooting
- Creá una tabla de comparación entre 3 tecnologías de tu elección con emojis de estado