Tabellen mit dem Tabelleneditor gestalten

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.

Projektkonfiguration: Tabellen
Projektkonfiguration: Tabellen

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!