Tablas

Tablas

Tablas de pipes GFM estándar, además de todo lo que hay en Extensiones de Markdown - sin necesidad de configuración en bxsites.yaml, siempre activas:

| Feature      | Community | Enterprise |
| ------------ | :-------: | ---------: |
| Themes       |    10     |         10 |
| Multi-locale |    Yes    |        Yes |
| Support      |  Forums   |     24/7   |

Lo que se renderiza como:

Una fila de --- bajo el encabezado activa la tabla; pon dos puntos en esa fila separadora para controlar la alineación por columna - :--- izquierda, :---: centro, ---: derecha (sin ningún dos puntos, cada columna usa alineación izquierda por defecto).

El contenido de las celdas es markdown inline normal

code, negrita, cursiva, y enlaces funcionan todos dentro de una celda exactamente igual que en cualquier otra parte de la página:

| Setting | Value |
| --- | --- |
| Default theme | `bootstrap` |
| Docs | [Themes guide](themes.md) |
| Status | **Stable** |

Lo que se renderiza como:

Escapar un pipe dentro de una celda

Un | literal dentro del propio texto plano de una celda necesita una barra invertida, \| - uno sin escapar se interpreta como el separador de la siguiente columna en su lugar:

| Expression | Meaning |
| --- | --- |
| a \| b | bitwise OR |

Lo que se renderiza como:

Un | dentro de código en línea no necesita ningún escape en absoluto - el span de código (`a | b`) ya lo protege:

Filas cortas y largas

Una fila de datos no tiene que coincidir exactamente con el número de columnas del encabezado - una fila corta se rellena con celdas vacías, y una fila larga tiene sus celdas adicionales descartadas silenciosamente, ambos comportamientos controlados por tableOptions.appendMissingColumns/discardExtraColumns más abajo:

| One | Two | Three |
| --- | --- | --- |
| a | b |
| c | d | e | f |

Lo que se renderiza como:

Configurar el análisis

El manejo de filas cortas/largas, la propia rigurosidad de la fila separadora ---, y la clase CSS con la que se renderiza cada <table> están todos controlados por markdown.tableOptions de bxsites.yaml; los valores por defecto que se muestran a lo largo de esta página son casi siempre lo que quieres.

Desplazamiento responsivo y un encabezado fijo

Toda tabla renderizada se envuelve automáticamente en un div .bxsites-table-wrap - sin necesidad de configuración en bxsites.yaml, sin markdown adicional. Esto le da a una tabla ancha su propia barra de desplazamiento horizontal en lugar de desbordar la página, y limita las tablas altas (más allá de un max-height) a una altura fija con su propia barra de desplazamiento vertical, con la fila de encabezado fijada en su sitio mientras el cuerpo se desplaza por debajo - una tabla corta como las de arriba nunca llega a tener barra de desplazamiento alguna, ya que ya cabe sin problema. Una sobrescritura personalizada en theme/ puede modificar el estilo de .bxsites-table-wrap (su max-height, en particular) igual que cualquier otra clase CSS.

Más allá de los datos simples

Dos recetas más se construyen directamente encima de una tabla simple como las de arriba:

• ¿Necesitas algo más cercano a las columnas de tabla Select/Rating de GitBook - una insignia de estado o una valoración con estrellas en una celda? Consulta Recetas de visualización.
• ¿Necesitas que un lector realmente pueda ordenar o filtrar una tabla del lado del cliente, en lugar de solo leerla? Consulta Una tabla ordenable y filtrable.