Tabellen

Es stehen zwei zur Verfügung:

• Die klassische Linien-Tabelle (Grid)
• Die Tabelle ohne Strukturlinien (Basic).

Tabellen vom Typ «Grid» können Sie sortierbar darstellen.
Verwenden Sie Tabellen nicht als Layout-Werkzeug, sondern nur für tabellarische Informationen.

1. Klicken Sie auf die Schaltfläche «Tabelle»
2. Zeile/Spalte: Geben Sie die Anzahl Zeilen und Spalten an
3. Kopfzeile: Titelzeile und Spalte.
   Wählen Sie zwischen «Erste Zeile«, «Erste Spalte», «Beide» oder «Keine»
4. Bestätigen Sie mit «OK»
5. Tabellentyp: Klicken Sie auf die Tabelle und wählen Sie im Auswahl-Menu «Stil» zwischen «Typ 1: Grid»  und «Typ 4: Basic» (Die anderen Tabellentypen unterscheiden sich nicht von «Grid»).

• Zellen verbinden: Rechtsklick in die Zelle: Zelle > Nach rechts verbinden / Nach links verbinden
• Zellen teilen: Rechtsklick in die Zelle: Zelle > Zelle horizontal teilen / Zelle vertikal teilen
• Zellenbreite, -höhe, -ausrichtung: Rechtsklick in die Zelle: Zelle > Zelleneigenschaften
• Zeile einfügen: Rechtsklick in die Zelle: Zeile > Zeile oberhalb einfügen / Zeile unterhalb einfügen
• Zeile löschen: Rechtsklick in die Zelle: Zeile > Zeile entfernen
• Spalte einfügen: Rechtsklick in die Zelle: Spalte > Spalte links davor / rechts danach einfügen
• Spalte löschen: Rechtsklick in die Zelle: Spalte > Spalte löschen
• Tabelle löschen: Rechtsklick in die Zelle: Tabelle löschen

Dies muss im Quellcode gemacht werden: Klicken Sie auf den Button «Quellcode»

Fügen Sie beim Tabellenattribut «class» das Wort «tablesorter» hinzu.
Bsp: <table class="tablesorter">

Fügen Sie danach vor dem Tabellenbody <tbody> eine Tabellenkopf <thead> mit den Spaltenüberschriften ein.
Bsp:

<thead>
 <tr>
  <th>Überschrift 1</th>
  <th>Überschrift 2</th>
  ...
 </tr>
</thead>    

<tbody>
...

Klicken Sie wieder auf den Button «Quellcode».

Anm: Den vollen Quellcode einer sortierbaren Tabelle finden Sie ganz unten auf dieser Seite.

Typ 1: Grid

mit «Kopfzeile» und verbundenen Zellen

Typ 4: Basic

Sortierbare Spalten

Obige sortierbare Tabelle in der Quellcode-Ansicht

<table class="tablesorter">
    <thead>
        <tr>
            <th>Spalte 1</th>
            <th>Spalte 2</th>
            <th>Spalte 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>9</td>
            <td>Meier</td>
        </tr>
        <tr>
            <td>C</td>
            <td>5</td>
            <td>Zwicky</td>
        </tr>
        <tr>
            <td>B</td>
            <td>1</td>
            <td>Althaus</td>
        </tr>
    </tbody>
</table>