HTML-Tabellen erstellen mit table, tr, td und th

Worum geht´s?

Auch wenn sie weit nicht mehr den Status genießen, den sie mal hatten: Tabellen kommen im Web-Bereich immer noch häufig vor, etwa wenn eine Liste an Angeboten mit den jeweiligen Preisen angezeigt werden soll. In diesem Tutorial werden wir gemeinsam einfache HTML-Tabellen erstellen und die wichtigsten Dinge über sie besprechen.

1. Was sind HTML-Tabellen überhaupt?

HTML-Tabellen bestehen aus einer Reihe von speziellen HTML-Tags, die gemeinsam eine HTML-Tabelle ergeben. Hauptsächlich handelt es sich dabei um die folgenden (alle sind soziale Tags, kommen also als öffnendes wie auch als schließendes HTML-Tag vor):

• <table> sagt dem Browser, dass hier jetzt eine Tabelle vorkommt. Ähnlich wie <ul> dem Browser sagt, dass jetzt eine Liste kommen wird.
• <tr> (table row) steht für eine Tabellen-Zeile, innerhalb der dann die einzelnen Spalten vorkommen.
• <td> (table data) steht für eine Spalte innerhalb einer Tabellen-Zeile.
• <th> (table header) funktioniert gleich wie <td>, nur ist es die Beschreibungs-Zeile oben in der Tabelle. Sozusagen die Tabellenüberschrift.

Das Prinzip dahinter ist übrigens immer gleich.

Aber wie können wir nun HTML-Tabellen in unseren HTML-Code einfügen?

2. Wie wir HTML-Tabellen erstellen

Hier ist mal ein klassisches Beispiel für eine HTML-Tabelle, die z.B. ein Hotel als Preistabelle für seine Zimmer verwenden könnte:

<table>
     <tr>
         <th>Zimmer</th>
         <th>Preis/Nacht in €</th>
     </tr>
     <tr>
         <td>Suite</td>
         <td>120€</td>
     </tr>
     <tr>
         <td>Familien-Zimmer</td>
         <td>90€</td>
     </tr>
 </table>

Das Ergebnis ist zwar schon eine HTML-Tabelle, aber man kann es nur eingeschränkt bemerken:

Was dir vielleicht auffällt, ist dass die Tabellenüberschriften anders gestylt sind (fett und zentriert) als der restliche Tabellen-Text. Das liegt an dem <th>-Tag, das wir für die Tabellenüberschriften verwendet haben.

Aber eine Tabelle ist ja fast keine Tabelle, wenn sie keinen Rahmen hat.

Lass uns den mal hinzufügen!

3. HTML-Tabellen mit Rahmen erstellen

Um unserer Tabelle von vorhin einen Rahmen zu verpassen, müssen wir lediglich in das erste <table>-Tag ein border-Attribut hinzufügen und ihm den Wert 1 geben:

<table border="1">

Das Ergebnis sieht doch gleich schon mal mehr nach einer Tabelle aus:

Vielleicht fällt dir auf, dass unsere einzelnen Tabellen-Zellen zusätzlich zur Gesamt-Tabelle auch einen Rahmen (border) besitzen. Das Ergebnis ist fast so etwas wie ein 3D-Effekt.

Wollen wir aber zwischen den einzelnen Tabellen-Zellen nur einen einzigen Rahmen, kommen wir nicht mehr wirklich ohne CSS aus.

Glücklicherweise können wir CSS-Befehle relativ unkompliziert einfach direkt in jedes HTML-Element reinschreiben.

Alles, was wir dazu brauchen, ist das style-Attribut und den jeweiligen CSS-Befehl bzw. die CSS-Befehle.

Im Folgenden wurde der Rahmen zwischen den einzelnen Zellen auf einen einzigen beschränkt und ganz allgemein die Text-Ausrichtung innerhalb der Tabelle überall zentriert:

<table border="1" style="text-align: center; border-collapse: collapse;">

Hier das Ergebnis:

4. HTML-Tabellen weiter formatieren

Natürlich hören unsere Möglichkeiten, unsere HTML-Tabellen zu formatieren und zu verbessern, hier noch nicht auf.

Aber da dies ein HTML-Tutorial ist, müssen wir dich vorerst noch auf später vertrösten, wenn du CSS genauer lernen wirst.

Dann erwarten dich ohne großen Aufwand solche Tabellen:

Außerdem lernst du mit der Zeit, mit Hilfe von PHP solche Tabellen automatisch aus der Datenbank generieren zu lassen, so dass du sie nicht mehr händisch „befüllen“ musst.

Eine Welt der Wunder erwartet dich!

Diskussion zum Tutorial