TYPO3 Inhaltselemente – Listen: Tabelle

Früher wurden so genannte „blinde Tabellen“ dazu verwendet, ganze Webseiten zu gestalten. Webdesigner haben dazu Tabellen ohne Tabellenrahmen verwendet und diese benutzt, um Webseiteninhalte zu positionieren. Diese „Zweckentfremdung“ der Tabellen hat zu verhältnismäßig umfangreichem HTML-Code geführt.

Moderne Webseiten werden mit DIV-Containern aufgebaut und Tabellen in der Regel nur noch für den ursprünglich beabsichtigten Einsatzzweck verwendet. Auf vielen Websites kommen keine oder nur wenige Tabellen zum Einsatz. Es sollte vor der Verwendung eigener Tabellen geprüft werden, ob dies vom Administrator vorgesehen ist und ggf. entsprechendes CSS für das Tabellenlayout erstellt wurde, so dass beispielsweise der Einsatz von Tabellenrahmen zu einem Tabellenlayout führt, welches sich harmonisch in das Erscheinungsbild der Website integriert.

Layout (Bereich 01)

Sofern vom Administrator eigene Layouts konfiguriert wurden, stehen sie hier im Drop-Down-Menü zur Verfügung. Ohne spezielle vorherige Konfiguration bewirkt die Auswahl keine Veränderung im Frontend der Website. Weiterführende Informationen sind hier zu finden.

Durch Auswahl einer Hintergrundfarbe kann der Tabellenhintergrund beispielsweise grau hinterlegt werden. Ggf. wurden von der betreuenden Agentur auch eigene Hintergrundfarben für Tabellenlayouts definiert und stehen dann hier zur Auswahl.

Mittels der Angabe einer Rahmenstärke kann die Tabelle mit einem Tabellenrahmen versehen werden. Wird in das Feld beispielsweise die Zahl „1“ geschrieben, so beträgt die Rahmenstärke einen Pixel.

Durch Angabe eines Zellenabstands wird das „cellspacing“ definiert, durch den Eintrag der Zellenfüllung das „cellpadding“. Mit dem Zellenabstand wird der Abstand der Zellen untereinander in Pixel bestimmt, mit Zellenfüllung der Innenabstand einer Zelle. Weiterführende Informationen dazu werden hier bereitgestellt: http://de.selfhtml.org/html/tabellen/gestaltung.htm
 

Tabellenspalten (Bereich 02)

In vorstehender Abbildung werden zwei Tabellenspalten definiert. Gleichzeitig wurden im Feld Text drei Spalten eingetragen: Eine linke Spalte, eine mittlere Spalte und eine rechte Spalte.
Im Frontend wird in diesem Fall eine zweispaltige Tabelle angezeigt, unabhängig davon, ob mehr als zwei Tabellenspalten im Feld Text eingetragen sind.

In der Regel sollte die Anzahl der Tabellenspalten mit der im Feld Text verwendeten Spaltenzahl übereinstimmen.
Der Eintrag im Feld Text dürfte weitgehend selbsterklärend sein: Der Aufbau entspricht exakt dem, mit welchem die Tabelle im Frontend angezeigt werden soll, getrennt werden die Tabellenspalten durch einen vertikalen Strich: |.

Wem das manuelle Eintragen zu umständlich ist, der kann den Tabellenassistenten  einsetzen:

Mit den verschiedenen Icons lassen sich Zeilen oder Spalten hinzufügen und löschen sowie die Reihenfolge der Tabellenelemente verändern. Jedes Icon verfügt über einen Tooltip: wird der Mauszeiger über das entsprechende Icon bewegt, so erscheint gemäß vorstehender Abbildung ein Erläuterungstext.
 

Erweiterungsoptionen (Bereich 03)

Reiter: Barrierefreiheit
Unter dem Reiter Barrierefreiheit finden sich eine Vielzahl von Einstellmöglichkeiten:

• Tabellenbeschriftung: damit wird die Tabelle mit einem „Caption-Element“ (einer Tabellenüberschrift) versehen.
• Tabellenzusammenfassung: versieht die Tabelle mit einem „Summary-Element“. Dieses wird nicht sichtbar auf der Website angezeigt, kann aber von Sprachausgabesystemen ausgegeben werden, mit denen Sehbehinderte sich die Website vorlesen lassen können.
• Tabellenfuß benutzen: dem HTML-Quelltext der Tabelle wird damit das TAG <tfoot> hinzugefügt. Ob dies bezüglich der Anzeige im Frontend eine Auswirkung hat, ist davon abhängig, ob für dieses TAG eigenes CSS vom Administrator definiert wurde.
• Position der Kopfzeile: damit lässt sich die Tabelle mit Kopfzeilen-Elementen erstellen (TAG: <th>) und – sofern entsprechendes CSS definiert wurde – die Ausrichtung festlegen.
• Kein CSS für diese Tabelle: verhindert, dass für diese Tabelle CSS angewendet wird. Diese Option bezieht sich aber nicht auf das grundlegende CSS-Layout der Tabelle, sondern TYPO3 erzeugt in diesem Fall für den HTML-Code des Frontends keine, wie sonst standardgemäß eingestellt, eigenen CSS-Klassen wie <tr class=“tr-even tr-last“>.
  Je nachdem, wie die Website konfiguriert wurde, hat die Aktivierung dieser Checkbox ggf. keinerlei Auswirkungen.
• Zusätzliche CSS-Klassen: möglicher Weise kommen auf der Website verschiedene Tabellenlayouts zum Einsatz. So soll beispielsweise die Tabelle für die Ansprechpartner des Unternehmens anders aussehen als eine Tabelle, welche über die vom Unternehmen angebotenen Schulungen informiert. Der Administrator hat in diesem Fall z.B. für die Tabelle „Ansprechpartner“ die gleichnamige CSS-Klasse tabelle-ansprechpartner und für die Schulungen die CSS-Klasse tabelle-schulungen erstellt.

Damit ist es für den Redakteur möglich, das gewünschte Tabellenlayout festzulegen, indem der Name der CSS-Klasse in dieses Feld eingetragen wird. Dies setzt natürlich voraus, dass den Redakteuren die entsprechenden CSS-Klassennamen bekannt sind.
 

Reiter: CSV-Analyse

Hier finden sich sehr spezielle Einstellmöglichkeiten, die der Vollständigkeit halber kurz vorgestellt werden sollen:

In diesem Bereich wird definiert, wie die Textbegrenzer und Feldbegrenzer für das Tabellenlayout festgelegt werden, welches im Feld Text erscheint.

Erörterung am Beispiel des Feldbegrenzers: Mit dem zuvor vorgestellten Tabellenassistenten wird eine Tabelle erstellt, die dann als Text im Feld Text eingefügt wird. Standardmäßig erfolgt dort die Trennung der einzelnen Spalten mit dem Feldbegrenzer „|“. Wird dieser unter CSV-Analyse beispielsweise in ein Semikolon geändert, so ändert sich die Tabelle im Frontend folgendermaßen: