Tablas

Introducción

Esta guía proporciona información sobre la creación y el estilo de las tablas en los documentos markdown de Quarto y en los cuadernos Jupyter.

Los temas cubiertos incluyen:

  • Tablas Markdown: Aprende a crear tablas con Markdown, usando herramientas como TablasGenerator para simplificar.
  • Estilización de tablas: Aplica las clases de Bootstrap para mejorar la apariencia de la tabla con estilos como .striped and .hover.
  • Ajuste de anchos: Controle los anchos de columna con el atributo tbl-colwidths, para tablas individuales o para todo el documento.
  • Tablas referenciables: Haga que las tablas sean referenciables dentro del texto, incluidas las tablas computacionales, utilizando un prefijo tbl- en las etiquetas.
  • Agrupar subtablas: Organizar subtablas relacionadas dentro de un div para un diseño estructurado.
  • Ubicación de los subtítulos: Elige la ubicación de los subtítulos usando tbl-cap-location para posicionar los subtítulos de manera efectiva.
  • Tablas computacionales: Mostrar tablas computacionales utilizando el paquete tabulate de Python o kable() de R, con opciones de diseño y subtítulos.
  • Tablas de cuadrícula: Explore las tablas de cuadrícula avanzadas de Markdown para celdas ricas en contenido, con opciones de alineación del contenido de las celdas.

Este contenido sirve como recurso práctico para mejorar la presentación y funcionalidad de las tablas en la documentación técnica.

Tablas Markdown

Utilice herramientas en línea como TablasGenerator para generar tablas de markdown.

Tablas clásicas

El carácter : puede utilizarse para especificar la alineación de las columnas.

  • --- para la alineación por defecto (D)
  • :---- alineada a la izquierda (L)
  • ----: para alineación a la derecha (R)
  • :---: para centrada (C)
| D       | L    | R     | C      |
|---------|:-----|------:|:------:|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |

: Demostración de la sintaxis clásica de las tablas
Demostración de la sintaxis clásica de las tablas
D L R C
12 12 12 12
123 123 123 123
1 1 1 1

Uso de clases Bootstrap

Lista de clases que pueden utilizarse en las tablas:

"primary", "secondary", "success", "danger", "warning", "info", "light", "dark", "striped", "hover", "active", "bordered", "borderless", "sm", "responsive", "responsive-sm", "responsive-md", "responsive-lg", "responsive-xl", "responsive-xxl".

Por ejemplo, si utilizas {.striped .hover} en tu Markdown, crearás una tabla con filas de colores alternos y resaltarás las filas cuando pases el ratón por encima de ellas:

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: Tabla de demostración {.striped .hover}
Tabla de demostración
Col1 Col2 Col3
A B C
E F G
A G G

Anchos de columna

Utilice el atributo tbl-colwidths, que puede añadirse después del pie de ilustración. Por ejemplo:

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: Tabla de demostración {tbl-colwidths="[75,25]"}
Tabla de demostración
Col1 Col2 Col3
A B C
E F G
A G G
Nota

Tenga en cuenta que, si su tabla no tiene título, aún puede especificar sólo tbl-colwidths

Los anchos de columna también pueden especificarse a nivel de documento (por ejemplo, para tener anchos uniformes en un conjunto de tablas):

---
title: "Mi documento"
format: html
tbl-colwidths: [75,25]
---

Referencias cruzadas

Tablas de código

  1. Incluir un prefijo tbl- en la label para referenciarla
  2. Tablas de referencia utilizando el prefijo @:
```{python}
#| label: tbl-planets
#| tbl-cap: Objeto astronómico

from IPython.display import Markdown
from tabulate import tabulate
table = [["A","B","C"],
         ["E","F","G"],
         ["A","G","G"]]
Markdown(tabulate(
  table, 
  headers=["Col1","Col2", "Col3"]
))
```
Tabla 1: Objeto astronómico
Col1 Col2 Col3
A B C
E F G
A G G

Referencia a la tabla:

ver @tbl-planets.

Salida:

ver Tabla 1.

Tablas Markdown

  1. Añadir un título debajo de la tabla
  2. Incluya una etiqueta #tbl- entre llaves al final del encabezado.

Ejemplo:

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: Mi leyenda {#tbl-letters}

Ver @tbl-letters.

Salida:

Tabla 2: Mi leyenda
Col1 Col2 Col3
A B C
E F G
A G G

Ver Tabla 2.

Uso de la sintaxis div para referencias cruzadas de tablas:

::: {#tbl-letters}

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

Mi leyenda

:::

Subtablas

  • Para combinar subtablas en una composición, utilice un div con un identificador principal.
  • Asigne subidentificadores y subtítulos opcionales a cada tabla dentro del div.
::: {#tbl-panel layout-ncol=2}
| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: Primera Tabla {#tbl-first}

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: Segunda Tabla {#tbl-second}

Título principal
:::

Ver @tbl-panel para más detalles, especialmente @tbl-second.

Salida:

Dos tablas una al lado de la otra. Ambas tablas tienen 3 columnas y 4 filas. La tabla de la izquierda se titula '(a) Primera tabla'. La tabla de la derecha se titula '(b) Segunda tabla'. Encima de ambas tablas aparece el texto 'Tabla 1: Leyenda principal'.

Nota

Observe que el “Título principal” de la tabla es el último bloque del div contenedor.

Ubicación de subtítulos

  • La ubicación por defecto es encima de la tabla.
  • Utilizar tbl-cap-location to change the location to top, bottom, or margin. Por ejemplo:
---
tbl-cap-location: top
---

Cómputos

Usando Python. Mostrar tabla markdown usando el paquete Python tabulate junto con la función Markdown() del módulo IPython display:

```{python}
#| label: tbl-planet-measures
#| tbl-cap: Objeto astronómico

from IPython.display import Markdown
from tabulate import tabulate
table = [["A","B","C"],
         ["E","F","G"],
         ["A","G","G"]]
Markdown(tabulate(
  table, 
  headers=["Col1","Col2", "Col3"]
))
```
Tabla 3: Objeto astronómico
Col1 Col2 Col3
A B C
E F G
A G G

Usando R:

  • Mostrar la tabla markdown utilizando la función knitr kable().
  • Aplique la opción tbl-cap para añadir un título y la opción tbl-colwidths para especificar el ancho de las columnas.
```{r}
#| label: tbl-cars
#| tbl-cap: "Coches"
#| tbl-colwidths: [60,40]

kable(head(cars))
```

Si tu celda de código produce múltiples tablas, también puedes especificar subcapítulos y diseño usando las opciones de la celda:

```{python}
#| label: tbl-example
#| tbl-cap: "Ejemplo"
#| tbl-subcap: 
#|   - "MPG"
#|   - "Taxis"
#| layout-ncol: 2

import seaborn as sns
from IPython.display import Markdown, display
mpg = sns.load_dataset("mpg").head(10)
taxis = sns.load_dataset("taxis").head(10)

display(Markdown(mpg.to_markdown(index = False)))
display(Markdown(taxis.to_markdown(index = False)))
```

Nótese que usamos la función display() importada de IPython para poder mostrar múltiples salidas desde una única celda (por defecto las celdas sólo muestran su última expresión).

```{r}
#| label: tbl-example
#| tbl-cap: "Ejemplo"
#| tbl-subcap: 
#|   - "Coches"
#|   - "Presión"
#| layout-ncol: 2

library(knitr)
kable(head(cars))
kable(head(pressure))
```

Cuadrícula

Las tablas de cuadrícula son un tipo más avanzado de tablas Markdown que permiten elementos de bloque arbitrarios (varios párrafos, bloques de código, listas, etc.). Por ejemplo:

+-----------+-----------+--------------------+
| Col1      | Col2      | Col3               |
+===========+===========+====================+
| A         | B         | - C1               |
|           |           | - C2               |
+-----------+-----------+--------------------+
| E         | F         | - G1               |
|           |           | - G2               |
+-----------+-----------+--------------------+

: Ejemplo de tabla grid.

Que tiene este aspecto cuando se convierte a HTML:

Ejemplo de tabla grid.
Col1 Col2 Col3
A B
  • C1
  • C2
E F
  • G1
  • G2

La fila = separa la cabecera del cuerpo de la tabla, y puede omitirse para una tabla sin cabecera. No se admiten celdas que abarquen varias columnas o filas.

Las alineaciones pueden especificarse como en las tablas clásicas, poniendo dos puntos en los límites de la línea separadora tras el encabezamiento:

  • ===: para alineación a la derecha (R)
  • :=== alineada a la izquierda (L)
  • :===: para centrada (C)
+---------+--------+------------------+
| R       | L      | C                |
+========:+:=======+:================:+
| A       | B      | C                |
+---------+--------+------------------+

Que tiene este aspecto cuando se convierte a HTML:

R L C
A B C

En las tablas sin encabezado, los dos puntos van en la línea superior:

+----------:+:----------+:--------:+
| A         | B         | C        |
+-----------+-----------+----------+

Que tiene este aspecto cuando se convierte a HTML:

A B C

Tenga en cuenta que las tablas de cuadrícula son bastante difíciles de escribir con un editor de texto plano (porque, a diferencia de las tablas de tuberías, los indicadores de columna deben alinearse). A continuación se indican algunas herramientas que pueden ayudar a crear tablas cuadriculadas:

Referencias