3.5 Tabellen

Mit den Werkzeugen zur Textbearbeitung in Joomla lernen Sie, wie man eine Tabelle in einem Beitrag erstellt und formatiert. In diesem letzten Tutorial des Abschnitts vervollständigen wir den Beitrag Our Services, indem wir eine Tabelle mit Plänen und Preisen hinzufügen.

Voraussetzungen

• 1 Einführung in das Tutorial erklärt, wo Sie das Tutorial ausführen können und was den Administratorzugriff betrifft.
• 3.4 Links fügt den Joomla-Hyperlink hinzu, auf dem der Ausgangspunkt dieses Tutorials aufbaut.

Schritte

1. Im Backend von Joomla anmelden und zum Dashboard navigieren.
2. Im Administrationsmenü auf Inhalt > Beiträge klicken.
3. Auf Our Services klicken, um ihn zur Bearbeitung erneut zu öffnen.
4. Am Ende der letzten Zeile des Beitrags klicken, dann Eingabetaste drücken, um eine neue Zeile zu beginnen.
5. Wie in 3.2 Überschriften gezeigt, das Format auf Überschrift 2 setzen und Plans & Pricing eingeben.
6. Eingabetaste drücken, das Format auf Absatz setzen und folgenden Text eingeben: Choose the plan that fits where you are today — you can always move up as you grow.
7. Eingabetaste drücken, um eine neue Zeile für die Tabelle zu beginnen.
8. Die Werkzeugleiste durch Klicken auf das Auslassungssymbol erweitern.
   • Die Werkzeugleiste passt sich an die Browserbreite an. Die Anordnung und Position der Symbole kann von der hier gezeigten abweichen.
9. Das Tabellensymbol ist ein Dropdown-Menü. Das Menü öffnen und mit der Maus über die erste Option, Tabelle, fahren. Ergebnis: Ein Raster erscheint rechts daneben.
10. Mit der Maus über das Raster fahren, um eine Tabelle mit 4 Spalten und 4 Zeilen auszuwählen, dann klicken, um sie einzufügen.
    

    

11. Die Tabelle ausfüllen, dabei mit Tab von Zelle zu Zelle springen:
    • Zeile 1 (Kopfzeile): Feature, Basic, Standard, Premium
    • Zeile 2: Consulting hours, 5/mo, 15/mo, Unlimited
    • Zeile 3: Implementation support, Email only, Email + calls, Dedicated manager
    • Zeile 4: Support response time, 2 business days, 1 business day, Same Day
12. Befindet sich der Cursor in einer beliebigen Zelle, erscheint ein Kontextmenü über der Tabelle.
    • Hier können Zeilen oder Spalten hinzugefügt oder gelöscht werden.
    • Mit der Maus über die Symbole fahren, um deren Funktion anzuzeigen.
    
    

    

13. Spalten- und Tabellenbreite anpassen.
    • Den Mauszeiger über die Trennlinie zwischen zwei Spalten bewegen und beachten, dass sich der Cursor ändert.
    • Die Trennlinie klicken und nach links oder rechts ziehen, um die Breite einer Spalte zu ändern.
    • Durch Ziehen der äußersten rechten Trennlinie wird die Breite der Tabelle angepasst.
14. Beitrag speichern und als Vorschau anzeigen, indem auf die Schaltfläche Speichern und anschließend auf die Schaltfläche Vorschau geklickt wird. Ergebnis: Ein Popup-Fenster mit dem Beitrag erscheint.
    • Nach unten scrollen, um die Tabelle zu prüfen.
    • Es ist zu beachten, dass zwischen den Tabellenzellen keine Rahmenlinien vorhanden sind.
    • Das Vorschaufenster schließen.
15. Zellenrahmen hinzufügen.
    • In die obere linke Zelle klicken und nach unten und rechts ziehen, um alle Zellen der Tabelle hervorzuheben.
    • Mit der rechten Maustaste auf eine hervorgehobene Zelle klicken, mit dem Mauszeiger über Zelle fahren und dann auf Zelleneigenschaften klicken. Ergebnis: Das Fenster Zelleneigenschaften öffnet sich.
      

      

    • Auf Erweitert klicken. Rahmenbreite auf 1px und Rahmenstil auf Durchgezogen setzen.
      

      

    • Das Formular speichern und schließen.
    • Den Beitrag speichern und als Vorschau anzeigen. Ergebnis: Alle Zellen sind gleich formatiert. Als Nächstes wird die Tabellenüberschrift formatiert.
    • Das Vorschaufenster schließen.
16. Die Kopfzeile der Tabelle festlegen.
    • Die oberste Zeile der Tabelle hervorheben, indem in die obere linke Zelle geklickt und bei gedrückter Maustaste nach rechts gezogen wird.
    • Mit der rechten Maustaste auf eine der hervorgehobenen Zellen klicken, mit dem Mauszeiger über Zelle fahren und dann auf Zelleneigenschaften klicken.
    • Unter Zellentyp Kopfzelle auswählen.
    • Unter Horizontale Ausrichtung Zentriert auswählen und anschließend speichern. Ergebnis: Der Inhalt der Kopfzelle wird zentriert und fett formatiert dargestellt.
      

      

    • Beitrag speichern und Vorschau ansehen. Ergebnis: Der Zelleninhalt liegt eng an den Zellenrändern an.
    • Vorschaufenster schließen.
17. Zellenabstand (Padding) anpassen.
    • Irgendwo in der Tabelle rechtsklicken und Tabelleneigenschaften auswählen.
    • 5px unter Zellenabstand eingeben.
    • Beitrag speichern und Vorschau ansehen. Ergebnis: Die Tabelle ist vollständig formatiert — mit Rahmen, einer zentrierten, fett gedruckten Kopfzeile und angenehmem Zellenabstand.
      

      

Auf Speichern & Schließen klicken. Ergebnis: Our Services ist nun vollständig — ein einleitender Absatz mit Fett- und Kursivschrift, drei mit Überschriften versehene Dienstleistungsabschnitte, eine Aufzählungsliste und eine verschachtelte nummerierte Liste, ein Hyperlink zum Joomla-Projekt sowie eine formatierte Preistabelle. Wer ihn veröffentlichen möchte, findet in 2.1 Beitrag & Menüeintrag Informationen dazu, wie ein Menülink hinzugefügt wird, damit Besucher ihn finden können.

Die geführte Tour dieses Tutorials starten

Geführte Tour starten Tabellen · 15 Schritte

Mache dieses Tutorial Schritt für Schritt in einem Joomla Playground: einer Joomla-Website, die in deinem Browser läuft.
Der Start dauert einige Sekunden, höchstens eine halbe Minute.

Tabellen In neuem Tab öffnen × Schließen

Konzepte

Das Festlegen von Kopfzellen ist eine wichtige semantische und die Barrierefreiheit betreffende Angelegenheit; weitere Informationen unter Creating Accessible Tables.

Browser passen Tabellen- und Zellenbreiten je nach Browserbreite und Fenstergröße unterschiedlich an.

Tabellen sind für die Darstellung tabellarischer Daten vorgesehen. Früher war es üblich, Tabellen für das Layout zu verwenden, um Inhalte auf einer Seite zu positionieren. Dafür sollten sie niemals verwendet werden.