WordPress Tabellen-Vorlage

Hinweis: Viele fertige Themes zeichnen die Tabellenlinien wie sie wollen, unabhängig von deinem Code. Z.Bp. “Twenty Ten” oder “Paperpunch”. Dieses Design Toujours hier macht das nicht. Wie du siehst klappt es hier mit dem Code. Diese Seite ist als Kopiervorlage für KompoZer-Verweigerer gedacht.
Beispiel 1 und gleich darunter der blaue Code zum Kopieren in deine Zwischenablage oder nach Word z. Bp. für später. Vor dem Einfügen bei deinem WordPress den Reiter HTML anklicken, sonst wird aus dem Code keine Tabelle sondern Code als Text.
Merke: Je Zeile ein Paar aus <tr> und </tr> mit Zellen dazwischen. Jede Zelle mit Format, bestehend aus <td style=“border:1px solid blue;padding:.5em;“> oder mit deinem style=“….;“ und </td> mit Inhalt dazwischen. Hat die Tabelle 4 Reihen und 6 Spalten, dann gibt es 4 tr-Zeilen mit je 6 td-Zellen, also 24 td-Pärchen.

Nr. Vorname Nachname
1 Anna Meyer
2 Klaus Müller

<table style=“border-collapse:collapse; border: 1px solid blue“><tbody>
<tr>
<td style=“border:1px solid blue;padding:.5em;“>
<strong>Nr.</strong></td>

<td style=“border:1px solid blue;padding:.5em;“>
<strong>Vorname</strong></td>

<td style=“border:1px solid blue;padding:.5em;“>
<strong>Nachname</strong></td>

</tr>
<tr>
<td style=“border:1px solid blue;padding:.5em;“>1</td>
<td style=“border:1px solid blue;padding:.5em;“>Anna</td>
<td style=“border:1px solid blue;padding:.5em;“>Meyer</td>
</tr>
<tr>
<td style=“border:1px solid blue;padding:.5em;“>2</td>
<td style=“border:1px solid blue;padding:.5em;“>Klaus</td>
<td style=“border:1px solid blue;padding:.5em;“>Müller</td>
</tr>
</tbody></table>

Beispiel 2 ohne border-collapse und Innenabstand padding als Vergleich mit Variation.

Nr. Vorname Nachname PLZ Stadt
1 Anna Meyer 12345 Meyerdorf
2 Karl Müller 54321 Müllerdorf

<table>
<tbody>
<tr>
<td style=“border:1px solid #2288ee;“>
<strong>Nr.</strong></td>

<td style=“border:1px solid #2288ee;“>
<strong>Vorname</strong></td>

<td style=“border:1px solid #2288ee;“>
<strong>Nachname</strong></td>

<td style=“border:1px solid #2288ee;“>
<strong>PLZ</strong></td>

<td style=“border:1px solid #2288ee;“>
<strong>Stadt</strong></td>

</tr>
<tr>
<td style=“border:1px solid red;“>1</td>
<td style=“border:1px solid red;“>Anna</td>
<td style=“border:1px solid red;“>Meyer</td>
<td style=“border:1px solid red;“>12345</td>
<td style=“border:1px solid red;“>Meyerdorf</td></tr>
<tr>
<td style=“border:1px solid green;“>2</td>
<td style=“border:1px solid green;“>Karl</td>
<td style=“border:1px solid green;“>Müller</td>
<td style=“border:1px solid green;“>54321</td>
<td style=“border:1px solid green;“>Müllerdorf</td>
</tr>
</tbody></table>

(Diese Seite hat die meisten Besucher. Falls du was weißt, was deine Kollegen interessieren könnte, wär‘ doch fein, du würdest es ihnen mitteilen.)

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