11 Tabellen als Inhaltselement (ohne RichTextEditor)

Transkript

1 11 Tabellen als Inhaltselement (ohne RichTextEditor) Inhaltsverzeichnis 11 Tabellen als Inhaltselement (ohne RichTextEditor) 1 Vorbemerkung Eine einfache Tabelle erzeugen Der Tabellen-Editor Layout-Möglichkeiten Fortgeschrittenes Layout Daten aus Excel Vorbemerkung Tabellen kann man mit der normalen TYPO3-Schreibumgebung, dem RichTextEditor, erzeugen, siehe die siebte Anleitung. Aber vielleicht haben Sie bei der Arbeit gemerkt, dass das oft misslingt und sich der RichTextEditor bei der Arbeit verheddert und unlogisch verschachtelten html- Code erzeugt? Dann ist es vielleicht eine Alternative für Sie, das TYP03-Inhaltselement Tabelle zu nutzen. Also nicht Text oder Text mit Bild, in dem dann eine Tabelle angelegt wird. Der Vorteil ist, dass es relativ einfach ist, eine saubere Tabelle zu erstellen, ohne allzuviel Klicken auf irgendwelche Symbole im RichTextEditor. Für fortgeschritten Nutzer ist es sogar möglich, diese Tabellen mit einem eigenen CSS-Layout zu versehen. Diese Anleitung geht davon aus, dass Sie schon wissen, dass man bei TYPO3 angemeldet sein muss, um zu arbeiten, und was ein Inhaltselement ist. Also los: 11.1 Eine einfache Tabelle erzeugen Wählen Sie Tabelle beim einfügen eines neuen Inhaltselements aus: Wie immer können Sie für das Inhaltselement eine Überschrift etc. festlegen: 1

2 Wählen Sie dann den Reiter Tabelle aus. Erstmal machen wir nicht viel mehr als einen Text wie diesen (der aufrechte Strich dient als Trennzeichen zwischen Zellen, eine neue Zeile wird eine neue Tabellenzeile): Reihe 1, Spalte 1 Reihe 1, Spalte 2 Reihe 1, Spalte 3 Reihe 1, Spalte 4 Reihe 1, Spalte 5 Reihe 2, Spalte 1 Reihe 2, Spalte 2 Reihe 2, Spalte 3 Reihe 2, Spalte 4 Reihe 2, Spalte 5 Reihe 3, Spalte 1 Reihe 3, Spalte 2 Reihe 3, Spalte 3 Reihe 3, Spalte 4 Reihe 3, Spalte 5 Reihe 4, Spalte 1 Reihe 4, Spalte 2 Reihe 4, Spalte 3 Reihe 4, Spalte 4 Reihe 4, Spalte 5 Reihe 5, Spalte 1 Reihe 5, Spalte 2 Reihe 5, Spalte 3 Reihe 5, Spalte 4 Reihe 5, Spalte 5 in das Feld Text einzugeben, sowie eine Überschrift und eine Tabellen-Beschreibung (für Leute mit einer Sehschwäche): 2

3 Alles andere Belassen wir bei den Standardeinstellungen. Speicher und Ansehen (zum Beispiel mit ) des Ergebnisses im Frontend zeigt, was wir bisher erreicht haben: Eine sauber formatierte Tabelle mit einer Überschrift! 11.2 Der Tabellen-Editor Wenn wir zurück ins Backend gehen, dann sehen Sie nach dem Speicher ein Symbol rechts neben dem Feld Text. Durch anklicken können Sie eine Tabellen-Editor öffnen, der es Ihnen vereinfacht, die Inhalte jeder Zelle zu ändern, Spalten und Zeilen zu löschen, zu verschieben und anzufügen etc.. Wenn Sie mit der Maus über die Symbole fahren, dann bekommen Sie kurze Hilfstexte angezeigt. Wenn Sie fertig sind, dann, dann benutzen Sie den Speichern und Schliessen-Knopf links. unten 3

4 11.3 Layout-Möglichkeiten Gehen Sie zurück in den Tabelle -Reiter des Inhaltselements. Sie habe diverse Möglichkeiten, das Layout der Tabelle zu verändern. Zunächst einmal können Sie unter Zellenfüllung den Innenabstand des Textes in einer Zelle zu Ihrem Rand einstellen. Hier zum Beispiel 3 (das sind Pixel). Im Auswahlmenü belassen wir es zunächst bei ohne alles. Weiter unten gibt es die Möglichkeit, die erste Zeile als eine Kopfzeile zu definieren, ebenso die Fußzeile als einen Tabellenfuss : Wenn Sie das eingestellt haben, dann führt Speichern und Ansehen zu dieser Ansicht: Der Abstand der Zellen ist etwas größer und die Kopf- bzw. Fußzeile sind besonders hervorgehoben. Wir haben ausserdem noch zwei andere Layouts für Sie vorbereitet. Oben finden Sie das Auswahlmenü, in dem bisher die ganze Zeit ohne alles stand. Wechseln Sie dort auf einfach, Linien überall (WSF) : 4

5 Die Tabelle sieht dann so aus: bzw. ohne Kopf- und ohne Fußzeile:. Schließlich gibt es noch das Layout blau gestreift (WSF) : Dass zu dieser Darstellung führt: 5

6 bzw. mit Kopfzeile oben: bzw. mit Kopfzeile links und Fußzeile: 11.4 Fortgeschrittenes Layout Wirklich nur für Fortgeschrittene! Wenn Sie selbst schon mit html & css gearbeitet haben, dann haben Sie vielleicht schon geahnt, wozu das Feld CSS-Klasse für die Tabelle dient. Sie können der Tabellen eine eigen css-klasse mitgeben und im Quelltext sieht das dann so aus: 6

7 Sie ahnen, dass Ihnen damit einfach alle Layout-Möglichkeiten offen stehen, die es nur gibt. Selbstverständlich funktioniert das nur dann, wenn wir für Sie eine eigene css-datei bereitgestellt haben, die auf ihrer Webseite eingebunden ist. Wie Sie oben sehen belegt TYPO3 die Zeilen und Zellen mit css-klassen, deren Gestaltung Sie festlegen könne. Genau so sind die Layout von eben ( blau gestreift etc.) erzeugt. Ein Beispiel für diese Variante ist: Übrigens: Um in einer Zelle einen Zeilenumbruch zu erzwingen, können Sie den <br />-tag benutzen. 7

8 11.5 Daten aus Excel Den Text für die Tabellen-Inhalte haben wir ja in dieser Form Reihe 1, Spalte 1 Reihe 1, Spalte 2 Reihe 1, Spalte 3 Reihe 1, Spalte 4 Reihe 1, Spalte 5 Reihe 2, Spalte 1 Reihe 2, Spalte 2... eingegeben. Im TYPO3-Tabellen-Formular können Sie ein anderes Trennzeichen und ein Zeichen für die Abgrenzung der Zellen auswählen (unten, Reiter Tabellenanalyse ): Das bedeutet, dass Sie in das Feld Daten im.csv-format eingeben können (CommaSeparatedValues). Dieses Format ist eine der Exportoptionen in jedem Tabellenkalkulationsprogramm, zum Beispiel Excel. Das macht es einfach, solche Daten aus Excel auf die Webseite zu bringen: Versionshistorie dieser Anleitung: : erste Fassung (DB) 8