Skip to main content

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:

HTML-Code der Tabelle finden

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.

Tabellenzeile im HTML-Code einfügen

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.

HTML-Tabelle Zeile entfernen

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.

Website Tabelle außerhalb von WordPress bearbeiten

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.

Maxim

Maxim ist Inhaber von ComMotion und dein Ansprechpartner für alle Leistungen der Werbeagentur im Raum Stuttgart. Seine Kernkompetenz liegt in der Webentwicklung mit WordPress, WooCommerce und der Suchmaschinen-Optimierung. Außerdem ist er leidenschaftlicher Segler und Kaffeetrinker.

Nimm an der Diskussion teil Ein Kommentar

Kommentar verfassen