Tabellen mit dem Element-Typ „Table“

Der Element-Typ „Table“ ist eine Möglichkeit, Tabellen zu erstellen und zu bearbeiten. Eine andere ist das Einfügen von Tabellen mit dem Rich-Text Editor (RTE). Eine Gegenüberstellung der Vorteile beider Methoden ist unten. Für Mitarbeiterlisten und -seiten eignen sich die Extensions TUM Memberlist und TUMvCard gut; für Lehrveranstaltungen die TUMcourses.


Inhaltselement anlegen

Bild 1: Neuer Pagecontent mit Type „Table“

Legen sie einen neuen Pagecontent mit Type „Table“ an.

Tabelle anpassen

Bild 2: Tabellen-Optionen

Im Reiter Table finden Sie verschiedene Optionen.

  • Die Optionen bei Layout (Layout, Backgr. color) haben keine Auswirkungen.
  • Bei Columns können Sie die Anzahl der Spalten eintragen. Lassen Sie dort „Auto“ stehen.
  • Bei Table Caption tragen Sie die Beschriftung der Tabelle ein.
  • Table summary hat keine Auswirkungen (mehr). Für beschreibende Zusammenfassungen des Tabelleninhalts für Sehbehinderte benutzen Sie die Beschriftung (Caption) oder den umgebenden Text.
  • Mit Table Header Position geben Sie an, ob Sie eine Kopfzeile („top“), „Kopfspalte“ („left“) oder nichts dergleichen („No header“) haben.
  • Für das Aussehen der Tabelle gibt das Corporate Design drei Varianten vor. Auswählen können Sie sie über das Feld Additional CSS class (in Bild 2 rot markiert); Beispiele unten.
  • Die Option No CSS styles for this table hat keine sichtbaren Auswirkungen.

Den Inhalt der Tabelle können Sie mit dem Table Wizard (Bild 3)  bearbeiten, den Sie über den in Bild 2 rot markierten Knopf aufrufen können.

Bild 3: Der „Table Wizard“

Beispiele

Beispiel-Tabelle ohne Linien: Beliebte Grafikformate für das World Wide Web
Kürzel Name, Link Jahr Farbmodi Kompression Besonderheiten Beispiel-Grafik
GIF Graphics Interchange Format 1987 Paletten mit max. 256 Farben verlustfrei Animationen, Transparenz (GIF89a) Beispielgrafik GIF
JFIF JPEG File Interchange Format 1991 Graustufen, Echtfarben verlustbehaftet Bessere Kompression zugunsten Qualität möglich Beispielgrafik JPEG
PNG Portable Network Graphics 1994 verschiedene Graustufen und Echttfarben, 256-Farben-Palette verlustfrei Alpha-Transparenz Beispielgrafik PNG
Beispiel-Tabelle „h-lines“: Beliebte Grafikformate für das World Wide Web
Kürzel Name, Link Jahr Farbmodi Kompression Besonderheiten Beispiel-Grafik
GIF Graphics Interchange Format 1987 Paletten mit max. 256 Farben verlustfrei Animationen, Transparenz (GIF89a) Beispielgrafik GIF
JFIF JPEG File Interchange Format 1991 Graustufen, Echtfarben verlustbehaftet Bessere Kompression zugunsten Qualität möglich Beispielgrafik JPEG
PNG Portable Network Graphics 1994 verschiedene Graustufen und Echttfarben, 256-Farben-Palette verlustfrei Alpha-Transparenz Beispielgrafik PNG
Beispiel-Tabelle „gitternetz“: Beliebte Grafikformate für das World Wide Web
Kürzel Name, Link Jahr Farbmodi Kompression Besonderheiten Beispiel-Grafik
GIF Graphics Interchange Format 1987 Paletten mit max. 256 Farben verlustfrei Animationen, Transparenz (GIF89a) Beispielgrafik GIF
JFIF JPEG File Interchange Format 1991 Graustufen, Echtfarben verlustbehaftet Bessere Kompression zugunsten Qualität möglich Beispielgrafik JPEG
PNG Portable Network Graphics 1994 verschiedene Graustufen und Echttfarben, 256-Farben-Palette verlustfrei Alpha-Transparenz Beispielgrafik PNG

Mindest-Spaltenbreite erzwingen

Um einer Spalte eine Mindestbreite zu geben, tragen Sie bitte den folgenden HTML-Code in die oberste Zellen der betreffenden Spalte ein. Der Text der Tabellen-Zelle, in diesem Beispiel „Kürzel“, muss jeweils ersetzt werden. Die Zahl nach „width:“ bestimmt die Mindestbreite der Spalte in Pixel. Zur Orientierung: Unsere Beispielgrafik oben ist 85 Pixel breit; der Inhaltsbereich unserer Webseiten fasst maximal 720 Pixel (bei dreispaltigem Seitenlayout) bzw. 950 Pixel (beim zweispaltigen Seitenlayout ohne rechte Spalte).

<div style="width: 100px;">Kürzel</div>

Falls Ihre Tabelle trotz der festgelegten Breite immer noch nicht das gewünschte Layout hat, besteht die Möglichkeit, Zeilenumbrüche durch Einfügen eines break <br /> zu erzeugen.

Info:

Bitte beachten Sie, dass festgelegte Mindestbreiten sich auf kleinen Bildschirmen nachteilig auswirken können. Beachten Sie unsere Informationen für flexible Tabellen.

Bild einfügen

Damit Sie Bilder in eine Tabelle einfügen können, müssen Sie diese vorher in der Filelist speichern. Dann brauchen Sie die Adresse der Bilddatei.

Öffnen Sie dazu das Bild in der Filelist durch Anklicken des Bildnamens. Kopieren Sie den Teil der URL wie in Bild 4 vorgegeben und fügen ihn anstelle von /fileadmin/w00bvt/www/bilder/example.gif ein. Ersetzen Sie „Beispielgrafik GIF“ durch einen passenden Alternativtext.

<img src="/fileadmin/w00bvt/www/bilder/example.gif" alt="Beispielgrafik GIF" title="test" />

Bild 4: Bildadresse kopieren

Links setzen

Interner Link

Um auf Seiten ihrer Instanz zu linken, verwenden Sie die Schreibweise mit relativen Links. Dazu verwenden Sie die URL der Zielseite ohne Protokoll („http://“) und ohne Domain-Namen (www.xyz.tum.de). Im Beispiel wird das Wort Anleitungen verlinkt; ersetzen Sie die Werte entsprechend.

<a href="/index.php?id=8">Anleitungen</a>

Externer Link

Für externe Links, also Links zu anderen Websites, müssen Sie ein Link-Element anlegen. Im Beispiel wird der Text TUM mit http.//www.tum.de/ verlinkt; als Tooltip erscheint Zur Homepage der TUM. Erstzen Sie die Texte entsprechend.

<a href="http://www.tum.de/"class="external-link" title="Zur Homepage der TUM">TUM</a>

Beispiel zum oberen HTML-Code: TUM

E-Mail-Link

Wenn Sie die E-Mail-Adresse verlinken möchten, fügen Sie bitte folgenden HTML-Code ein. Im Beispile wird der Text Mail an Max mit der Adresse max.mustermann@tum.de verlinkt. Eretzen Sie die Texte entsprechend.

<a href="mailto:max.mustermann@tum.de" class="mail">Mail an Max</a>

Beispiel zum oberen HTML-Code: Mail an Max

Download-Link für Dateien

Um auf eine Datei zu verlinken, die Sie in der Filelist abgelegt haben, müssen Sie zunächst deren Adresse hereausfinden. Dazu suchen Sie die Datei in der Filelist. Sie können nun entweder den Namen der Datei anklicken und die Adresse aus der Adresszeile des Browsers kopieren, oder auf das Info-Icon klicken und die Adresse kopieren, wenn Sie den Download-Knopf mit der rechten Maustaste anklicken und Link-Adresse kopieren wählen (kann bei Ihrem Browser anders sein).

Im Beispiel wird das Wort Ranking-Bericht mit der PDF-Datei Shanghai-Ranking.pdf verlinkt; Tooltip ist Download [PDF, 200 kB]. Ersetzen Sie die Texte entsprechend.

<a href="/fileadmin/w00bvt/www/pdf/Shanghai-Ranking.pdf" class="download" title="Download [PDF, 200 kB]">Ranking-Bericht</a>

Beispiel: Ranking-Bericht

Vorteile der beiden Tabellen-Methoden

Rich-Text Editor:

  • Textformatierung und Verlinkung gehen einfacher und sicher
  • Kopfzeilen und -spalten gleichzeitig möglich
  • Komplizierte Layouts möglich (Zellen verbinden, Kopfzellen definieren)

Content-Element „Table“:

  • Bilder in Zellen möglich
  • Einfaches Bewegen von Zeilen und Spalten
  • Direktes Einfügen von CSV (comma-separated values), also Text mit Kommas (oder anderen Zeichen) als Zellentrenner