Tabellen in einem WordPress Artikel anzeigen – Teil 1

Hattest du schon einmal das Problem, dass du in deinem Artikel gerne eine Tabelle anzeigen wolltest. Du wusstest aber nicht wie.


Wenn du keine Angst vor dem HTML Editor hast, kannst du in  HTML Tabellen anlegen, um tabellarische Daten anzuzeigen, oder um Text und Grafik schöner im Artikel zu verteilen.
Webdesinger, die HTML so weit wie möglich von gestalterischen Aufgaben befreit sehen wollen, rümpfen darüber zwar die Nase – aber so klar sind die Grenzen zwischen Struktur und Gestaltung nicht immer, finde ich.

Wechsel in den HTML-Editor, indem du bei der Eingabe deines Artikels oben rechts auf den Reiter HTML klickst.

Eine Tabelle mit Gitternetz fügst du ganz einfach ein. Gib folgenden Text. Wenn du dir die fertige Tabelle ansiehst, weißt du sofort, wie die eine die Tabelle an deine Wünsche anpassen kannst.

<table border="1">
  <tr>
    <th>Überschrift 1</th>
    <th> Überschrift 2</th>
    <th> Überschrift 3</th>
  </tr>
  <tr>
    <td>Zeile 1, Spalte 1</td>
    <td> Zeile 1, Spalte 2</td>
    <td> Zeile 1, Spalte 3</td>
  </tr>
  <tr>
    <td> Zeile 2, Spalte 1</td>
    <td> Zeile 2, Spalte 2</td>
    <td> Zeile 2, Spalte 3</td>
  </tr>
</table>

Bei einer Tabelle ohne Gitternetz änders du einfach nur den Wert border.

<table border="0">
  <tr>
    <th>Überschrift 1</th>
    <th> Überschrift 2</th>
    <th> Überschrift 3</th>
  </tr>
  <tr>
    <td>Zeile 1, Spalte 1</td>
    <td> Zeile 1, Spalte 2</td>
    <td> Zeile 1, Spalte 3</td>
  </tr>
  <tr>
    <td> Zeile 2, Spalte 1</td>
    <td> Zeile 2, Spalte 2</td>
    <td> Zeile 2, Spalte 3</td>
  </tr>
</table>

So sieht das dann aus:

Mit Gitter:

Überschrift 1 Überschrift 2 Überschrift 3
Zeile 1, Spalte 1 Zeile 1, Spalte 2 Zeile 1, Spalte 3
Zeile 2, Spalte 1 Zeile 2, Spalte 2 Zeile 2, Spalte 3

Ohne Gitter:

Überschrift 1 Überschrift 2 Überschrift 3
Zeile 1, Spalte 1 Zeile 1, Spalte 2 Zeile 1, Spalte 3
Zeile 2, Spalte 1 Zeile 2, Spalte 2 Zeile 2, Spalte 3

 

Erklärung:
Die Wirkung der HTML-Elemente, die eine Tabelle erzeugen hast du sicher schon selber erkannt:
<table> leitet eine Tabelle ein. Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, musst du im einleitenden </table><table>-Tag das Attribut border notieren und ihm einen Wert größer 0 zuweisen. Der angegebene Wert ist dann die Breite des Rahmens in Pixeln. Um eine blinde Tabelle ohne sichtbaren Rahmen und Gitternetzlinien zu erzeugen setzt du border=“0″. Am Ende der Tabelle musst du diese mit </table> schliessen.
<tr> leitet eine neue Tabellenzeile ein. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert.
Eine Tabelle enthält Datenzellen. <td> eine normale Datenzelle. Den Inhalt einer Zelle notierst du jeweils hinter dem Tag. Am Ende der Zelle wird ein abschließendes Tag </td> eingefügt. 

In eine Tabellenzellekannst du beliebige Elemente einfügen, d.h. außer normalem Text z.B. auch andere Bilder. Sogar eine weitere Tabelle kannst du innerhalb einer Zelle definieren.

Beachte aber:
Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, sodass die Tabelle durchweg die gleiche Anzahl Spalten pro Zeile hat.
Tabellenzellen dürfen auch leer sein.

Schreibe mir doch hier, falls du Tabellen in deinen Artikeln nutzen willst.

Liebe Grüße

Astrid

4 Gedanken zu „Tabellen in einem WordPress Artikel anzeigen – Teil 1

  1. Hallo Astrid,

    vielen Dank für diese ausführliche Erklärung. Sobald ich wieder ein bißchen mehr „Luft“ habe, werd´ ich mal meine Tabelle nach Deiner Anleitung in Angriff nehmen.

    Liebe Grüße
    scrapissima

    • Bitteschön. Und ich danke dir, dass du mich auf die Idee mit dem Glossar gebracht hast :-)
      Liebe Grüße
      Astrid

  2. Das habe ich gerade erst gelesen. Das ist doch auch eine gute Idee, wenn man mehrer Spalten in einem Artikel darstellen will, oder?
    LG Peter

    • Ja, dass könnte man.
      Wenn man aber nur mehrere Spalten (und nicht Zeilen) erzielen möchte eignet sich aber das <div >-Tag besser:

      <div style="width:100%;">
      
      <div style="float:left; width:30%;"> 1. Spalte
      </div>
      <div style="float:left; width:30%;"> 2. Spalte
      </div>
      <div style="float:left; width:30%;"> 3. Spalte
      </div>
      </div>

      Das ist hier sehr schön beschrieben:
      http://de.selfhtml.org/css/layouts/mehrspaltige.htm

      Oder kennt jemand etwas Besseres?
      Liebe Grüße
      Astrid

Die Kommentarfunktion ist geschlossen.