Tabelle: Zeilen, Spalten und Zellen individuell formatieren

Veröffentlichungsdatum: 24. Juni 2022
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Tabellenzeilen, Tabellenspalten und Tabellenzellen können mit einer individuellen Klasse versehen werden, um diese über CSS zu formatieren.

Hierzu stehen Ihnen aktuell zwei Möglichkeiten zur Verfügung, welche nachfolgend erläutert werden.

Variante 1: Definition rein über CSS-Only

Darstellungsvariante Tabelle (Maske)
Darstellungsvariante Tabelle (Maske)

Im Standard wird das Tabellen-Weblic® mit Untervarianten für Tabellen Zeilen-, Spalten- und Zellen-Klassen ausgeliefert, welche jeweils zwei Klassen definiert haben. "default" ist die Standardvariante, welche keine spezielle CSS-Definition mitgibt und für die Farbe weiß steht. "highlighted" ist im Standard so definiert, daß dies eine im Projekt hinterlegte Hervorhebungsfarbe gesetzt hat.

Um weitere Auswahlmöglichkeiten für die Redakteure bereitzustellen legen Sie die gewünschte Untervariante am besten auf Basis einer bestehenden Untervariante manuell über den Quelltext als Kopie an. Das nachfolgende Beispiel zeigt dies für eine rote Hintergrundfarbe für Tabellenzeilen auf (Variante: ...varred).

Beipiel: Auszug aus elementTable.scss zur Standard-Variante (var0) mit individueller RowClass und ColClass

/* ... */

/*@wCssFragment{class:elementTable;variant:0;livepreview:yes;caption:Standard;caption-en:Default}*/
.elementTable_var0 {

  /* ... */

  tr.red, th.red, td.red{
    background-color:#FF0000;
  }

  /* ... */

}

/* ... */

/*@wCssFragment{class:elementTableRowClass;variant:highlighted;preview-color:#{$backgroundColorTableCellHightlighted};livepreview:yes;caption:Hervorgehoben;caption-en:Highlighted}*/
.elementTableRowClass_varhighlighted {
  //Die Variantenbezeichnung (z.B. highlighted bei ..._varhighlighted) steht für die zu setzende Klasse, welche zur Tabellen-CSS-Only-Variante definiert werden muss
} 

/*@wCssFragment{class:elementTableRowClass;variant:red;preview-color:#FF0000;livepreview:yes;caption:Rot;caption-en:Red}*/
.elementTableRowClass_varred {
  //CSS-Definition für tr siehe oben
}

Variante 2: Definition über die Projektkonfiguration und CSS

Projektkonfiguration: Tabellen
Projektkonfiguration: Tabellen

Diese Möglichkeit stammt noch aus Zeiten des BASE Classic Projektes und wurde aus Gründen der Abwärtskompatibilität im BASE (Mobile First) Projekt weiter übernommen. Die auswählbaren Style-Klassen für Zeilen, Spalten und Zellen definieren Sie im entsprechenden Feld. Mehrere Auswahlmöglichkeiten werden mit dem Pipe-Zeichen | getrennt. Eine Klasse wird wie folgt definiert:

Klassenname(Farbwert)

z.B.: red(#FF0000)

Der Farbwert dient an dieser Stelle der Kennzeichnung der Schaltfläche im Tabelleneditor (farbiges Kästchen zu einer Tabellen Zeile, Spalte). Siehe hierzu Online-Dokumentation zur Tabellenbearbeitung.

Im Quelltextbeispiel unten sehen Sie ein Beispiel für die Definition einer roten Hintergrundfarbe für Tabellen Zeilen, Spalten und Zellen.
Beachten Sie bei dieser Umsetzung, daß dies nur greift, wenn es keine CSS-Only-Varianten gibt (siehe weiter oben im Artikel zu "Variante 1: Definition rein über CSS-Only").

Beipiel: Auszug aus elementTable.scss zur Standard-Variante (var0) mit individueller RowClass und ColClass

/* ... */

/*@wCssFragment{class:elementTable;variant:0;livepreview:yes;caption:Standard;caption-en:Default}*/
.elementTable_var0 {

  /* ... */

  tr.red, th.red, td.red{
    background-color:#FF0000;
  }

  /* ... */

}

/* ... */