[HTML für WordPress] 1. Ordnung durch Tabellen

Diese Rubrik soll euch beim Gestalten eurer Blogartikel helfen. Sie verrät euch Geheimnisse, die hinter dem mystischen HTML-Editor stecken. Solltet ihr noch gar nichts von HTML gehört haben, bitte ich euch zuerst meinen HTML-Basics Artikel zu lesen.

Unbenannt.PNG


In diesem Beitrag geht es um Tabellen. Mit Tabellen lassen sich Informationen, Bilder oder Beschreibungen wunderbar strukturieren. Dabei ist der Aufwand, um Tabellen zu entwerfen, gar nicht mal so groß. Vorerst werde ich mich auf einfache Tabellen konzentrieren. Mit etwas mehr Aufwand kann man kompliziertere Tabellen, mit Kopf- und Fußzeilen erstellen. Die werde ich erst in einem späteren Artikel vorstellen.

Wo ich Tabellen verwendet habe.

Wie schon in meinem letztem Beitrag erwähnt, war ich beim Schreiben meiner ersten Rezension davon genervt, dass sich Information, wie Titel, Seitenzahl, Preis usw., nicht schön formatiert anzeigen ließen. Es sah erst so aus.

Titel: Noch so eine Tatsache über die Welt
Autor: Brooke Davis
Originaltitel: Lost and Found
erschienen bei: ullstein
Seiten: 288
Preis: 10,00 €
ISBN: 978-3-548287-003

Mit Tabelle sieht es so aus. Die Informationen stehen nun schön untereinander. Wenn ihr diese Tabelle verwenden wollt ohne viel zu ändern, stelle ich euch den HTML-Code am Ende des Artikels zur Verfügung.

Titel Noch so eine Tatsache über die Welt
Autor Brooke Davis
Originaltitel Lost and Found
erschienen bei
ullstein
Seiten 288
Preis 10,00 €
ISBN 978-3-548287-003

Eine zweite praktische Verwendung für Tabellen fand ich in der Ausrichtung von Bildern. Immer wenn ich möchte, dass zwei Bilder direkt nebeneinander liegen, habe ich die Wahl. Entweder richte ich die Bilder manuell aus oder ich verwende eine Tabelle mit einer Zeile und zwei Spalten.

 Visuell.PNG  HTML

Wie man eine Tabelle anlegt.

Für die Basis-Tabelle benötigt man 4 verschiedene Tags. Das sind <table>, <tbody>, <tr> und <td>. Zum Anlegen von Tabellen muss man auch etwas neues lernen, nämlich das man einen HTML-Tag in einen anderen einfügen kann. So funktioniert der <tbody>-tag nur im <table>-tag. Ein Tag, der im Bereich eines anderen Tags begonnen wurde, muss auch in diesem abgeschlossen werden. Das heißt, dass der </tbody> vor </table> auftreten muss. Die einzelnen Tags haben folgende Funktionen:

table  Dieser Tag bezeichnet die Tabelle als abgeschlossene Einheit. Sie nimmt den Tabellenkörper auf, kann aber zusätzlich einen Tabellenkopf und -fusszeile aufnehmen. Diese werde ich hier aber vorerst nicht behandelt.
tbody  Der Tabellenkörper nimmt mehrere Tabellenzeilen tr auf.
tr tr steht für Table Row, also Tabellenzeile. In den Tabellenzeilen befinden sich wiederum die Tabellendaten td. Innerhalb des Tabellenkörpers muss für jede benötigte Zeile eine Table Row angelegt werden.
 td td steht für Table Data, also Tabellenzelle. In dieser steht dann der eigentliche Inhalt. Der Inhalt kann ein Bild, Text oder wieder ein anderer Tag sein. Für jede Tabellenzelle wird ein td benötigt. Innerhalb jeder Tabellenzeile tr befinden sich dabei so viele td-Tags wie es Tabellenspalten geben soll.

Eine einfache Tabelle mit zwei Spalten und zwei Zeilen sieht so aus:

<table><tbody>
<tr><td>Zeile 1 Spalte 1</td><td>Zeile 1 Spalte 2</td></tr>
<tr><td>Zeile 2 Spalte 1</td><td>Zeile 2 Spalte 2</td></tr>
</tbody></table>

Die Breite einer Tabelle

Die Breiten der einzelnen Spalten richten sich automatisch aus. Normalerweise wird jeder Spalte gleich viel Platz zugewiesen. Wenn es nur zwei Spalten gibt, nimmt jede die Hälfte der Tabellenbreite ein. Ist der Text in einer Spalte allerdings kürzer als benötigt, in einer anderen aber länger, dann vergrößert sich die Spalte mit dem längeren Text automatisch.
Diese Standardeinstellung kann man durch das Attribut Width anpassen. Width funktioniert im HTML-Editor von WordPress nur in td. Normalerweise kann man damit auch die gesamte Tabellenbreite verändern. Man kann die Breite als Pixel angeben oder in Prozent. Das sieht dann so <td width=“200″> oder so <td width=“50%“> aus. Bei den folgenden drei Tabellen wurde in der ersten das Attribut width weggelassen, bei der zweiten mit 50% und der dritten mit 200 Pixel angegeben.

Spalte 1 Spalte 2 Spalte 2 Spalte 2 Spalte 2 Spalte 2 Spalte 2
Spalte 1 Spalte 2 Spalte 2 Spalte 2 Spalte 2 Spalte 2 Spalte 2
Spalte 1 Spalte 2 Spalte 2 Spalte 2 Spalte 2 Spalte 2 Spalte 2

Das ist kompliziert?

Wollt ihr euch gar nicht so intensiv mit Tabellen beschäftigen, aber trotzdem die Liste mit Information für eure Rezensionen verwenden? Dann kopiert einfach den folgenden Text. Gib aber bitte einen Hinweis darauf an, dass die Tabelle von mir stammt.
Natürlich könnt ihr mich auch gerne in den Kommentaren um Rat fragen. Viel Spaß damit.


Verwendungsweise: Tabelle kopieren. HTML-Editor in deinem Beitrag öffnen. Tabelle einfügen. Visuellen Editor öffnen. Word Press zeigt den Tabellencode jetzt als Tabelle an. Jetzt kannst du Titel, Autor, usw eintragen. In der Vorschau überprüfen. Veröffentlichen. Fertig. 🙂

<table><tbody>
<tr><td><strong>Titel</strong></td>
<td></td></tr>
<tr><td><strong>Autor</strong></td>
<td></td></tr>
<tr><td><strong>Originaltitel</strong></td>
<td></td></tr>
<tr><td><strong>erschienen bei></strong></td>
<td></td></tr>
<tr><td><strong>Seiten</strong></td>
<td></td></tr>
<tr><td><strong>Preis</strong></td>
<td></td></tr>
<tr><td><strong>ISBN</strong></td>
<td></td></tr>
</tbody></table>

earlier: Basics                                                                                        next: interne Verweise

Advertisements

4 Kommentare zu „[HTML für WordPress] 1. Ordnung durch Tabellen

  1. Eine tolle Beitragsreihe!
    Auch wenn ich schon ein paar HTML-Basics kenne, bin ich immer wieder froh um Tipps 🙂 An zweispaltige Tabellen habe ich mich bis jetzt noch nicht heran getraut, einspaltige habe ich aber schon benutzt, um ein Foto mit dem dazugehörigen Text quasi an Ort und stelle zu halten. Oder für mein „zuletzt besprochen“ Widget 🙂
    Man lernt doch nie aus!

    Gefällt 1 Person

  2. Huhu!
    Ich hätte da mal eine Tabellenfrage 🙂 Ich möchte meine Rezensionsseite gerne mit Tabellen umgestalten, allerdings stelle ich fest, dass in der Handyansicht die Tabelle nicht automatisch umgebrochen wird, wenn der Rand erreicht ist, sondern einfach darüber hinaus läuft … Gibt’s da ne Möglichkeit, die ich in WP umsetzen kann, damit es die Spalten selbstständig umbricht?

    Gefällt mir

    1. Hi Gabriela,
      ich bin nicht sicher ob ich dich ganz verstehe. Versuche aber erstmal im table Tag das Attribut width zu verwenden und auf 100% zu setzten. Also . Wenn das noch nicht hilft, kannst du mir mal per Mail deinen HTML-Code schicken?

      Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s