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. In diesem Post erfährst du, wie du einfache HTML Tabellen in deinen Ghost Blog, aber auch sonst überall einbinden kannst.

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.

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>

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>