HTML Tabelle formatieren: Vorlage für Rahmen, Spalten ohne Rahmen
HTML Tabelle formatieren - Heute ein kleines Basic aus der Praxis. Viele Kunden wollten mit ihren Mitarbeitern in WordPress eigene Texte erstellen. Damit der Text auch optimiert ist für Suchmaschinen, werden verschiedene kleine Features hinzugefügt. Das können beispielsweise Fotos aus der Mediathek sein aber auch Youtube Video Einbettungen. Tabellen einfach mit Copy & Paste einzufügen bringt viel HTML Schnipsel mit sich, die man im eigenen Content Management System nicht will. Schauen wir uns heute das Beispiel für eine einfache HTML Tabelle an, die jeder selbst generieren und verändern kann.
Problem: HTML Tabellen einfach kopieren ist unsauber
Für Mitarbeiter in Firmen ist wichtig, sie sollten keine Tabellen kopieren, sonst haben wir, wie beschrieben, viel "Trash" in unserem HTML Code. Der HTML Code ist im "visuellen" Bereich des Editors nicht zu sehen. Um ihn zu bearbeiten muss man in WordPress Editor auf "Text" klicken. Wenn Code einfach nur kopiert wird, nimmt er kleine Schnipsel mit, die wir nicht möchten. Hier direkt ein Beispiel aus der Praxis:
Beispiel - Schlechtes HTML einer Tabelle
Hier sind jetzt noch viele Dinge mitkopiert, die man nicht sieht:
<th class="headerSort" tabindex="0" title="Aufsteigend sortieren" role="columnheader button">Nr.</th>
<th class="headerSort" tabindex="0" title="Aufsteigend sortieren" role="columnheader button">Stadtteil</th>
<th class="headerSort" tabindex="0" title="Aufsteigend sortieren" role="columnheader button">Fläche</th>
Wir sehen also, dass durch Copy & Paste einiges mitgenommen wird.
Beispiel - Gutes HTML einer Tabelle
So sähe es sauber aus:
<th>Nr.</th>
<th>Stadtteil</th>
<th>Fläche</th>
Lösung: HTML Tabelle Vorlage
Ein wenig HTML müsst ihr verwenden beziehungsweise kennen lernen. Am besten kurz speichern und dann kopieren bzw. editieren:
- Tipp1 : <table> und <tbody> stehen nur am Anfang </table> </tbody> nur am Ende
- Tipp 2: <th> verwendet man nur in der ersten Zeile und schließt es wieder (th heißt "Table Headline)
- Tipp 3: <tr> eröffnet eine Zeile und </tr> schließt sie (tr heißt "Table Row")
- Tipp 4: <td> eröffnet einen Werte, bzw. ein Kästchen und </td> schließt es (td heißt "Table Data")
Hier eine Tabelle mit 3 Spalten und 3 Zeilen:
<table>
<tbody>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</tbody>
</table>
So sieht die fertige Tabelle aus:
Überschrift 1 | Überschrift 2 | Überschrift 3 |
Text 1 | Text 2 | Text 3 |
Text 1 | Text 2 | Text 3 |
Ein weiteres Beispiel mit 2 Spalten und 2 Zeilen:
<table>
<tbody>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
Ein weiteres Beispiel mit 4 Spalten und 5 Zeilen
<table>
<tbody>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
<th>Überschrift 4</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr></tbody>
</table>
Weitere Spalten und Zeilen hinzufügen
Weitere Zeilen bekommt ihr, in dem ihr innerhalb eurer "Table" <table>...</table> jeweils eine neue "Table Row" startet bzw. wieder schließt. Diese sieht so aus:
<tr>
...
</td>
Je nach Menge der Spalten müssen dan noch die "Table Data" eingefügt werden
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
<td>Text 4</td>
</tr>