Tabelle

Tabelle

Tabelle a pipe GFM standard, in aggiunta a tutto quanto in Estensioni Markdown - nessuna configurazione di bxsites.yaml necessaria, sempre attive:

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

Che viene renderizzato così:

Una riga di --- sotto l'intestazione attiva la tabella; metti i due punti su quella riga separatrice per controllare l'allineamento per colonna - :--- sinistra, :---: centro, ---: destra (nessun due punti fa ricadere ogni colonna sull'allineamento a sinistra).

Il contenuto delle celle è normale markdown inline

code, grassetto, corsivo, e link funzionano tutti dentro una cella esattamente come in qualsiasi altro punto della pagina:

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

Che viene renderizzato così:

Escape di una pipe dentro una cella

Un | letterale nel testo semplice di una cella richiede un backslash, \| - uno non sfuggito viene invece letto come il separatore della colonna successiva:

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

Che viene renderizzato così:

Un | dentro il codice inline non ha affatto bisogno di essere sfuggito - lo span di codice (`a | b`) lo protegge già:

Righe corte e lunghe

Una riga di dati non deve corrispondere esattamente al numero di colonne dell'intestazione - una riga corta viene riempita con celle vuote, e una riga lunga ha le proprie celle in eccesso scartate silenziosamente, entrambi i comportamenti controllati da tableOptions.appendMissingColumns/discardExtraColumns qui sotto:

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

Che viene renderizzato così:

Configurare il parsing

La gestione delle righe corte/lunghe, il rigore della riga separatrice --- stessa, e la classe CSS con cui viene renderizzata ogni <table> sono tutti controllati dalla chiave markdown.tableOptions di bxsites.yaml; i valori predefiniti mostrati in questa pagina sono quasi sempre quello che vuoi.

Scorrimento responsive e intestazione fissa

Ogni tabella renderizzata viene automaticamente racchiusa in un div .bxsites-table-wrap - nessuna configurazione di bxsites.yaml, nessun markdown aggiuntivo. Dà a una tabella larga una propria barra di scorrimento orizzontale invece di farla traboccare oltre la pagina, e limita le tabelle alte (oltre una max-height) a un'altezza fissa con una propria barra di scorrimento verticale, con la riga di intestazione fissata mentre il corpo scorre sotto di essa - una tabella corta come quelle qui sopra non sviluppa mai una barra di scorrimento, dato che ci sta già. Una sovrascrittura personalizzata in .theme/ può ridefinire lo stile di .bxsites-table-wrap (in particolare la sua max-height), come qualsiasi altra classe CSS.

Temi

Ogni tema integrato rende una tabella come una card a sé stante - un wrapper arrotondato e bordato, una fascia di intestazione colorata, separatori orizzontali di riga senza linee verticali di griglia e una tinta zebra/hover sulle righe - e disegna tutto questo a partire da sei proprietà personalizzate CSS, dichiarate per modalità (:root e [data-theme="dark"]) nel assets/style.css del tema stesso:

Poiché ognuna è dichiarata in entrambe le modalità, una tabella segue l'interruttore del tema come il resto della pagina, invece di lasciare una lastra bianca in modalità chiara su una pagina scura. Puoi ridefinirne una qualsiasi da extraCss - senza alcun override del tema:

[data-theme="dark"] {
	--bxsites-table-head-bg: #241b2e;
	--bxsites-table-hover-bg: rgba(167, 139, 250, 0.12);
}

Mantieni --bxsites-table-stripe-bg/-hover-bg come colori alfa: sono disegnati sopra ciò che imposta --bxsites-table-bg, quindi un valore opaco copre la superficie della card invece di tingerla. Tutto ciò che va oltre il colore - il padding, il raggio degli angoli, le etichette maiuscole dell'intestazione - è un vero override .theme/, esattamente come qualsiasi altro CSS in un tema.

Oltre i dati semplici

Altre due ricette si costruiscono direttamente sopra una tabella semplice come quelle sopra:

• Serve un chip di stato o una valutazione a stelle in una cella? Vedi Ricette per i visualizzatori.
• Serve che un lettore possa davvero ordinare o filtrare una tabella lato client, invece di limitarsi a leggerla? Vedi Una tabella ordinabile e filtrabile.