Tabellen mit dem Element-Typ „Table“

Wichtig

Das Contentelement "Table" sollte aktuell nur noch bei der Einbindung mehrerer Bilder in eine Tabelle Verwendung finden.
Aus Gründen der Benutzerfreundlichkeit, Barrierefreiheit etc. raten wir generell davon ab "Table"-Elemente zu verwenden.

Stellen Sie sich daher immer die Frage, ob eine Tabelle die passende Darstellungsform Ihrer Daten ist und verwenden Sie selbst dann weitestgehend RTE-Tabellen.

Inhaltselement anlegen

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

Tabelleninhalt anpassen

Im Reiter General finden Sie verschiedene Optionen:

  • Table Content: Den Inhalt der Tabelle können Sie mit dem Table Wizard (Bild 4) bearbeiten, den Sie über den in Bild 2 rot markierten Knopf aufrufen können.
  • Field Delimiter: Wenn Sie Ihre Daten über den Wizard eingeben, können Sie die Standardeinstellung "Pipe" belassen. Möglicherweise müssen Sie das Trennzeichen ändern, wenn Sie Tabellen aus externen Quellen (z.B. Excel) einfügen möchten.
  • Table Caption: Hier tragen Sie die Beschriftung der Tabelle ein. Für beschreibende Zusammenfassungen des Tabelleninhalts für Sehbehinderte benutzen Sie dieses Feld oder den umgebenden Text.

Tabellenlayout anpassen

Das Tabellenlayout können Sie über den Reiter "Appearance" anpassen (Bild 3)

  • Columns: Hier können Sie die Anzahl der Spalten eintragen. Lassen Sie dort „Auto“ stehen.
  • Table Style: Für das Aussehen der Tabelle gibt das Corporate Design drei Varianten vor. Bitte wählen Sie den jeweiligen Style mit dem Zusatz "responsive", damit werden die Tabellen flexibel und passen sich der aktuellen Bildschirmgröße an. Beispiele unten.
    • "Basic (no style) responisve" ergibt eine Tabelle ohne Linien,
    • „horizontal lines responsive“ zeigt horizontale Linien und
    • „Gitternetz responsive“ zeigt zusätzlich farblich hinterlegte Kopfzellen.
  • Table header position: Hier können Sie die Position Ihrer Tabellenüberschrift bestimmen. Zur Auswahl stehen Kopfzeile („top“), „Kopfspalte“ („left“) oder nichts dergleichen („No header“).

Table Wizard

Um Ihre Tabelle mit Inhalt zu füllen, verwenden Sie in der Regel den "Table Wizard" (Bild 4). Er ermöglicht Ihnen die benötigte Anzahl von Reihen und Spalten anzulegen und sofort zu befüllen. Der Wizard setzt Ihre Eingaben nach dem Speichern direkt in das Textfeld im Reiter General um. An diesem müssen Sie keine Änderungen vornehmen. Aufrufen können Sie den Table Wizard mit dem in Bild 2 rot umrahmten Button.

Im Table Wizard ist in begrenztem Umfang der Einsatz von HTML-Code möglich. Dies können Sie nutzen, um in Ihrer Tabelle bestimmte Funktionalitäten umzusetzen:

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 5 vorgegeben, und fügen ihn anstelle von /fileadmin/w00bvt/typo3/tabellen/TUM_Garching.jpg ein. Ersetzen Sie „Beispiel-Bild“ durch einen passenden Alternativtext.

<img src="/fileadmin/w00bvt/typo3/tabellen/TUM_Garching.jpg" alt="Beispiel-Bild" />

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 („https://“) und ohne Domain-Namen (www.xyz.tum.de). Im Beispiel wird das Wort Bachelor verlinkt; ersetzen Sie die Werte entsprechend.

<a href="/ai/lehre/bachelor/">Bachelor</a>

Achtung

Verlinken Sie ihre Inhalte immer mit der sprechenden URL und setzen Sie ihre Links nicht direkt auf eine  PID. Das erleichtert die Zuordnung und ermöglicht es, den verlinkten Content auch dann noch zu erreichen, wenn dieser auf eine andere PID verschoben wurde.

Externer Link

Für externe Links, also Links zu anderen Webauftritten, müssen Sie ein Link-Element anlegen. Im Beispiel wird der Text TUM mit www.tum.de verlinkt. Ersetzen Sie den Text entsprechend.

<a href="https://www.tum.de/"class="external-link">TUM</a>

E-Mail-Link

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

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

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 (die könnte bei Ihrem Browser auch anders sein).

Im Beispiel wird das Wort Ranking-Bericht mit der PDF-Datei Shanghai-Ranking.pdf verlinkt. Ersetzen Sie die Texte entsprechend.

<a href="/fileadmin/w00bvt/typo3/tabellen/Shanghai-Ranking.pdf" class="download">Ranking-Bericht</a>

Achtung!

Beachten Sie, dass die Referenzen, die Sie als HTML-Code eingetragen haben statisch sind. Wenn Sie also ein verlinktes Element z.B. aus Ihrer Filelist austauschen oder verschieben, kann es passieren, dass der Link nicht mehr funktioniert.

Beispiele

Beispiel-Tabelle ohne Linien („Basic (no style) responisve“): Mitarbeiter
Name Durchwahl Email Beispiel-Bild
Mustermann, Max -30589 max.mustermann@tum.de Beispiel-Bild
Weiß, Henriette -50648 henriette.weiß@tum.de Beispiel-Bild
Bauer, Horst -89534 horst.bauer@tum.de Beispiel-Bild
Beispiel-Tabelle („horizontal lines responsive“): Mitarbeiter
Name Durchwahl Email Beispiel-Bild
Mustermann, Max -30589 max.mustermann@tum.de Beispiel-Bild
Weiß, Henriette -50648 henriette.weiß@tum.de Beispiel-Bild
Bauer, Horst -89534 horst.bauer@tum.de Beispiel-Bild
Beispiel-Tabelle („Gitternetz responsive“): Mitarbeiter
Name Durchwahl Email Beispiel-Bild
Mustermann, Max -30589 max.mustermann@tum.de Beispiel-Bild
Weiß, Henriette -50648 henriette.weiß@tum.de Beispiel-Bild
Bauer, Horst -89534 horst.bauer@tum.de Beispiel-Bild