Navigation auf uzh.ch

Suche

Magnolia CMS User Guide

Tabellen

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

Table icon
  1. Klicken Sie auf die Schaltfläche «Tabelle»
  2. Zeile/Spalte: Geben Sie die Anzahl Zeilen (Default = 3) und Anzahl Spalten (Default = 2) an
  3. Kopfzeile: Wählen Sie zwischen einer Kopfzeile für die «Erste Zeile«, «Erste Spalte», «Beide» oder «Keine» (= Default)
  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» (=Default), «Typ 2: Ornate», «Typ 3: Striped» und «Typ 4: Basic»

Bearbeitung

  1. Zellen verbinden: Klicken Sie in die Zelle > Klick auf rechte Maustaste > Zelle > Nach rechts verbinden / Nach links verbinden
  2. Zellen teilen: Klicken Sie in die Zelle > Klick auf rechte Maustaste > Zelle > Zelle horizontal teilen / Zelle vertikal teilen
  3. 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
  4. Zeile einfügen: Klicken Sie in die Zeile > Klick auf rechte Maustaste > Zeile > Zeile oberhalb einfügen / Zeile unterhalb einfügen
  5. Zeile löschen: Klicken Sie in die Zeile > Klick auf rechte Maustaste > Zeile > Zeile entfernen
  6. Spalte einfügen: Klicken Sie in die Spalte > Klick auf rechte Maustaste > Spalte > Spalte links davor einfügen / Spalte rechts danach einfügen
  7. Spalte löschen: Klicken Sie in die Spalte > Klick auf rechte Maustaste > Spalte > Spalte löschen
  8. 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»
  9. Bild einfügen:
    1. Klicken Sie in die Tabellenzelle und dann auf die Schaltfläche «Bild»
    2. Geben Sie die Bild-URL an oder wählen Sie ein Bild aus Ihrem Asset-Verzeichnis über die Schaltfläche «Server durchsuchen»
    3. Alternativer Text: Bezeichnen Sie das Bild in Worten (Dieser Text wird in Screenreadern (= Browser für sehbehinderte oder blinde Personen) angezeigt.)
    4. 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)
    5. [ 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. ]
  10. Tabelle sortierbar machen: Dies muss im Quellcode gemacht werden.
    1. Klicken Sie auf den Button «Quellcode»
    2. Fügen Sie beim Tabellenattribut «class» das Wort «tablesorter» hinzu.
      Bsp: <table class="grid tablesorter">
    3. 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>
    4. Klicken Sie wieder auf den Button «Quellcode»
  11. 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

Weiterführende Informationen

Editor-Funktionen

Eine Übersicht über die Funktionen der Editor-Schaltflächen finden Sie unter «Editor (Übersicht)».

Accessibility-Tipp

Zeilen- und Spaltenheader in Tabellen enthalten wichtige Informationen für Sehbehinderte. Mit Rechtsklick in die Tabelle und Klick auf «Tabellen-Eigenschaften» rufen Sie das Dialogfenster auf, in dem Sie diese Header einstellen können (Feld «Kopfzeile», Einstellung «Beide»).