Neben AbsĂ€tzen, AufzĂ€hlungslisten & Co. kannst du in WordPress natĂŒrlich auch Tabellen in deine BeitrĂ€ge einfĂŒgen.
In diesem Artikel schauen wir uns an, wie genau das funktioniert, wie du deine Tabellen anpassen kannst und auch, wann sie sinnvoll sind und wann nicht.
Vorab : wofĂŒr eignen sich Tabellen?
Tabellen sind spitze, um Informationen ĂŒbersichtlich und kompakt in einer Matrix darzustellen. Das kann bei vielen Arten von Blogartikeln hilfreich sein.
Allerdings gibt es eine Stolperfalle: bedenke, dass die meisten deiner Leser ĂŒbers Smartphone unterwegs sind. Auf kleinen Bildschirmen fĂŒhren Tabellen naturgemÀà zu einigen Herausforderungen, gerade wenn sie mehrere Spalten haben:
- Entweder sehen deine Leser die ganze Tabelle auf einmal, erkennen vom Text aber nicht viel mehr als winzig kleine AmeisenstraĂen. đ đ đ
- Oder sie mĂŒssen die Tabelle hin und her schieben, was zu Lasten der Ăbersichtlichkeit geht.
- Oder die einzelnen Spalten wachsen zwar responsiv in der Breite mit, werden dabei aber so schmal, dass immer nur ein paar Buchstaben in jeder Zeile stehen und deine Tabelle dafĂŒr drölfzighundert Kilometer lang wird.
Das kann dann so unglĂŒcklich ausschauen:
Daher solltest du Tabellen beim Bloggen immer mit Bedacht einsetzen und nicht zu komplex werden lassen.
Wann solltest du keine Tabelle verwenden?
Diejenigen von uns, die schon etwas lĂ€nger in diesem verrĂŒckten Internet unterwegs sind, kennen sie vielleicht noch: „Tabellenlayouts“. FrĂŒher (so um 2010 herum) waren HTML und CSS noch nicht so weit entwickelt wie heute und auch die Browser taten sich deutlich schwerer, Webseiten vernĂŒnftig darzustellen.
Daher war ein pragmatischer Ansatz gang und gĂ€be: anstatt sich fĂŒr mehrspaltige Layouts mit einer Sidebar mit Floating und Clearing herumzuschlagen, nahm man als GrundgerĂŒst einer Webseite gern einfach eine Tabelle. Das sah auf den ersten Blick einfach aus, zog aber einen ganzen Rattenschwanz an Problemen nach sich. Allem voran sind solche Tabellen starr und können daher beispielsweise nicht auf Smartphones einspaltig dargestellt werden.
Heutzutage findet man das gar nicht mehr und das ist auch gut so.
Aber nicht nur fĂŒr das generelle Layout deiner Seite, sondern auch fĂŒr Inhalte gilt: nutze Tabellen nicht, um Inhalte nebeneinander zu positionieren. DafĂŒr gibt es in Gutenberg den Spaltenblock, der das viel besser macht! DafĂŒr habe ich auch eine Anleitung fĂŒr dich:
Nimm Tabellen also bitte niemals fĂŒr Layoutzwecke, sondern immer nur, um Inhalte strukturiert als Matrix darzustellen!
Excel-Ă€hnliche Tabellen in WordPress?
Die von WordPress standardmĂ€Ăig erzeugte Tabelle ist tatsĂ€chlich einfach nur eine tabellarische Darstellung deiner Inhalte, bringt aber keine Tabellenfunktionen wie in Excel mit sich. Du kannst hier also keine Funktionen eintippen, um beispielsweise automatisch die Summe mehrerer Datenzellen zu berechnen und kannst die Inhalte auch nicht filtern oder sortieren.
Das alles kannst du aber ĂŒber ein Plugin namens wpDataTables nachrĂŒsten. Ich habe das Plugin selber noch nicht ausprobiert, es sieht aber ziemlich mĂ€chtig aus (und ist daher auch kostenpflichtig).
Gutenberg rockt!
Ich bin ja bekennender Fan des Gutenberg-Editors! Deswegen beschreibe ich dir hier auch, wie du die Tabellen ĂŒber den entsprechenden Block in Gutenberg einfĂŒgst.
Gutenberg ist der Standardeditor in WordPress, der seit ein paar Jahren automatisch mitgeliefert wird. Wenn du damit noch nicht so recht vertraut bist und lieber noch auf den alten Classic Editor setzt, dann empfehle ich dir vorab meinen Artikel Keine Scheu vor dem Gutenberg-Editor in WordPress! Darin zeige ich dir, wie Gutenberg funktioniert und warum dieser Editor wirklich genial ist.
Tabelle erstellen mit dem Tabellen-Block in Gutenberg
NatĂŒrlich gibt es einen eigenen Block fĂŒr Tabellen! Um eine Tabelle einzufĂŒgen, klickst du wie gewohnt auf das Plus-Symbol und suchst nach „Tabelle“.
Alternativ kannst du in einem neuen Absatz auch einfach /tabelle
eingeben (mit dem Slash / vorne dran).
Als erstes wirst du gefragt, wie viele Spalten und Zeilen deine Tabelle haben soll.
Keine Sorge, das kannst du spĂ€ter jederzeit Ă€ndern und entweder zusĂ€tzliche Spalten und Zeilen einfĂŒgen oder auch bestehende wieder löschen!
Ich habe mich hier mal fĂŒr 3 Spalten und 5 Zeilen entschieden.
Die neu erzeugte Tabelle sieht erstmal herzlich nackig und langweilig aus:
Sobald du deine Inhalte eintippst, siehst du, dass die Spaltenbreite zudem wenig elegant mitwĂ€chst. Darum kĂŒmmern wir uns gleich!
Deine Tabelle anpassen
Klick in deine Tabelle und schau in die Seitenleiste am rechten Bildschirmrand – hier findest du alle Einstellungen rund um deinen Tabellen-Block.
Gehen wir die einzelnen Einstellungen mal durch:
- Tabellenzellen mit fester Breite: hierdurch bekommen sÀmtliche Spalten die gleiche Breite.
- Kopfzeile: eine zusĂ€tzliche Zeile wird oben eingefĂŒgt, die fĂŒr die Ăberschriften der einzelnen Spalten gedacht ist. Sie sieht nicht nur etwas anders aus (fette Schrift usw.), sondern beinhaltet auch die semantische Angabe, dass es sich hier um die Ăberschriften handelt.
- FuĂzeile: analog zur Kopfzeile kann auch die allerletzte Zeile anders formatiert sein und eignet sich beispielsweise, wenn du eine Summe „unterm Strich“ anzeigen möchtest.
In meiner Tabelle bietet es sich an, mit festen Spaltenbreiten zu arbeiten sowie eine Kopfzeile zu verwenden.
Wie du siehst, erscheint fĂŒr die Kopfzeile eine neue Zeile. Daher kopiere ich meine „Durchmesser in Kilometern“ und „Monde“ einfach dort hinein und lösche die ĂŒberflĂŒssig gewordene leere Zeile.
Das geht so:
Zeilen und Spalten löschen oder einfĂŒgen
Klick in eine Zelle, deren Zeile oder Spalte du löschen möchtest. In dem kleinen KontextmenĂŒ wĂ€hlst du das Tabellensymbol aus.
Hier öffnet sich ein Fensterchen, ĂŒber das du nach Herzenslust Spalten und Zeilen löschen oder neu einfĂŒgen kannst. đ
Den Stil deiner Tabelle Àndern
So weit, so gut.
Als nĂ€chstes geht es ans Stylen der Tabelle. Schnöde schwarze Gitterlinien sind ja nicht gerade hĂŒbsch. đ
Schau wieder in die rechte Seitenleiste. Neben dem ZahnrĂ€dchen, bei dem wir gerade die Einstellungen geĂ€ndert haben, gibt es einen schwarz-weiĂen Kreis. HierĂŒber passt du den Stil deiner Tabelle an:
Die wichtigste Option ist hier das Umschalten von „Standard“ auf „Streifen“. Das sieht dann so aus:
Wir haben jetzt eine Tabelle ohne Rahmen, dafĂŒr mit farbig hinterlegten Zeilen.
Ăbrigens sind diese Streifen etwas, das WordPress bzw. Gutenberg von Hause aus mitbringt, ohne dass dein Theme dafĂŒr eigens ausgerĂŒstet sein muss. NatĂŒrlich kann es sein, dass dein Theme beispielsweise die Farbe der Streifen hĂŒbscher aussehen lĂ€sst als einfach nur hellgrau. Aber selbst wenn dein Theme gar keine Anweisungen fĂŒr Tabellen beinhaltet, funktioniert diese Darstellung trotzdem.
So sieht das beispielsweise in meinem Theme aus:
Die Tabelle schaut ziemlich genau so aus wie im Editor, nur dass ich im Frontend eine andere Schriftart verwende.
Durchmesser in Kilometern | Monde | |
---|---|---|
Sonne | 1.400.000 | 0 |
Merkur | 4.879 | 0 |
Venus | 12.104 | 0 |
Erde | 12.756 | 1 |
Neben dem Streifenlayout kannst du im Stil-Tab ĂŒber „Farbe“ und „Typografie“ auĂerdem einstellen, wie die Farbgebung und Schrift in deiner Tabelle aussehen soll.
Ich empfehle dir, das nur in AusnahmefÀllen direkt hier im Block festzulegen und lieber global im Stylesheet mittels CSS zu definieren. Dann sehen nÀmlich automatisch alle Tabellen gleich aus.
Wenn du beispielsweise die Hintergrundfarbe der „gestreiften“ Zeilen Ă€ndern möchtest, geht das ĂŒber folgenden Code:
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background: #f0e8e4;
}
Du kannst auch die Ausrichtung Ă€ndern, sprich, ob deine Inhalte zentriert, linksbĂŒndig oder rechtsbĂŒndig dargestellt werden sollen. Das funktioniert fĂŒr Tabellen ganz genau so wie auch fĂŒr AbsĂ€tze und Co:
Die Spaltenbreite Àndern
Vorhin haben wir ja schon gesehen, dass du die Spaltenbreite entweder gar nicht festlegst, sodass sie mit dem Inhalt „mitwĂ€chst“, oder sie fĂŒr alle Spalten gleich setzt.
Aber was ist, wenn eine Spalte eine ganz bestimmte Breite haben soll?
DafĂŒr bietet WordPress von Hause aus tatsĂ€chlich keine Option. Aber mit etwas CSS kriegen wir das natĂŒrlich trotzdem hin! đ
Je nach „Einsatzzweck“ empfehle ich dir unterschiedliche Herangehensweisen:
- Wenn du nur eine einzige Spalte in einer einzigen Tabelle anpassen willst, wechselst du in die Code-Ansicht des Editors, suchst die betreffende Spalte und schreibst deren Breite dort direkt inline als CSS-Angabe hin. Ich zeige dir gleich, wo und wie genau.
- Wenn du alle Spaltenbreiten in einer einzigen Tabelle Àndern willst, machst du auch das inline direkt im Code.
- Wenn du in deinem Blog mehrere Tabellen hast, deren Spaltenbreite du anpassen willst, trĂ€gst du im Tabellen-Block unter „Erweitert“ eine zusĂ€tzliche CSS-Klasse ein und legst die einzelnen Spaltenbreiten im Stylesheet fest.
Im nĂ€chsten Abschnitt gebe ich dir einen kleinen Exkurs zum Code von Tabellen. Dadurch lernst du, wo du deine Spaltenbreite fĂŒr die unterschiedlichen Szenarien jeweils Ă€nderst.
Das HTML und CSS von Tabellen
Eine Tabelle besteht in HTML immer aus einem umgebenden Tag <table>
, in dem sich die einzelnen Zeilen <tr>
(fĂŒr table row) befinden. In jeder <tr>
befinden sich die einzelnen Tabellenzellen in <td>
(fĂŒr table data).
Die Kopfzeile hat als Besonderheit, dass sie zusÀtzlich von einem <thead>
umgeben ist und hier heiĂen die einzelnen Zellen nicht <td>
, sondern <th>
. Die ĂŒbrigen Zeilen sind von einem <tbody>
umschlossen.
Diese ganze Verschachtelung klingt jetzt erstmal wild! đ
Meine Planetentabelle sieht im Code so aus:
<table class="has-fixed-layout">
<thead>
<tr>
<th></th>
<th>Durchmesser in Kilometern</th>
<th>Monde</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sonne</td>
<td>1.400.000</td>
<td>0</td>
</tr>
<tr>
<td>Merkur</td>
<td>4.879</td>
<td>0</td>
</tr>
<tr>
<td>Venus</td>
<td>12.104</td>
<td>0</td>
</tr>
<tr>
<td>Erde</td>
<td>12.756</td>
<td>1</td>
</tr>
</tbody>
</table>
Keine Sorge, das musst du nicht selber so runterschreiben – dafĂŒr gibt es ja Gutenberg!
(In meiner Ausbildung zur Mediengestalterin damals musste ich in einer PrĂŒfung tatsĂ€chlich den Code einer extrem verschachtelten Tabelle mit teilweise auch verbundenen Zellen selber schreiben – und zwar von Hand mit einem Stift auf Papier. đ )
Aber da du jetzt die grundlegende Struktur kennst, weiĂt du auch, wo du mit deinem Code fĂŒr die Spaltenbreite ansetzen musst:
- Einzelne Spalten sprichst du in der jeweils obersten Zeile an, also im
<th>
:<th style="width: 200px;">
Die ĂŒbrigen Spalten teilen sich den verbleibenden Platz dann automatisch auf. - Das geht auch prozentual mit allen Zeilen – jede
<th>
bekommt einen anderen Wert, alle zusammen mĂŒssen auf 100 kommen:<th style="width: 50%;">
- Wenn du das fĂŒr mehrere Tabellen haben möchtest und fĂŒr deine Tabelle eine zusĂ€tzliche Klasse eingetragen hast, sieht das im Code automatisch so aus:
<table class="has-fixed-layout tolletabelle">
Da kĂŒmmern wir uns im CSS um die Spaltenbreiten.
Im Stylesheet kannst du ĂŒber th
alle Spalten auf einmal ansprechen, ĂŒber th.tollespalte
nur die <th class="tollespalte">
oder – jetzt wird es fancy! đ – du kannst auch durchzĂ€hlen und so beispielsweise nur die erste oder jede zweite Spalte ansprechen.
/* alle Spalten */
th {
width: 20%;
}
/* Spalte mit der Klasse .tollespalte */
th.tollespalte { ... }
/* erste Spalte in der Tabelle .tolletabelle */
table.tolletabelle th:nth-child(1) { ... }
/* dritte Spalte in der Tabelle .tolletabelle */
table.tolletabelle th:nth-child(3) { ... }
Jetzt weiĂt du, was du alles mit Tabellen in WordPress anstellen kannst!
Ich hoffe, der Beitrag hat dir weitergeholfen. đ
Hallo, vielen Dank fĂŒr die Infos. Eine Sache bleibt unklar: Wie kann ich den INHALT einer bestehenden Tabelle löschen (konkret den mit STRG+Mausziehen markierten Inhalt eines Bereiches). Es ist lĂ€stig, den bestehenden Inhalt einer Tabelle zellenweise jeweils erst zu löschen, bevor ein neuer Inhalt in eine Zelle eingetragen wird. Löschen „am StĂŒck“ vereinfacht diesen Vorgang deutlich.
Hallo Manfred,
das ist tatsĂ€chlich so nicht möglich… man kann leider nicht mehrere Zellen auf einmal auswĂ€hlen und die dann einfach in einem Rutsch leeren. Das geht immer nur zellenweise, was bei umfangreicheren Tabellen tatsĂ€chlich umstĂ€ndlich ist.
Viele GrĂŒĂe
Anne