In diesem Post erfährst du, wie du einfache HTML Tabellen in deinen Ghost Blog, aber auch sonst überall einbinden kannst.

Auch in unserem Blog finden sich immer wieder Tabellen, die mit HTML erstellt wurden. Dadurch lassen sich Daten anschaulich untereinander darstellen, gleichzeitig passt sich beim Ghost Blog die Darstellung auch an Mobilgeräte an.

Tabelle mit drei Spalten

So sieht eine einfache Tabelle aus, mit drei Spalten und vier Zeilen, während die oberste Zeile die Überschrift der Spalten ist:

Art Erholungs-Effizienz Basis-Komfort
Schlafsack 93% 0,6
Bett 100% 0,75
Königliches Bett 105% 0,9

Der entsprechende Code dazu sieht so aus:

<table>
  <tr>
    <th>Art</th>
    <th>Erholungs-Effizienz</th>
    <th>Basis-Komfort</th>
  </tr>
  
  <tr>
    <td>Schlafsack</td>
    <td>93%</td>
    <td>0,6</td>
  </tr>
   
  <tr>
    <td>Bett</td>
    <td>100%</td>
    <td>0,75</td>
  </tr>
   
  <tr>
    <td>Königliches Bett</td>
    <td>105%</td>
    <td>0,9</td>
  </tr>
</table>

Wie man an diesem Beispiel erkennt, wird die Tabelle zeilenweise aufgebaut. Um eine Spalte komplett zu löschen, müsste dann aus jeder Zeile der Eintrag zur entsprechenden Spalte gelöscht werden.

HTML Tabelle farbig gestalten
Um eine HTML Tabelle optisch ansprechend zu gestalten, bietet es sich an, Farben mit ins Spiel zu bringen. In diesem Post wird dir gezeigt, wie du die Text- und Hintergrundfarbe nach Belieben ändern kannst.
number13.dejulian

Tabelle mit zwei Spalten

So sieht dann eine Tabelle mit zwei Spalten aus:

Art Erholungs-Effizienz
Schlafsack 93%
Bett 100%
Königliches Bett 105%

Und der entsprechende HTML Code:

<table>
  <tr>
    <th>Art</th>
    <th>Erholungs-Effizienz</th>
  </tr>
  
  <tr>
    <td>Schlafsack</td>
    <td>93%</td>
  </tr>
   
  <tr>
    <td>Bett</td>
    <td>100%</td>
  </tr>
   
  <tr>
    <td>Königliches Bett</td>
    <td>105%</td>
  </tr>
</table>
Klickbare Links in HTML Tabelle hinzufügen
In unserem Games-Tab haben wir eine Tabelle, mit der die einzelnen Spiele gestaffelt dargestellt werden. Klickt man auf den Titel des Spiels, wird man auf den “Tag” des Spiels weitergeleitet. Wie du auch klickbare Links in einer HTML Tabelle hinzufügst, erfährst du hier.
number13.dejulian

Tabelle ohne Überschrift

Zwischen der Klammer <th></th> wird der Inhalt der Zelle Fett. Um eine Tabelle ohne Überschrift zu erstellen, wird nur die normale Klammer <td></td> verwendet, die den Inhalt ohne Formatierung darstellt.

So sieht eine 2x2 Tabelle ohne Überschrift aus:

Art Erholungs-Effizienz
Schlafsack 93%

Und der entsprechende HTML Code:

<table>
  <tr>
    <td>Art</td>
    <td>Erholungs-Effizienz</td>
  </tr>
  
  <tr>
    <td>Schlafsack</td>
    <td>93%</td>
  </tr>
</table>
Bilder in HTML Tabelle einfügen
Im Ghost Blog ist es sehr einfach, Bilder in eine HTML Tabelle einzufügen. Grundsätzlich muss das Bild bereits im Internet mit einem Link vorhanden sein. Dann muss dieser Link nur noch in eine Image Klammer kopiert werden. Wie das ganze aussieht, erfährst du in diesem Post.
number13.dejulian
HTML