Öffnungszeiten, verfügbare Ausführungen oder ein einfacher Leistungsvergleich: Manche Angaben lassen sich in Zeilen und Spalten schneller erfassen als in einem langen Absatz. Wenn Sie eine Tabelle in WordPress erstellen, müssen jedoch Inhalt, Überschriften und Darstellung zusammenpassen. Auf dem Smartphone soll erkennbar bleiben, welcher Wert zu welchem Merkmal gehört.
Dieser Leitfaden behandelt kleine redaktionelle Datentabellen im WordPress-Block-Editor. Er ersetzt weder ein Buchungssystem noch eine komplexe Produktdatenbank. Für wenige klare Angaben ist zunächst eine einfache Struktur sinnvoller als eine umfangreiche Tabellen-Erweiterung.
Prüfen, ob eine Tabelle die richtige Form ist
Eine Tabelle ist hilfreich, wenn Menschen gleichartige Angaben vergleichen oder einen Wert anhand von Zeile und Spalte finden möchten. Eine Liste reicht häufig aus, wenn nur mehrere unabhängige Hinweise genannt werden. Für dekorative Spalten, Bildanordnungen oder die Aufteilung einer ganzen Seite ist ein Datenraster nicht die passende Grundlage.
Formulieren Sie vor dem Aufbau eine Aufgabe: „Besucher sollen sehen, welche Unterlagen sie für welche Beratung mitbringen.“ Daraus ergeben sich die Spalten. Wenn jede Zelle einen eigenen langen Erklärungstext benötigt, sollten Sie den Inhalt möglicherweise auf mehrere Abschnitte verteilen.
Entscheiden Sie auch, wer die Angaben aktuell hält. Eine korrekt gestaltete Tabelle mit veralteten Informationen bleibt unzuverlässig. Halten Sie intern Quelle, zuständige Person und nächsten Prüftermin fest.
Zeilen und Spalten zuerst auf Papier ordnen
Geben Sie jeder Spalte eine eindeutige Bedeutung und halten Sie diese über alle Zeilen hinweg ein. „Vorbereitung“ sollte nicht in einer Zeile eine mitzubringende Unterlage und in der nächsten eine Bearbeitungsdauer enthalten. Schreiben Sie Einheiten direkt dazu, wenn Werte sonst missverständlich wären.
Vermeiden Sie unklare Leerstellen. „Nicht vorgesehen“, „auf Anfrage“ und „noch nicht festgelegt“ haben unterschiedliche Bedeutungen. Ein Strich erklärt diese Unterschiede nicht. Verwenden Sie nur Aussagen, die Ihr Team bestätigen kann; ergänzen Sie keine erfundenen Preise oder Liefertermine, damit die Tabelle vollständiger aussieht.
Den WordPress-Tabellenblock bewusst verwenden
Fügen Sie im Block-Editor den Block „Tabelle“ hinzu und wählen Sie die benötigten Zeilen und Spalten. Die offizielle WordPress-Dokumentation zum Tabellenblock beschreibt unter anderem das Ergänzen und Entfernen von Zeilen, die Kopfzeile und die Beschriftung. Oberfläche und verfügbares Aussehen können je nach Version und Theme abweichen.
Nutzen Sie die vorgesehene Kopfzeile, wenn die erste Zeile Spaltenüberschriften enthält. Eine normale Zelle nur fett zu formatieren stellt dieselbe strukturelle Bedeutung nicht sicher. Prüfen Sie die Einstellung für feste Zellbreiten am tatsächlichen Inhalt: Gleich breite Spalten sind nicht automatisch die beste Verteilung für kurze Begriffe und längere Erläuterungen.
Beginnen Sie mit zurückhaltender Gestaltung. Ausreichende Abstände und nachvollziehbare Zeilen helfen mehr als viele Farben. Eine notwendige Unterscheidung muss auch ohne eine bestimmte Hintergrundfarbe verständlich sein.
Fiktives Beispiel: Vorbereitung auf ein Fachgespräch
Die folgende Übersicht für eine fiktive Rahmenwerkstatt in Basel zeigt zwei Beratungssituationen. Lesende können ihr Anliegen der passenden Vorbereitung zuordnen. Die Tabelle bleibt bewusst bei zwei Spalten, damit die Zuordnung überschaubar ist.
| Anliegen | Hilfreiche Vorbereitung |
|---|---|
| Neues Bild rahmen | Bild oder Foto davon und ungefähres Außenmaß mitbringen. |
| Vorhandenen Rahmen prüfen | Gesamtansicht und Detailfotos der betroffenen Stellen vorbereiten. |
Eine zusätzliche Spalte mit allgemeinen Werbeaussagen würde hier wenig erklären. Ausführliche Informationen zur Leistung gehören in einen begleitenden Abschnitt. Ändert sich die Vorbereitung, werden die betroffene Zeile und der dazugehörige Seitentext gemeinsam überprüft.
Überschriften und Beschriftung technisch mitdenken
Das W3C-Tutorial zu Datentabellen erläutert, wie Kopfzellen und Datenzellen ausgezeichnet und miteinander verbunden werden. Bei komplexeren Tabellen können zusätzliche Zuordnungen erforderlich sein. Lassen Sie solche Konstruktionen gezielt prüfen, statt mehrere verschachtelte Kopfzeilen nur optisch nachzubauen.
Eine kurze Tabellenbeschriftung erklärt das Thema. Das W3C beschreibt dafür das HTML-Element caption. Eine sichtbare Beschriftung unter einem WordPress-Block und eine solche Tabellenbeschriftung sind nicht automatisch technisch gleich umgesetzt. Wenn eine eindeutige Zuordnung benötigt wird, sollte die Betreuung den erzeugten HTML-Code prüfen.
Diese einzelne Prüfung ist Teil eines größeren Themas. Weitere Grundlagen finden Sie in unserer Übersicht zur zugänglichen Gestaltung von Websites. Eine Kopfzeile allein ist noch kein vollständiger Nachweis der Barrierefreiheit.
Die öffentliche Mobilansicht statt nur den Editor prüfen
Öffnen Sie die veröffentlichte beziehungsweise freigegebene Vorschau auf einem schmalen Bildschirm und vergrößern Sie die Darstellung. Bleiben Überschriften, Einheiten und vollständige Zellen lesbar? Verfolgen Sie eine Zeile von links nach rechts: Ist die Zugehörigkeit ihrer Angaben noch klar?
Wenn eine breite Tabelle nicht sinnvoll schmaler werden kann, braucht sie eine gezielte Lösung, beispielsweise einen gut bedienbaren horizontalen Scrollbereich. Die restliche Seite soll dabei nicht unkontrolliert seitlich wandern. Das Ausblenden wichtiger Spalten oder eine kaum lesbare Minischrift löst das Inhaltsproblem nicht.
Bei einer Umwandlung in mobile Karten muss die Zuordnung der Werte zu ihren Überschriften erhalten bleiben. Lassen Sie eine solche Theme- oder Code-Anpassung fachlich prüfen. Unser Ablauf zum mobilen Testen echter Nutzerwege hilft, Beobachtungen nachvollziehbar zu dokumentieren.
Vor der Freigabe fünf Fragen beantworten
- Unterstützt die Tabelle eine konkrete Vergleichs- oder Suchaufgabe?
- Hat jede Spalte eine klare Bedeutung und jede Angabe eine bestätigte Grundlage?
- Sind Kopfzellen und notwendige Zuordnungen strukturell umgesetzt?
- Bleiben alle Informationen auf schmalen Bildschirmen erreichbar?
- Ist festgelegt, wer die Angaben künftig prüft und korrigiert?
Wenn vorhandene Tabellen in Ihrem Layout schwer lesbar sind, beginnen Sie mit einem konkreten Beispiel. KIM Systems unterstützt bei der Weiterentwicklung Ihrer WordPress-Website. Inhalt, Struktur und mobile Darstellung sollten dabei gemeinsam beurteilt werden.