> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.
# Tabellen
> Flexible Tabellen-Portlets für strukturierte Datendarstellung in OPC Plus
## Was sind Tabellen in OPC Plus?
Mit Tabellen in OPC Plus baust du deine Tabelle direkt im Editor auf – Spalte für Spalte, ganz ohne eine einzige Zeile HTML. In Minuten entsteht so eine Tabelle, die automatisch die Farben deines Templates übernimmt und auf dem Smartphone genauso sauber aussieht wie am Desktop, statt gequetscht oder mit Scrollbalken. Egal ob Produktvergleiche, Merkmalslisten oder Datenübersichten – einmal angelegt, ist die Tabelle fertig gepflegt, ganz ohne wiederholte HTML-Anpassungen.
Das Tutorial zum Video gibt es auch als Blogbeitrag: [Tabellen im JTL-Shop erstellen – ohne HTML](https://dreizack-medien.de/tutorials/tabellen-jtl-shop-erstellen-ohne-html).
***
## Inhalt
Im **Inhalt**-Tab legst du die Grundstruktur deiner Tabelle fest. Ganz oben steuerst du per Schalter drei Optionen:
* **Header-Zeile** – Aktiviert eine Kopfzeile, die sich farblich vom Rest der Tabelle abhebt. Die Farben werden im **Farben**-Tab eingestellt.
**Ohne Header-Zeile**
**Mit Header-Zeile**
* **Footer-Zeile** – Fügt optional eine Fußzeile am Ende der Tabelle hinzu, diese hebt sich in der gleichen Farbe wie die Header-Zeile ab.
**Ohne Footer-Zeile**
**Mit Footer-Zeile**
* **Erste Spalte als Header** – Behandelt die erste Spalte wie eine Kopfzeile, was sich für Merkmalslisten eignet.
Darunter vergibst du im Namensfeld einen internen Titel für die Tabelle (z. B. „Sitzgelegenheiten"). Dieser Titel erscheint als Überschrift über der Tabelle im Frontend.
Der Tabelleneditor zeigt dir das vollständige Raster. Für jede Spalte kannst du oben die **Ausrichtung** (links, zentriert, rechts) und eine **Mindestbreite in Pixel** festlegen. Die Inhalte trägst du direkt in die Zellen ein. Formatierungen sind per Markdown möglich – ein Hinweis dazu steht direkt unter dem Editor:
* `**fett**` → **fett**
* `*kursiv*` → *kursiv*
* `[Linktext](URL)` → klickbarer Link
Mit **+ Zeile** und **+ Spalte** erweiterst du die Tabelle nach unten oder rechts. Mit **– Letzte Spalte entfernen** löschst du die rechteste Spalte wieder. Jede Zeile lässt sich über das **Sechs-Punkte-Symbol** (⠿) am linken Rand per Drag-and-drop in der Reihenfolge verschieben. Mit dem **Mülleimer-Symbol** am rechten Rand wird die gesamte Zeile gelöscht.
## Style
Im **Style**-Tab steuerst du das visuelle Erscheinungsbild der Tabelle über Checkboxen und Auswahlfelder:
* **Zeilen abwechselnd einfärben (striped)** – Gerade und ungerade Zeilen erhalten unterschiedliche Hintergrundfarben. Die genaue Farbe legst du im Farben-Tab unter „Striped-Hintergrund" fest.
**Ohne Einfärben**
**Mit Einfärben**
* **Rahmen anzeigen** – Fügt sichtbare Trennlinien zwischen allen Zellen ein. Die Farbe der Linien ist ebenfalls im Farben-Tab einstellbar.
* **Hover-Effekt auf Zeilen** – Die Zeile, über die der Mauszeiger bewegt wird, wechselt zur Hover-Hintergrundfarbe. So können Besucher leichter verfolgen, welche Zeile sie gerade lesen.
**Mit Hover-Effekt**
* **Kompakt (weniger Innenabstand)** – Reduziert den Zellen-Innenabstand und macht die Tabelle kompakter, ohne den Inhalt zu verändern.
**Kompakt (weniger Innenabstand)**
**Weit (mehr Innenabstand)**
* **Schriftgröße** – Wähle eine einheitliche Textgröße für alle Zellen (z. B. Groß, Mittel, Klein).
* **Maximale Höhe** – Begrenzt die Tabellenhöhe in Pixel. Ist der Inhalt höher als der angegebene Wert, erscheint eine Scrollleiste.
* **Scroll-Lock (X/Y getrennt)** – Ermöglicht unabhängiges horizontales und vertikales Scrollen innerhalb der Tabelle. Besonders nützlich bei breiten Tabellen mit festem Header.
## Farben
Im **Farben**-Tab definierst du das komplette Farbschema der Tabelle. Die Eingabe erfolgt entweder direkt als RGB-Wert oder über den integrierten Farbwähler, der sich per Klick auf den Farbkreis neben dem jeweiligen Eingabefeld öffnet:
* **Header-Hintergrund** – Hintergrundfarbe der Kopfzeile.
* **Header-Textfarbe** – Schriftfarbe innerhalb der Kopfzeile.
* **Striped-Hintergrund (gerade Zeilen)** – Hintergrundfarbe für gerade Zeilen beim Zebrastreifen-Muster.
* **Rahmenfarbe** – Farbe aller Zelltrennlinien.
* **Hover-Hintergrund** – Hintergrundfarbe beim Überfahren einer Zeile mit der Maus.
Unter NIU Plus (Theme v2) folgt die Tabelle automatisch dem Dark Mode. Hast du hier im Farben-Tab eigene Farben gesetzt, bleiben diese auch im Dark Mode erhalten.
## Mobile
Im **Mobile**-Tab legst du fest, wie sich die Tabelle auf kleinen Bildschirmen verhält. Zwei Einstellungen stehen zur Verfügung:
**Mobile-Strategie** – Bestimmt das Darstellungsverhalten auf mobilen Geräten:
* **Auto – Card unter Breakpoint, Scroll darüber** – Unterhalb des Breakpoints wird jede Tabellenzeile als eigene Karte angezeigt (Spaltenbezeichnung als Label links, Inhalt rechts). Auf Geräten oberhalb des Breakpoints bleibt die normale Tabellenstruktur erhalten und lässt sich horizontal scrollen.
* **Horizontal scrollbar, erste Spalte sticky** – Die Tabelle bleibt auf allen Bildschirmgrößen als Tabelle erhalten und ist horizontal scrollbar. Die erste Spalte bleibt dabei immer sichtbar (sticky), was bei vielen Spalten die Orientierung erleichtert.
* **Card-Modus (jede Zeile als Block)** – Jede Zeile wird unabhängig von der Bildschirmgröße immer als Karte dargestellt.
* **Keine Optimierung** – Die Tabelle wird ohne spezielle mobile Anpassung ausgegeben. Geeignet, wenn du das responsive Verhalten selbst per CSS steuerst.
**Breakpoint** – Die Bildschirmbreite, ab der die Mobile-Strategie greift (nur relevant für „Auto"):
* **Klein (\< 576 px)** – Greift bei sehr kleinen Smartphones im Hochformat.
* **Mittel (\< 768 px)** – Greift bei den meisten Smartphones.
* **Groß (\< 992 px)** – Greift auch auf kleinen Tablets.
**Tipp:** Tabellen sind sehr flexibel. Experimentiere mit verschiedenen Style- und Farbkombinationen, um die optimale Darstellung für deine Inhalte zu finden.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.
