> ## 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?

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

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/q6co4T0-M6X141-r/images/tab1.jpg?fit=max&auto=format&n=q6co4T0-M6X141-r&q=85&s=855e1778a9a6671996753fb1444c9a02" alt="Tabellen Inhalt" width="1606" height="1128" data-path="images/tab1.jpg" />
  </Frame>
</div>

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.

<AccordionGroup>
  <Accordion title="Vorschau: Header-Zeile">
    **Ohne Header-Zeile**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/aB8T_YZE00LBNeBc/images/ohne-header.png?fit=max&auto=format&n=aB8T_YZE00LBNeBc&q=85&s=5f2f70761240e6b4366d76b592cf0ddf" alt="Tabelle ohne Header" width="2000" height="815" data-path="images/ohne-header.png" />
      </Frame>
    </div>

    **Mit Header-Zeile**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/aB8T_YZE00LBNeBc/images/ohne-rahmen.png?fit=max&auto=format&n=aB8T_YZE00LBNeBc&q=85&s=302611cacbda29a16cdd71873292864c" alt="Tabelle mit Header" width="2000" height="817" data-path="images/ohne-rahmen.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Vorschau: Footer-Zeile">
    **Ohne Footer-Zeile**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/PLLQ4W170u32VvPc/images/header.png?fit=max&auto=format&n=PLLQ4W170u32VvPc&q=85&s=bbee0f562c4546bbf2bb80acace5a7df" alt="Tabelle ohne Footer" width="2000" height="817" data-path="images/header.png" />
      </Frame>
    </div>

    **Mit Footer-Zeile**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/PLLQ4W170u32VvPc/images/header-footer.png?fit=max&auto=format&n=PLLQ4W170u32VvPc&q=85&s=de34900190e80ef81e21858e5ab146b5" alt="Tabelle mit Footer" width="2000" height="817" data-path="images/header-footer.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

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

<br />

## Style

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/q6co4T0-M6X141-r/images/tab2.jpg?fit=max&auto=format&n=q6co4T0-M6X141-r&q=85&s=1917a8a9e0ee2cf33ada7e022a032163" alt="Tabellen Style" width="1606" height="1294" data-path="images/tab2.jpg" />
  </Frame>
</div>

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.

<AccordionGroup>
  <Accordion title="Vorschau: Zeilen abwechselnd einfärben">
    **Ohne Einfärben**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/q6co4T0-M6X141-r/images/tabd.jpg?fit=max&auto=format&n=q6co4T0-M6X141-r&q=85&s=52adbaed971696a83ffa92face051e4f" alt="Tabelle ohne Striped" width="2150" height="844" data-path="images/tabd.jpg" />
      </Frame>
    </div>

    **Mit Einfärben**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/PLLQ4W170u32VvPc/images/gebaendert.png?fit=max&auto=format&n=PLLQ4W170u32VvPc&q=85&s=4ced992f346f86e308afb8e0711609d1" alt="Tabelle mit Striped" width="2000" height="816" data-path="images/gebaendert.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Vorschau: Hover-Effekt">
    **Mit Hover-Effekt**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/PLLQ4W170u32VvPc/images/hover.png?fit=max&auto=format&n=PLLQ4W170u32VvPc&q=85&s=e11960f641627623cc84a9b3cbbefdf6" alt="Tabelle mit Hover-Effekt" width="2000" height="818" data-path="images/hover.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Vorschau: Kompakt">
    **Kompakt (weniger Innenabstand)**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/PLLQ4W170u32VvPc/images/header.png?fit=max&auto=format&n=PLLQ4W170u32VvPc&q=85&s=bbee0f562c4546bbf2bb80acace5a7df" alt="Tabelle kompakt" width="2000" height="817" data-path="images/header.png" />
      </Frame>
    </div>

    **Weit (mehr Innenabstand)**

    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/ltnBIqXx97JOQogH/images/nicht-kompakt.png?fit=max&auto=format&n=ltnBIqXx97JOQogH&q=85&s=500534dcc858ceb6f87654abf0ef2155" alt="Tabelle nicht kompakt" width="2000" height="959" data-path="images/nicht-kompakt.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

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

<br />

## Farben

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/q6co4T0-M6X141-r/images/tab3.jpg?fit=max&auto=format&n=q6co4T0-M6X141-r&q=85&s=d964f4f3014365b7ec7a572e2187fe20" alt="Tabellen Farben" width="1610" height="1124" data-path="images/tab3.jpg" />
  </Frame>
</div>

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.

<br />

## Mobile

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/q6co4T0-M6X141-r/images/tab4.jpg?fit=max&auto=format&n=q6co4T0-M6X141-r&q=85&s=cd4888af3e1ec3462bba7fefde10727d" alt="Tabellen Mobile" width="1608" height="674" data-path="images/tab4.jpg" />
  </Frame>
</div>

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.

<Note>
  **Tipp:** Tabellen sind sehr flexibel. Experimentiere mit verschiedenen Style- und Farbkombinationen, um die optimale Darstellung für deine Inhalte zu finden.
</Note>