Tabellen-Anpassungen

Wenn Sie das Aussehen und die Funktionalität ihrer Tabelle weiter anpassen möchten, als es das TinyMCE-Tabellenmenü zulässt, müssen Sie den Quellcode Ihrer Tabelle manuell bearbeiten.

Öffnen Sie dafür zunächst den Hauptinhalt der Seite bzw. Box, auf bzw. in der sich die Tabelle befindet entweder mit dem internen Editor oder nutzen Sie die TinyMCE-Quellcode-Ansicht.

Suchen sie im Quellcode den Abschnitt, der die Tabelle repräsentiert. Er sollte ungefähr so aussehen:

    <table>
      <thead>
        <tr>
          <td></td>
          <th>2023</th>
          <th>2024</th>
          <th>2025</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Q1</th>
          <td style="text-align: right;">15</td>
          <td style="text-align: right;">24</td>
          <td style="text-align: right;">-5</td>
        </tr>
        <tr>
          <th scope="row">Q2</th>
          <td style="text-align: right;">143</td>
          <td style="text-align: right;">-12</td>
          <td style="text-align: right;">57,8</td>
        </tr>
        <tr>
          <th scope="row">Q3</th>
          <td style="text-align: right;">65</td>
          <td style="text-align: right;">90</td>
          <td style="text-align: right;">0</td>
        </tr>
        <tr>
          <th scope="row">Q4</th>
          <td style="text-align: right;">-34,5</td>
          <td style="text-align: right;">86,2</td>
          <td style="text-align: right;">1</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Summen</th>
          <td style="text-align: right;">188,5</td>
          <td style="text-align: right;">188,2</td>
          <td style="text-align: right;">53,8</td>
        </tr>
      </tfoot>
    </table>

Nun können Sie die Tabelle mit einer Klasse oder anderen Attributen versehen, um ihre Darstellung anzupassen. Bitte beachten Sie, dass die so vorgenommenen Anpassungen nur in der Vorschau bzw. auf der freigegebenen Seite sichtbar sind, nicht im TinyMCE.

Wenn Sie die Tabelle mit der Klasse matrix2 versehen, verleiht dies den Tabellen-Zellen einen grauen Hintergrund, abgerundete Ecken und breitere, weiße Ränder. Der Tabellen-Kopf bekommt einen blauen Hintergund und die Spaltenüberschriften werden fett und in Großbuchstaben dargestellt.

Bitte beachten Sie, dass diese Klasse nicht mit den anderen hier aufgeführten Klassen kombiniert werden kann!

Wenn Sie die Tabelle mit der Klasse streifen versehen, verleiht dies den Tabellen-Zeilen einen abwechselnd weißen bzw. grauen Hintergrund. Ausgenommen davon sind die Kopf-Zellen (<th>). Sie haben immer einen weißen Hintergund.

Wenn Sie die Tabelle mit der Klasse mouseover versehen, wird die Tabellen-Zeile, über der sich der Mauszeiger befindet, grau hervorgehoben. Ausgenommen davon sind die Kopf-Zellen (<th>). Sie haben immer einen weißen Hintergund.

Wenn Sie die Tabelle mit der Klasse CV versehen, werden die Tabellen-Zeilen abwechselnd hellgrau und hellblau hinterlegt. Ausgenommen davon sind die Kopf-Zellen (<th>) und die Zellen im Tabellen-Fuß (<tfoot>). Erstere haben immer einen grauen Hintergund, während der Text darin fett und in Großbuchstaben dargestellt wird. Letztere haben immer einen hellgrauen Hintergund.

Dieses Design eignet sich z. B. für die Darstellung tabellarische Lebensläufe.

<table class="CV">
    <thead>
        <tr>
            <th>Jahr</th>
            <th>Tätigkeit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>seit 2022</td>
            <td>Abteilungsleitung in der Präsidialverwaltung der Universität Hamburg</td>
        </tr>
        <tr>
            <td>2018 - 2022</td>
            <td>Referentin in der Behörde für Wirtschaft, Arbeit und Innovation in Hamburg</td>
        </tr>
        <tr>
            <td>2015 - 2018</td>
            <td>Wissenschaftliche Mitarbeiterin an der Ruhr-Universität Bochum</td>
        </tr>
        <tr>
            <td>2014</td>
            <td>Promotion an der Freien Universität Berlin</td>
        </tr>
        <tr>
            <td>2004 – 2009</td>
            <td>Bachelorstudium und Masterstudium der Betriebswirtschaftslehre an der Freien Universität Berlin</td>
        </tr>
    </tbody>
</table>

Wenn Sie die Tabelle mit der Klasse sort versehen, erhalten die Kopf-Zellen der Tabelle eine Sortier-Funktion. Mit einem Butten in der Kopf-Zelle (<th>) können Sie die Tabelle dann nach den Einträgen in der jeweiligen Spalte alphabetisch sortieren.

Vermeiden Sie bei einer Sortierbaren Tabelle Kopf-Zellen für Zeilen (<th scope="row">), da die Sortierung hier nicht funktioniert!

Beachten Sie zudem, dass die zum Tabellen-Kopf und -Fuß (<thead> bzw. <tfoot>) gehörenden Zeilen beim Sortieren ignoriert werden.

Wenn Sie die Kopf-Zelle einer Spalte mit der Klasse abc versehen (<th class="abc">), wird über der Tabelle ein alphabetischer Filter eingeblendet. Durch das anklicken eines Buchstabens werden dann nur noch die Zeilen der Tabelle eingeblendet, in denen sich Zellen dieser Spalte befinden, deren Inhalt mit jenem Buchstaben beginnt. Es sollte immer nur eine Kopf-Zelle in einer Tabelle die Klasse abc besitzen.

Für die numerische Sortierung versehen Sie die entsprechende Kopf-Zelle, deren Spalte numerische Daten enthält, mit der Klasse num (<th class="num">) und stellen Sie sicher, dass sie Punkte (.) statt Kommas (,) als Dezimaltrennzeichen verwenden!

<table class="sort">
    <thead>
        <tr>
            <th class="abc">Prüfung</th>
            <th class="num">Notenschnitt</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Grundlagen der Morphologie afrikanischer Sprachen</td>
            <td style="text-align: right;">2.6</td>
        </tr>
        <tr>
            <td>Lineare Algebra und Analytische Geometrie</td>
            <td style="text-align: right;">3.4</td>
        </tr>
        <tr>
            <td>Methoden der empirischen Sozialforschung</td>
            <td style="text-align: right;">2.1</td>
        </tr>
        <tr>
            <td>Einführung in die Volkswirtschaftslehre</td>
            <td style="text-align: right;">1.9</td>
        </tr>
    </tbody>
</table>

Wenn Sie ihre Tabelle mit der Klasse db_table versehen, wird daraus eine filterbare Auflistung, bei der jede Tabellen-Zeile einen Eintrag darstellt.

Diese Tabellen-Klasse weist einige Besonderheiten auf, die Sie bei der Verwendung beachten müssen.

Bevor Sie sich für die Verwendung einer filterbaren Tabelle entscheiden, prüfen Sie, ob die Vorlagen Artikelliste mit Filter und Suche bzw. Box für Artikelliste mit Filter und Suche für Ihre Zwecke geeignet sind. Sie bieten ähnliche Funktionen wie die filterbare Tabelle, sind aber deutlich einfacher zu bearbeiten.

Wenn Sie nicht möchten, dass der Text in den Zellen ihrer Tabelle bei kleinen Fenster- bzw. Display-Größen umgebrochen wird, können Sie die Tabelle im Quellcode mit dem Attribut data-jo-table="scrollH" versehen (<table data-jo-table="scrollH">).

Es wird dann am unteren Tabellen-Rand eine Scrollbar eingeblendet, sofern die Tabelle zu breit für das Fenster bzw. Display ist: