Tabellen

​

Was sind Tabellen in OPC Plus?

Tabellen in OPC Plus ermöglichen dir, Daten strukturiert und übersichtlich darzustellen. Du kannst beliebige Inhalte spaltenweise anordnen und die Tabellen variabel an deine Bedürfnisse anpassen. Egal ob Produktvergleiche, Merkmalslisten oder Datenübersichten – Tabellen bieten die richtige Struktur.

---

​

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.

• 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.

• 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.

• 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.

• Kompakt (weniger Innenabstand) – Reduziert den Zellen-Innenabstand und macht die Tabelle kompakter, ohne den Inhalt zu verändern.

• 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.

​

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.