Tabellen
Seiteninhalt
Beschreibung
Vier Tabellentypen stehen Ihnen zur Verfügung:
- Die klassische Linien-Tabelle (Grid),
- Die feinere Punktelinien-Tabelle (Ornate)
- Die «gestreifte» Tabelle (Striped)
- Die Tabelle ohne Strukturlinien (Basic).
Tabellen der Typen «Grid» und «Ornate» können Sie sortierbar darstellen. Mit Ausnahme der Basic-Tabelle werden alle Tabellentypen über die ganze Breite des Contents (= 460, 700 oder 940 Pixel auf Inhaltsseiten 3-, 2- oder 1-spaltig).
Erstellung
- Klicken Sie auf die Schaltfläche «Tabelle»
- Zeile/Spalte: Geben Sie die Anzahl Zeilen (Default = 3) und Anzahl Spalten (Default = 2) an
- Kopfzeile: Wählen Sie zwischen einer Kopfzeile für die «Erste Zeile«, «Erste Spalte», «Beide» oder «Keine» (= Default)
- Bestätigen Sie mit «OK»
- Tabellentyp: Klicken Sie auf die Tabelle und wählen Sie im Auswahl-Menu «Stil» zwischen «Typ 1: Grid» (=Default), «Typ 2: Ornate», «Typ 3: Striped» und «Typ 4: Basic»
Bearbeitung
- Zellen verbinden: Klicken Sie in die Zelle > Klick auf rechte Maustaste > Zelle > Nach rechts verbinden / Nach links verbinden
- Zellen teilen: Klicken Sie in die Zelle > Klick auf rechte Maustaste > Zelle > Zelle horizontal teilen / Zelle vertikal teilen
- Zellenbreite, Zellenhöhe, Zeilenumbruch, Zellenausrichtung: Klicken Sie in die Zelle > Klick auf rechte Maustaste > Zelle > Zelleneigenschaften > Breite/Höhe definieren, Zeilenumbruch deaktivieren (Default = ja) und/oder horizontale/vertikale Ausrichtung (Default = links/Mitte) anpassen
- Zeile einfügen: Klicken Sie in die Zeile > Klick auf rechte Maustaste > Zeile > Zeile oberhalb einfügen / Zeile unterhalb einfügen
- Zeile löschen: Klicken Sie in die Zeile > Klick auf rechte Maustaste > Zeile > Zeile entfernen
- Spalte einfügen: Klicken Sie in die Spalte > Klick auf rechte Maustaste > Spalte > Spalte links davor einfügen / Spalte rechts danach einfügen
- Spalte löschen: Klicken Sie in die Spalte > Klick auf rechte Maustaste > Spalte > Spalte löschen
- Text via Copy/Paste einfügen: Klicken sie in die Tabellenzelle und wählen Sie die Schaltfläche «Einfügen», Als Text einfügen» oder «aus MS Word einfügen»
- Bild einfügen:
- Klicken Sie in die Tabellenzelle und dann auf die Schaltfläche «Bild»
- Geben Sie die Bild-URL an oder wählen Sie ein Bild aus Ihrem Asset-Verzeichnis über die Schaltfläche «Server durchsuchen»
- Alternativer Text: Bezeichnen Sie das Bild in Worten (Dieser Text wird in Screenreadern (= Browser für sehbehinderte oder blinde Personen) angezeigt.)
- Breite/Höhe: Geben Sie die Breite und/oder Höhe in Pixeln an, in welcher das Bild in der Tabelle dargestellt werden soll (Keine Angabe = 100 Pixel breit)
- [ Legende/Popup: Anwendung nicht empfohlen. Binden Sie Bilder mit Legende und/oder Popup-Funktion lieber ausserhalb der Tabelle, d.h. direkt auf der Text/Bild-Komponente ein. ]
- Tabelle sortierbar machen: 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="grid 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>
- Klicken Sie wieder auf den Button «Quellcode»
- Tabelle löschen: Klicken Sie in die Tabelle > Klick auf rechte Maustaste > Tabelle löschen
Beispiele
Tabelle Typ 1: Grid (Default)
mit «Kopfzeile» in der ersten Zeile und mit verbundenen Zellen und Spalten:
#data | #data | #data | #data |
---|---|---|---|
#data | #data | #data | |
#data | #data | #data | |
#data | #data | #data | #data |
#data | #data | ||
#data | #data |
Tabelle Typ 2: Ornate
|
#data | #data |
|
#data | #data |
|
#data | #data |
Tabelle Typ 3: Striped
mit «Kopfzeile» in der ersten Spalte und rechtsbündiger Ausrichtung in der letzten Spalte:
#data | #data | #data | #data |
---|---|---|---|
#data | #data | #data | #data |
#data | #data | #data | #data |
#data | #data | #data | #data |
Tabelle Typ 4: Basic
mit Breite 90px pro Spalte (keine Blockdarstellung):
#data | #data | #data |
#data | #data | #data |
#data | #data | #data |
#data | #data | #data |