HTML-Tabelle erstellen: Mit dieser Anleitung gelingt es

HTML-Tabellen leisten im Webdesign wichtige Aufgaben. Sie helfen Ihnen dabei, Inhalte übersichtlich und nachvollziehbar zu ordnen. Um eine übersichtliche HTML-Tabelle zu gestalten, sollten Sie sich intensiver mit den essenziellen Bestandteilen und dem Aufbau der HTML-Tabellen auseinandersetzen.

In diesem Artikel lernen Sie alles, was Sie zur Erstellung unbedingt wissen sollten. Am Ende des Beitrags sind <td>, <tr>, <th> & Co. für Sie keine rätselhaften Codes mehr. Erfahren Sie hier, wie Sie Zellen, Spalten und Rahmen einer HTML-Tabelle ganz leicht selbst gestalten.

Bestandteile einer HTML-Tabelle

Folgende Bestandteile sind immer Elemente einer HTML-Tabelle:

• Zeilen
• Tabellenzellen

Der Befehl <table> zeigt den Beginn einer Tabelle an. Dann folgt die Bestimmung der Tabellenzeilen. Eine Tabellenzeile, auch tr genannt (tr = table row = Tabellenzeile), kann unterschiedliche Inhalte in einer Zeile darstellen. Der Befehl <tr> leitet demnach eine neue Zeile der Tabelle ein. Wenn Sie die Zeile abschließen wollen, tippen Sie den Tag  </tr> ein.

In diesem Beispiel sehen Sie eine Tabelle mit nur einer Zeile. Doch in der Realität ist die Zahl der Zeilen, die Sie erstellen können, beinahe unbegrenzt. Somit können Sie eine Tabelle, die sich im Laufe der Erstellung als zu kurz oder zu lang erweist, mittels </tr> um eine Zeile ergänzen oder kürzen. Nach dem Einleiten einer Zeile können Sie die Zellen (Spalten) der Reihe festlegen.

So erstellen und konfigurieren Sie Ihre HTML-Tabelle

Es gibt eine Vielzahl von HTML-Tags und -Befehlen, mit denen Sie beispielsweise die Spaltenbreite oder den Rahmen einer Tabelle definieren können. Im Alltag sind einige davon besonders häufig im Einsatz. Die wichtigsten von ihnen lernen Sie im Folgenden kennen.

<table>

Dieser Tag leitet eine Tabelle ein und schließt sie ab. Sämtliche Komponenten einer Tabelle werden folglich von dem Tag umrahmt. Das sieht wie folgt aus:

<table> Tabelleninhalt </table>

<th>

Der <th>-Tag steht für „table header“ = „Tabellenkopf“. <th> kommt immer dann zum Einsatz, wenn Tabellen mit Kopfzellen versehen werden sollen. Im folgenden Beispiel werden den einzelnen Spalten die Überschriften „Vorname, Nachname und Alter zugewiesen.

Beispiel:

<table>
  <tr>
    <th>Vorname</th>
    <th>Nachname</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Erika</td>
    <td>Mustermann</td>
    <td>35</td>
  </tr>
  <tr>
    <td>Max</td>
    <td>Mustermann</td>
    <td>30</td>
  </tr>
</table>

<tr>

Der <tr>-Tag steht für „table row“ = „Tabellenzeile“. Durch den Befehl <tr> ist es möglich, eine neue Tabellenzeile einzuleiten. Auf diese Weise grenzen Sie verschiedene Inhalte innerhalb einer Tabelle klar von anderen ab.

Neben den Tabellenzeilen werden auch die Zellen beziehungsweise Spalten definiert, bevor die entsprechende Zeile mit </tr> abgeschlossen wird. Im folgenden Beispiel werden verschiedenen Jahreszeiten im Header unterschiedliche Gemüsesorten zugeordnet:

Beispiel:

<table>

<tr>

<th>Frühling</th><th>Sommer</th><th>Herbst</th><th>Winter</th>

</tr>

<tr>

<td>Blumenkohl</td><td>Erbsen</td><td>Kürbis</td><td>Rote Bete</td>

</tr>

<tr>

<td>Brokkoli</td><td>Kohlrabi</td><td>Mangold</td><td>Spinat</td>

</tr>

</table>

In der Umsetzung sieht die Tabelle dann in etwa so aus:

<td>

Der <td>-Tag steht für „table data“ = „Tabellendaten“. Mit <td> definieren Sie einzelne Zelleninhalte und lassen diese anzeigen. Grundsätzlich ist es möglich, innerhalb einer Tabellenzelle unterschiedlich viele Elemente einzusetzen und beispielsweise einen Text durch weitere Zelleninhalte, wie etwa Stilelemente, zu ergänzen. Im folgenden Beispiel werden verschiedenen Städten im Header ihre Stadtviertel zugeordnet.

Beispiel:

<table>

<tr>

<th>Berlin</th>

<th>Köln</th>

<th>Hamburg</th>

</tr>

<tr>

<td>Kreuzberg</td>

<td>Ehrenfeld</td>

<td>Altona</td>

</tr>

<tr>

<td>Moabit</td>

<td>Nippes</td>

<td>Eimsbüttel</td>

</tr>

</table>

<thead>, <tbody> und <tfoot>

<thead>, <tbody> und <tfoot> unterteilen die Tabelle drei verschiedene Bereiche.

<thead> legt den Tabellenkopf fest, <tbody> ist dafür gedacht, den Körper der Tabelle zu definieren. Der Tag <tfoot> bestimmt die Fußnote der Tabelle und kann maximal einmal innerhalb einer Tabelle verwendet werden. Er kann nur in Zusammenhang mit dem <thead> und <tbody> verwendet werden.

Quelle: Screenshot mediaevent.de

HTML-Tabelle formatieren

Grundsätzlich ist es möglich, bestehende Tabellen einfach zu kopieren und in WordPress einzufügen. Die Ergebnisse sind allerdings meist unsauber und wirken wenig professionell.

Um Ihren Besuchern und Besucherinnen mit Ihrem Webauftritt ein möglichst angenehmes Erlebnis zu ermöglichen, sollten Sie daher alle Komponenten Ihrer HTML-Tabelle gründlich formatieren und diese auf Ihre persönlichen Ansprüche anpassen.

Tabelleninhalte können Sie grundsätzlich beliebig einsetzen. Textinhalte sind innerhalb einer HTML-Tabelle ebenso möglich, wie Stil-Elemente. Diese werden auch als Aussage-Elemente oder phrasing Content bezeichnet werden.

Für die Erstellung von Datenzellen werden die Tags <td> … </td> verwendet. </td>-Tags definieren den Bereich, in dem die Inhalte angezeigt werden.

Für die Erstellung von Tabellenzeilen werden die Tags <tr> … </tr> verwendet. Sie sorgen dafür, dass Inhalte nicht einfach hintereinander aufgeschrieben, sondern untereinander dargestellt werden.

Wenn an einer bestimmten Stelle zwingend ein Zeilenumbruch auftauchen soll, können Sie dazu die Tags <br> … </br> einsetzen. So können Sie individuell Einfluss auf die Gestaltung einer Tabelle nehmen und deren Übersichtlichkeit gewährleisten.

Bei sehr langen Zeichenketten kann zudem auf die Tags <wbr> … </wbr> zurückgegriffen werden. Hier erfolgt ein Zeilenumbruch ohne Silben.

Es gibt auch einige Attribute, die Ihnen bei der Erstellung einer HTML-Tabelle die Arbeit erleichtern. Gelegentlich passt zum Beispiel die vordefinierte Zeilenhöhe nicht zu den persönlichen Anforderungen. In diesem Fall können Sie durch das Attribut „height=“ die Zeilenhöhe individuell definieren. Die Zeilenbreite können Sie zudem durch „width=“ bestimmen.

Manchmal sind Inhalte so breit, dass sie nicht in die vordefinierte Spaltenbreite hineinpassen. Hier kann das Attribut „width=“ dann in einer Kopfzelle (th) oder einer Datenzelle (td) eingesetzt werden.

Sie möchten die einzelnen Tabelleninhalte nicht nur auflisten, sondern auch mit einem Rahmen versehen? In diesem Fall können Sie auf das Attribut „border=“ zurückgreifen. Mit „border=” erzeugen Sie einen sichtbaren Rahmen innerhalb der Tabelle sowie auch rund um die Tabelle.

Beispiel-Code für eine HTML-Tabelle

Bedeutung der responsiven Gestaltung in HTML

Wenn Sie eine HTML-Tabelle erstellen, bietet sich hierfür das sogenannte responsive Webdesign an. Wenn eine HTML-Tabelle responsive (auf Deutsch: ansprechbar) ist, bedeutet das in der Praxis, dass sie unabhängig vom verwendeten Endgerät angezeigt werden kann. Die Tabelle ist auf einem Desktop dann ebenso gut erkennbar wie auf mobilen Endgeräten.

Sobald Sie eine HTML-Tabelle formatieren, sollten Sie die responsive Gestaltung in HTML berücksichtigen. Hierdurch stellen Sie sicher, dass Ihre Zielgruppe die Tabelle immer einwandfrei sehen und nutzen kann – egal auf welchem Wege. Hierdurch erhöhen Sie nicht nur die Zufriedenheit Ihrer User und Userinnen, sondern höchstwahrscheinlich auch deren Verweildauer auf Ihrer Webseite.

Fazit: Mit gut durchdachten HTML-Tabellen den Webauftritt perfektionieren

Mit nur wenigen Tags und Befehlen ist es möglich, eine individuelle, aussagekräftige und ansprechende Tabelle zu erstellen. Mit Zellen, Zeilen, Spalten und Rahmen stehen Ihnen unterschiedliche Gestaltungselemente zur Wahl.

Versuchen Sie sich bei der Erstellung einer HTML-Tabelle immer in Ihre Zielgruppe hineinzuversetzen und bieten Sie dieser einen größtmöglichen Mehrwert. Ein HTML-Editor unterstützt Sie bei der Erstellung, Anpassung und Optimierung von HTML-Codes.

Titelbild: Cavan Images / iStock / Getty Images Plus