HTML Tabelle – Responsive Table mit CSS

Ich persönlich liebe WordPress mit all seinen Möglichkeiten und arbeite viel damit. Für viele Aufgaben gibt es Plugins, so dass auch Menschen damit arbeiten können, die nicht aus der Programmierwelt kommen. Es gibt aber immer wieder auch Momente, wo es ohne leider nicht geht. Einer diese Momente sind Tabellen!

Es gibt verschiedene Möglichkeiten, in WordPress eine Tabelle zu erstellen. Entweder nutzt Du dafür ein Plugin oder Du stellst den Editor auf „Text“ um und erstellst eine eigene HTML Tabelle und ergänzt sie um CSS. Ich persönlich favorisiere mittlerweile diese CSS Table, weil ich damit flexibler bin und meine WordPress Installation mit weniger Plugins einfach schlanker bleibt. Die meisten Menschen nutzen dafür aktuell aber ein Plugin, das bekannteste ist TablePress, damit sind die Tabellen sehr leicht umzusetzen.

Das Problem bei Tabellen ist, dass diese nun mal aus einer Vielzahl an Spalten und Zellen bestehen – und die brauchen nun mal Platz. Das ist immer dann doof, wenn deine Webseitenbesucher über ein mobiles Endgerät auf deine Seite kommen. Auf dem Tablet sieht die Tabelle meist noch gut aus, auf dem Smartphone ist dann Hopfen und Malz verloren…

Hier mal ein Beispiel, wie eine Tabelle am Desktop aussieht.

TablePress Tabelle am Desktop

Und die gleiche Tabelle auf dem Smartphone:

TablePress Tabelle am Smartphone

Wie Du siehst, fehlt die Hälfte. Das Plugin TablePress bietet eine Möglichkeit, dieses Problem zu lösen – ich persönlich mag diese Lösung aber nicht.

Horizontales Scrollen, um Tabellen auf dem Smartphone ansehen zu können

Wenn Du diesen Haken setzt, kann der Besucher nun zumindest den gesamten Inhalt einsehen, ich persönlich finde es aber optisch nicht ansprechend. Das Ergebnis sieht dann so aus.

Horizontales Scrollen umgesetzt, so dass die Tabelle auf dem Smartphone komplett lesbar ist

CSS Table – Responsive Table mit CSS umsetzen

Damit die Tabelle auch mobil gut aussieht, favorisiere ich den Weg, sie einfach mit HTML und CSS selber zu erstellen. Denn mit CSS kannst Du aus der HTML Tabelle eine sogenannte „Responsive Table“ machen, also eine Tabelle, die sich dank CSS ab einer gewissen Bildschirmgröße verändert. Ich persönlich mag es wie folgt sehr gerne.

HTML Tabelle - Responsive Table CSS

Im Customizer von deinem WordPress Theme gibt es die Möglichkeit, zusätzliches CSS einzubinden.

In WordPress eigenes CSS hinterlegen um CSS Table zu erstellen

CSS Table – Das Styling deiner Tabelle

Dort fügst Du nun den folgenden Code ein:

/**HTML Tabelle - Responsive Table CSS**/
.RespTable th {
background: #f5f8fd;
}
@media all and (max-width:640px) {
.RespTable, .RespTable thead, .RespTable tbody, .RespTable tr, .RespTable th, .RespTable td {
display: block;
}
.RespTable {
text-align: right;
}
.RespTable thead {
position: absolute;
top: -1111px;
left: -1111px;
}
.RespTable td:before {
float: left;
padding: 0 10px 0 0;
content: attr(data-label) ":";
font-weight: bold;
}
.RespTable td:nth-child(1) {
font-weight: bold;
}
.RespTable td:last-child {
border-bottom: 5px #1d4d33 solid;
}
.oddRow {
background: #fff;
}
.oddCol {
background: #f5f8fd;
}
} 

Die für dich wichtigsten Punkte dabei sind wahrscheinlich die letzten beiden, denn damit definierst Du die Hintergrundfarben der Zeilen auf dem Smartphone.

HTML Tabelle erstellen

Nun muss nur noch die HTML Tabelle erstellt werden. Dafür musst Du zunächst den Editor bei WordPress von Visuell auf Text umstellen.

Wordpress auf HTML Editor umstellen, um eine HTML Tabelle erstellen zu können

Dort kopierst Du nun folgenden Code rein:

<table class="RespTable">
<thead>
<tr>
<th></th>
<th>Räder</th>
<th>Geschwindigkeit</th>
<th>Personen</th>
<th>Farbe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="oddCol" data-label="Fahrzeug"><strong>Auto</strong></td>
<td class="textRight" data-label="Räder">4 Räder</td>
<td class="textRight oddCol" data-label="Geschwindigkeit">200 km/h</td>
<td class="textRight" data-label="Personen">5 Personen</td>
<td class="textRight oddCol" data-label="Farbe">Grün</td>
</tr>
<tr class="oddRow">
<td class="oddCol" data-label="Fahrzeug"><strong>LKW</strong></td>
<td class="textRight" data-label="Räder">6 Räder</td>
<td class="textRight oddCol" data-label="Geschwindigkeit">100 km/h</td>
<td class="textRight" data-label="Personen">3 Personen</td>
<td class="textRight oddCol" data-label="Farbe">Gelb</td>
</tr>
<tr>
<td class="oddCol" data-label="Fahrzeug"><strong>Quad</strong></td>
<td class="textRight" data-label="Räder">4 Räder</td>
<td class="textRight oddCol" data-label="Geschwindigkeit">60 km/h</td>
<td class="textRight" data-label="Personen">2 Personen</td>
<td class="textRight oddCol" data-label="Farbe">Rot</td>
</tr>
<tr class="oddRow">
<td class="oddCol" data-label="Fahrzeug"><strong>Fahrrad</strong></td>
<td class="textRight" data-label="Räder">2 Räder</td>
<td class="textRight oddCol" data-label="Geschwindigkeit">25 km/h</td>
<td class="textRight" data-label="Personen">1 Person</td>
<td class="textRight oddCol" data-label="Farbe">Blau</td>
</tr>
</tbody>
</table>

Das Ergebnis sieht dann so aus:

Räder Geschwindigkeit Personen Farbe
Auto 4 Räder 200 km/h 5 Personen Grün
LKW 6 Räder 100 km/h 3 Personen Gelb
Quad 4 Räder 60 km/h 2 Personen Rot
Fahrrad 2 Räder 25 km/h 1 Person Blau

Du siehst, für eine schöne Tabelle innerhalb von WordPress benötigst Du nur ein bisschen HTML und CSS, um zu einem guten Ergebnis zu kommen.

Und jetzt viel Spaß und Erfolg mit deiner eigenen CSS Table 🙂

2 Kommentare

    • Moin Nils,
      klar, ein wenig Arbeit ist damit definitiv verbunden. Dafür sieht die Tabelle meiner Meinung nach danach super aus. Hast Du eine andere Idee, wie man das lösen kann?
      Gruß, Christian

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*