HTML Tabelle Zeile einfügen oder entfernen (WordPress)

In Zeiten von Responsive Webdesign sind Tabellen im HTML-Code auf Websites sehr rar geworden. Das ist auch gut so. Nichtsdestotrotz sind Tabellen an geeigneten Stellen die beste Möglichkeit um Daten übersichtlich darzustellen. In klassischen CMS-Editoren, wie beispielsweise bei WordPress, ist es jedoch etwas komplizierter die HTML Tabelle um eine Zeile zu erweitern oder eine Tabellenzeile zu löschen. Wir zeigen dir daher im Folgenden am Beispiel von WordPress einfach erklärt, wie du bei einer HTML Tabelle eine Zeile einfügst oder entfernst.

Der Artikel ist in folgende Bereiche untergliedert. Klicke auf einen Link um direkt zu dieser Sektion zu springen:

Melde dich zuerst im WordPress Backend an und gehe zu der gewünschten Seite. Je nach eingesetzten Editor oder Page Builder kann die Seite im Backend unterschiedlich aussehen. Gehe auf bzw. in die Text-Passage hinein, in der sich die Tabelle befindet. Hier ein Beispiel wie eine Website Tabelle im visuellen Text-Editor im WPBakery Page Builder aussieht:

Im Text-Bearbeitungs-Modus angekommen müssen wir uns nun den reinen HTML-Code anzeigen lassen. Beim WPBakery Page Builder geht das, indem du oben rechts neben „Visuell“ auf „Text“ klickst.

Nun wechselt der Editor vom visuellen Modus in den HTML-Modus. Der visuelle Modus wird auch WYSIWYG genannt (also ausgeschriebenen What You See Is What You Get; oder zu deutsch: Du bekommst was du siehst). Der WYSIWYG-Modus bei Website-Editoren im CMS einer Website ist durchaus beliebt und nützlich, da er der gewohnten Word-Oberfläche ähnelt. Doch um eine Tabelle auf einer Website zu bearbeiten benötigen wir die reine HTML-Ansicht.

In der HTML-Ansicht im Editor angekommen sehen wir die Tabelle als HTML. Eine gewöhnliche Tabelle sieht aus wie folgt:

<table>
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>München</th>
</tr>
<tr>
<td>Miljöh</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr>
<tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>

Das Beispiel zeigt eine einfache Tabelle mit drei Zeilen, in denen jeweils drei Zellen definiert wurden. Die erste Zeile enthält Kopfzellen (<th>…</th>), die beiden anderen Datenzellen (<td>…</td>).

Um die Tabelle um eine Zeile zu erweitern kopieren wir den gesamten Inhalt von einem öffnenden <tr> bis zu einem schließenden </tr> und fügen den kopierten Inhalt exakt hinter dem schließenden </tr> ein. Das <tr>…</tr> steht hierbei für table row, also eine Tabellenzeile.

Das Entfernen einer Tabellenzeile im HTML funktioniert ähnlich wie das hinzufügen. Nur statt einer Tabellenzeile (table row) zu markieren und zu kopieren entfernen wir diese.

Das heißt, markiere den gesamten Inhalt von einem öffnenden <tr> bis zu einem schließenden </tr> und lösche ihn mithilfe der Delete-Taste.

Tabellen auf Websites funktioniere immer gleich. Das heißt, auch wenn du nicht WordPress nutzt, kannst diese Anleitung nutzen um eine Tabelle zu verändern.

Wichtig ist, dass du in den HTML-Modus kommst und nicht den Inhalt der Seite im visuellen Modus (auch WYSIWYG genannt). Denn von hier an funktioniert das abändern einer Tabelle immer gleich.

Bei Fragen kannst du uns immer gerne unten einen Kommentar hinterlassen oder schreibe uns eine Nachricht.