---
title: Tabellen
order: 4.6
icon: phosphor-duotone:table
tags: [anleitungen, markdown, gitbook]
---

# Tabellen

Standard-[GFM](https://github.github.com/gfm/#tables-extension-)-Pipe-Tabellen,
zusätzlich zu allem in [Markdown-Erweiterungen](markdown.md) - keine
`bxsites.yaml`-Konfiguration nötig, immer aktiv:

```markdown title="Example" linenums="1"
| Feature      | Community | Enterprise |
| ------------ | :-------: | ---------: |
| Themes       |    10     |         10 |
| Multi-locale |    Yes    |        Yes |
| Support      |  Forums   |     24/7   |
```

Was so gerendert wird:

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

Eine Zeile aus `---` unter der Kopfzeile schaltet die Tabelle ein; setze
Doppelpunkte in diese Trennzeile, um die Ausrichtung pro Spalte zu steuern
- `:---` links, `:---:` zentriert, `---:` rechts (keine Doppelpunkte lässt
jede Spalte standardmäßig linksbündig).

## Zellinhalt ist reguläres Inline-Markdown

`code`, **fett**, *kursiv* und [Links](../index.md) funktionieren alle
innerhalb einer Zelle genau so, wie sie es überall sonst auf der Seite
tun:

```markdown title="Example" linenums="1"
| Setting | Value |
| --- | --- |
| Default theme | `bootstrap` |
| Docs | [Themes guide](themes.md) |
| Status | **Stable** |
```

Was so gerendert wird:

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

## Ein Pipe-Zeichen innerhalb einer Zelle escapen

Ein literales `|` im reinen Text einer Zelle braucht einen Backslash,
`\|` - ein nicht escapetes `|` wird stattdessen als Trenner der nächsten
Spalte gelesen:

```markdown title="Example" linenums="1"
| Expression | Meaning |
| --- | --- |
| a \| b | bitwise OR |
```

Was so gerendert wird:

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

Ein `|` innerhalb von Inline-Code muss überhaupt nicht escaped werden -
der Code-Span (`` `a | b` ``) schützt es bereits:

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

## Kurze und lange Zeilen

Eine Datenzeile muss nicht exakt der Spaltenzahl der Kopfzeile
entsprechen - eine zu kurze Zeile wird mit leeren Zellen aufgefüllt, und
eine zu lange Zeile verliert ihre überzähligen Zellen stillschweigend,
beides gesteuert über
`tableOptions.appendMissingColumns`/`discardExtraColumns` weiter unten:

```markdown title="Example" linenums="1"
| One | Two | Three |
| --- | --- | --- |
| a | b |
| c | d | e | f |
```

Was so gerendert wird:

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

## Das Parsen konfigurieren

Der Umgang mit kurzen/langen Zeilen, die eigene Strenge der
`---`-Trennzeile und die CSS-Klasse, mit der jede `<table>` gerendert
wird, werden alle über
[`markdown.tableOptions`](../configuration.md#markdown) in `bxsites.yaml`
gesteuert; die auf dieser Seite durchgehend gezeigten Standardwerte sind
fast immer das, was du willst.

## Responsives Scrollen und eine fixierte Kopfzeile

Jede gerenderte Tabelle wird automatisch in ein `.bxsites-table-wrap`-Div
eingepackt - keine `bxsites.yaml`-Konfiguration, kein zusätzliches
Markdown nötig. Das gibt einer breiten Tabelle ihre eigene horizontale
Scrollleiste, statt die Seite zu sprengen, und begrenzt hohe Tabellen (ab
einer `max-height`) auf eine feste Höhe mit eigener vertikaler
Scrollleiste, wobei die Kopfzeile fixiert bleibt, während der Rumpf
darunter scrollt - eine kurze Tabelle wie die obigen bekommt nie eine
Scrollleiste, weil sie ohnehin schon passt. Ein eigenes `theme/`-Override
kann `.bxsites-table-wrap` (insbesondere seine `max-height`) genau wie
jede andere CSS-Klasse umgestalten.

## Über reine Daten hinaus

Zwei weitere Rezepte bauen direkt auf einer einfachen Tabelle wie den
obigen auf:

- Brauchst du etwas, das GitBooks Select-/Rating-Tabellenspalten
  näherkommt - einen Status-Chip oder eine Sternebewertung in einer
  Zelle? Siehe [Visualizer-Rezepte](variables-and-functions.md#visualizer-rezepte).
- Soll ein Leser eine Tabelle tatsächlich clientseitig sortieren oder
  filtern können, statt sie nur zu lesen? Siehe [Eine sortierbare,
  filterbare Tabelle](interactivity.md#eine-sortierbare-filterbare-tabelle).