Wie kann ich Tabellen mit dem Tabelleneditor individuell gestalten?

Mit dem Tabelleneditor erstellen Sie komfortabel Tabellen, deren Aussehen sich durch CSS sehr individuell anpassen lässt. Dabei können Sie sowohl das Layout der Tabelle als auch Details wie Farben, Abstände und Rahmen über CSS definieren.

Welche Bearbeitungsoptionen bietet das Strukturelement „Tabelle“?

Für Webseiten können Sie auf das Strukturelement „Tabelle“ zurückgreifen. Es ermöglicht eine komfortable Bearbeitung von Tabelleninhalten direkt im Editor (Details siehe weiterführende Links auf der Seite).

Welche Darstellungsvarianten stehen standardmäßig für Tabellen zur Verfügung?

Im Standard bieten Projekte eine Darstellung mit Rahmen („default“) sowie eine Darstellung ohne Rahmen („light“) an. Welche Darstellungsvarianten auswählbar sind, definieren Sie in der Projektkonfiguration.

Was hat sich ab dem 14.05.2019 beim Tabellen-Weblic® geändert?

Seit dem 14.05.2019 ist das Tabellen-Weblic® mit CSS-Only-Varianten umgesetzt, was eine flexiblere Anpassung ermöglicht. Wenn elementTable.scss Varianten verfügbar sind, werden frühere Klassenangaben aus der Projektkonfiguration durch die CSS-Only-Varianten abgelöst.

Müssen bestehende Seiten nach einem Update umgestellt werden?

Ja. Wenn nach einem Update CSS-Only-Varianten verfügbar sind und die bisherigen Klassenangaben ersetzt werden, müssen Sie bereits vorhandene Tabellen-Elemente in den Seiten entsprechend umstellen.

Wie unterscheidet sich die CSS-Anpassung für die Frontend-Ansicht und die Editor-Ansicht?

Das Tabellen-Element wird im Editor um eine erste Spalte ergänzt, in der die Bearbeiten-Schaltflächen für die Tabellenzeilen angezeigt werden. Deshalb müssen Sie bei unterschiedlichen Spaltenbreiten im CSS sowohl die Frontend-Darstellung (.no-weditor) als auch die Bearbeitung (.weditor) berücksichtigen (z. B. unterschiedliche Breiten per nth-child).

Wie sieht ein Beispiel für CSS-Definitionen für Tabellen aus (Mobile First)?

Ein Beispiel aus der elementTable.scss zeigt u. a. Werte für table (z. B. width, background-color, border, margin-bottom, border-collapse, border-spacing), für th und td (z. B. border-color, padding, text-align) sowie eine Anpassung der Spaltenbreiten über nth-child abhängig von .no-weditor und .weditor. Außerdem wird für td[data-wrap-output='yes'] die Ausgabe mit white-space:pre gesteuert.

Wie funktionieren CSS-Only-Varianten im Tabellen-Kontext?

Im Beispiel wird eine CSS-Only-Variante über eine Klasse wie „.elementTable_var10000“ umgesetzt. Darin werden die Tabellenstile (z. B. Breiten, Farben, Padding) gekapselt, sodass sie als Variante auswählbar bzw. verwendbar sind.

Welche Hervorhebungen sind in den Tabellen-Beispielen vorgesehen?

Das Beispiel zeigt, dass Tabellenzeilen bzw. Zellen hervorgehoben werden können, etwa über Klassen wie „tr.highlighted, th.highlighted, td.highlighted“ sowie über „td.bgColor1, th.bgColor1“, die dann eine definierte Hintergrundfarbe verwenden.

Kann ich CSS-Only-Varianten immer nutzen?

Nein. Die Seite weist darauf hin, dass die Umsetzung über CSS-Only-Varianten nicht für jede Umgebung/Plattform unterstützt wird: Für das genannte Projekt gilt, dass CSS-Only-Varianten nicht unterstützt werden. Für eine andere Anwendung wird stattdessen empfohlen, das CSS ohne SASS-Verschachtelungen zu definieren.

Wie sollte ich CSS definieren, wenn CSS-Only-Varianten nicht unterstützt werden?

Wenn CSS-Only-Varianten nicht unterstützt werden, sollten Sie das CSS im genannten Fall lediglich ohne die in SASS üblichen Verschachtelungen definieren. Außerdem wird empfohlen, dabei die notwendigen Unterschiede zwischen .no-weditor (Frontend) und .weditor (Editor) zu berücksichtigen.

Tabellen mit dem Tabelleneditor gestalten

Startseite

Veröffentlichungsdatum: 14. Mai 2019
Änderungsdatum: 17. Mai 2019

weblication cms tabellen pflegetag formatierung spalten zeilen zellen

Mit dem Tabelleneditor erstellen Sie komfortabel Tabellen, welche über CSS sehr individuell gestaltet werden können.

Beim Einsatz von Tabellen in Webseiten können Sie auf das Weblic^® / Strukturelement "Tabelle" zurückgreifen, welches Ihnen eine komfortable Bearbeitung von Tabelleninhalten ermöglicht (siehe hierzu weiterführende Links unten).

Beim Layout für die Tabelle können Sie individuell über CSS vorgehen und das Aussehen der Tabelle Ihren Vorstellungen anpassen.

Im Standard bieten Ihnen die BASE Projekte eine Standarddarstellung (default) und eine Darstellung ohne Rahmen light) an. Die im Tabellen-Element zur Verfügung stehenden Darstellungsvarianten definieren Sie in der Projektkonfiguration. Im Feld "Auswählbare Style-Klassen" können Sie die von Ihnen gewünschten Darstellungsvarianten ergänzen (mehrere Angaben werden mit dem Pipe-Zeichen getrennt). Dabei geben Sie stellvertretend für die CSS-Klasse den Wert an und direkt dahinter in Klammer die Beschreibung, welche so dann in der Auswahlbox erscheint.

Ein Beispiel zeigt der o.g. Screen der Projektkonfiguration (pricelist(Preisliste)).

Seit 14.05.2019 ist das Tabellen-Weblic® der BASE (Mobile First) mit CSS-Only-Varianten umgesetzt, welche dann eine noch flexiblere Möglichkeit bieten.
Wenn in der elementTable.scss Varianten verfügbar sind, werden die bisherigen Klassenangaben der Projektkonfiguration durch die CSS-Only-Varianten abgelöst. Ggf. müssen Sie nach einem Weblic® Update die schon vorhandenen Tabellen-Element in den Seiten entsprechend umstellen.

Nachfolgend sehen Sie die CSS-Definition am Beispiel einer BASE (Mobile First). In der linken Spalte finden Sie die Umsetzung, welche auf der Projektkonfiguration basiert, auf der rechten Seite die Möglichkeit mit dem aktuellen Tabellen Weblic^® als CSS-Only-Variante.

Beispiel: Auszug aus der elementTable.scss der Mobile First

/* Tabelle für Preisliste 3-spaltig - pricelist(Preisliste) */

table.pricelist {

  width:100%;
  background-color:$backgroundColorTable;
  border:none;
  margin-bottom:12px;
  border-collapse:separate;
  border-spacing:0;

  th {
    border-style:none none solid none;
    border-width:1px;
    border-color:$borderColorTable;
    padding:4px 8px;
    text-align:left;
    .no-weditor &:nth-child(1) {
      width: 12%;
    }
    .no-weditor &:nth-child(2) {
      width: 68%;
    }
    .no-weditor &:nth-child(3) {
      width: 20%;
      text-align:right;
    }
    .weditor &:nth-child(1) {
      width: 10%;
    }
    .weditor &:nth-child(2) {
      width: 7%;
    }
    .weditor &:nth-child(3) {
      width: 68%;
    }
    .weditor &:nth-child(4) {
      width: 15%;
      text-align:right;
    }
  }

  td {
    border-style:none none solid none;
    border-width:1px;
    border-color:$borderColorTable;
    padding:4px 8px;
    .no-weditor &:nth-child(1) {
      width: 12%;
    }
    .no-weditor &:nth-child(2) {
      width: 68%;
    }
    .no-weditor &:nth-child(3) {
      width: 20%;
      text-align:right;
    }
    .weditor &:nth-child(1) {
      width: 10%;
    }
    .weditor &:nth-child(2) {
      width: 7%;
    }
    .weditor &:nth-child(3) {
      width: 68%;
    }
    .weditor &:nth-child(4) {
      width: 15%;
      text-align:right;
    }
  }

  td[data-wrap-output='yes'] {
    white-space:pre;
  }
}

Beispiel: Auszug aus der elementTable.scss der Mobile First

/*@wCssFragment{class:elementTable;variant:10000;livepreview:yes;caption:Tabelle für Preisliste 3-spaltig;caption-en:pricelist three colum}*/
.elementTable_var10000 {

  table {

    width:100%;
    background-color:$backgroundColorTable;
    border:none;
    margin-bottom:12px;
    border-collapse:separate;
    border-spacing:0;

    th {
      border-style:none none solid none;
      border-width:1px;
      border-color:$borderColorTable;
      padding:4px 8px;
      text-align:left;
      .no-weditor &:nth-child(1) {
        width: 12%;
      }
      .no-weditor &:nth-child(2) {
        width: 68%;
      }
      .no-weditor &:nth-child(3) {
        width: 20%;
        text-align:right;
      }
      .weditor &:nth-child(1) {
        width: 10%;
      }
      .weditor &:nth-child(2) {
        width: 7%;
      }
      .weditor &:nth-child(3) {
        width: 68%;
      }
      .weditor &:nth-child(4) {
        width: 15%;
        text-align:right;
      }
    }

    td {
      border-style:none none solid none;
      border-width:1px;
      border-color:$borderColorTable;
      padding:4px 8px;
      .no-weditor &:nth-child(1) {
        width: 12%;
      }
      .no-weditor &:nth-child(2) {
        width: 68%;
      }
      .no-weditor &:nth-child(3) {
        width: 20%;
        text-align:right;
      }
      .weditor &:nth-child(1) {
        width: 10%;
      }
      .weditor &:nth-child(2) {
        width: 7%;
      }
      .weditor &:nth-child(3) {
        width: 68%;
      }
      .weditor &:nth-child(4) {
        width: 15%;
        text-align:right;
      }
    }

    td[data-wrap-output='yes'] {
      white-space:pre;
    }
  }  
  

  tr.highlighted, th.highlighted, td.highlighted {
    background-color:$backgroundColorTableCellHightlighted;
  }

  td.bgColor1, th.bgColor1 {
    background-color:$backgroundColorTableCellHightlighted;
  }  
}

Das Tabellen-Element wird im Editor um eine erste Spalte ergänzt, um dort die Bearbeiten-Schaltflächen für die Tabellenzeilen anzuzeigen. Dementsprechend müssen Sie bei Angabe unterschiedlicher Spaltenbreiten im CSS auf die Frontend-Darstellung (.no-weditor) und die Bearbeitung (.weditor) eingehen.

Das Beispiel basiert auf einem BASE (Mobile First) Projekt, ist aber auch auf eine BASE Classic anwendbar. Dort definieren Sie das CSS lediglich ohne die in SASS üblichen Verschachtelungen. Die BASE Classic unterstützt NICHT die Umsetzung über CSS-Only-Varianten!

Weiterführende Links

Online-Dokumentation: Tabellenbearbeitung

Pflegetag-Referenz: Pflege von Tabellen

FAQs are only visible for Weblication ai search and editors!

Wie kann ich Tabellen mit dem Tabelleneditor individuell gestalten?: Mit dem Tabelleneditor erstellen Sie komfortabel Tabellen, deren Aussehen sich durch CSS sehr individuell anpassen lässt. Dabei können Sie sowohl das Layout der Tabelle als auch Details wie Farben, Abstände und Rahmen über CSS definieren.
Welche Bearbeitungsoptionen bietet das Strukturelement „Tabelle“?: Für Webseiten können Sie auf das Strukturelement „Tabelle“ zurückgreifen. Es ermöglicht eine komfortable Bearbeitung von Tabelleninhalten direkt im Editor (Details siehe weiterführende Links auf der Seite).
Welche Darstellungsvarianten stehen standardmäßig für Tabellen zur Verfügung?: Im Standard bieten Projekte eine Darstellung mit Rahmen („default“) sowie eine Darstellung ohne Rahmen („light“) an. Welche Darstellungsvarianten auswählbar sind, definieren Sie in der Projektkonfiguration.
Wie ergänze ich eigene Darstellungsvarianten in der Projektkonfiguration?: In der Projektkonfiguration können Sie im Feld „Auswählbare Style-Klassen“ die gewünschten Darstellungsvarianten ergänzen. Mehrere Angaben werden mit dem Pipe-Zeichen „|“ getrennt. Dabei geben Sie als CSS-Klasse den Wert an und direkt dahinter in Klammer die Beschreibung, die in der Auswahlbox erscheinen soll (Beispiel: „pricelist(Preisliste)“).
Was hat sich ab dem 14.05.2019 beim Tabellen-Weblic® geändert?: Seit dem 14.05.2019 ist das Tabellen-Weblic® mit CSS-Only-Varianten umgesetzt, was eine flexiblere Anpassung ermöglicht. Wenn elementTable.scss Varianten verfügbar sind, werden frühere Klassenangaben aus der Projektkonfiguration durch die CSS-Only-Varianten abgelöst.
Müssen bestehende Seiten nach einem Update umgestellt werden?: Ja. Wenn nach einem Update CSS-Only-Varianten verfügbar sind und die bisherigen Klassenangaben ersetzt werden, müssen Sie bereits vorhandene Tabellen-Elemente in den Seiten entsprechend umstellen.
Wie unterscheidet sich die CSS-Anpassung für die Frontend-Ansicht und die Editor-Ansicht?: Das Tabellen-Element wird im Editor um eine erste Spalte ergänzt, in der die Bearbeiten-Schaltflächen für die Tabellenzeilen angezeigt werden. Deshalb müssen Sie bei unterschiedlichen Spaltenbreiten im CSS sowohl die Frontend-Darstellung (.no-weditor) als auch die Bearbeitung (.weditor) berücksichtigen (z. B. unterschiedliche Breiten per nth-child).
Wie sieht ein Beispiel für CSS-Definitionen für Tabellen aus (Mobile First)?: Ein Beispiel aus der elementTable.scss zeigt u. a. Werte für table (z. B. width, background-color, border, margin-bottom, border-collapse, border-spacing), für th und td (z. B. border-color, padding, text-align) sowie eine Anpassung der Spaltenbreiten über nth-child abhängig von .no-weditor und .weditor. Außerdem wird für td[data-wrap-output='yes'] die Ausgabe mit white-space:pre gesteuert.
Wie funktionieren CSS-Only-Varianten im Tabellen-Kontext?: Im Beispiel wird eine CSS-Only-Variante über eine Klasse wie „.elementTable_var10000“ umgesetzt. Darin werden die Tabellenstile (z. B. Breiten, Farben, Padding) gekapselt, sodass sie als Variante auswählbar bzw. verwendbar sind.
Welche Hervorhebungen sind in den Tabellen-Beispielen vorgesehen?: Das Beispiel zeigt, dass Tabellenzeilen bzw. Zellen hervorgehoben werden können, etwa über Klassen wie „tr.highlighted, th.highlighted, td.highlighted“ sowie über „td.bgColor1, th.bgColor1“, die dann eine definierte Hintergrundfarbe verwenden.
Kann ich CSS-Only-Varianten immer nutzen?: Nein. Die Seite weist darauf hin, dass die Umsetzung über CSS-Only-Varianten nicht für jede Umgebung/Plattform unterstützt wird: Für das genannte Projekt gilt, dass CSS-Only-Varianten nicht unterstützt werden. Für eine andere Anwendung wird stattdessen empfohlen, das CSS ohne SASS-Verschachtelungen zu definieren.
Wie sollte ich CSS definieren, wenn CSS-Only-Varianten nicht unterstützt werden?: Wenn CSS-Only-Varianten nicht unterstützt werden, sollten Sie das CSS im genannten Fall lediglich ohne die in SASS üblichen Verschachtelungen definieren. Außerdem wird empfohlen, dabei die notwendigen Unterschiede zwischen .no-weditor (Frontend) und .weditor (Editor) zu berücksichtigen.