homepage-buttons.de
Homepagevorlagen, Buttons und mehr
 
 
 

Startseite > HTML-Kurs > Grundstruktur einer Tabelle

5. HTML-Kurs - Tabellen erstellen (1)

Zu Zeiten, als HTML quasi noch das Laufen lernte und CSS noch nicht bzw. sehr eingeschränkt zur Verfügung stand (CSS wurde in der CSS Level 1 Version erst im Dezember 1996 publiziert), wurden zur Gestaltung von Websites normalerweise Tabellen verwendet, die unsichtbar, also ohne Rahmen erstellt wurden und die einzelnen Zellen dann mit dem entsprechenden Inhalt gefüllt. Auch auf Homepage-Buttons gibt es noch viele dieser Tabellentemplates, die nach wie vor von Einsteigern nachgefragt werden, aber neuere Templates werden mithilfe der inzwischen allgemein verwendeten CSS-Standards erstellt.

Aber auch heute ist der Einsatz von Tabellen in bestimmten Situationen durchaus noch sinnvoll und zwar dann, wenn man eben eine klassische Tabelle erstellen will, wie z.B. für Spielpläne, Teilnehmerlisten usw. Man hat bei Tabellen eine Vielzahl von Möglichkeiten, eine Srukturierung oder Hervorhebung von einzelnen Zellen zu definieren, was die Übersicht sehr erleichtern kann.

5.1 Grundstruktur einer Tabelle

Jede Tabelle besteht aus dem Tabellengrundgerüst, worin es mindestens eine Tabellenzeile gibt und innerhalb dieser Tabellenzeile gibt es mindestens eine Tabellenzelle, normalerweise mehr. Eine Tabelle, also das Grundgerüst, wird mit dem Tag <table> ... </table> (table (engl.) = Tabelle) eingefasst. Eine Tabellenzeile wird mit dem Tag <tr> </tr> (tr = table row (engl.)) ausgezeichnet und eine Tabellenzelle (oder oftmals auch Tabellenspalte genannt mit <td> </td> (td = table data (engl.) = Tabelleninhalt). Dies ist die Grundanforderung.

Der Code für eine Tabelle mit 2 Zellen sieht dann wie folgt aus:

<html>
<head>
<title>Grundstruktur einer Tabelle</title>
</head>

<body>

<table>
  <tr>
    <td>Tabellenzelle 1</td>
    <td>Tabellenzelle 2</td>
  </tr>
</table>

</body>
</html>

Und in der Ausgabe sieht es dann so aus: klick!

Optional kann man der Tabelle noch Überschriften geben, die dann alleine durch den Code schon hervorgehoben werden. Das Attribut heißt th (table header (engl.) = Tabellenkopf) und wird genau wie td mit einem Anfangs- und Endtag innerhalb einer eigenen Tabellenzeile angegeben. Der Code sieht dann so aus:

<html>
<head>
<title>Grundstruktur einer Tabelle (mit Überschrift)</title>
</head>

<body>

<table>
  <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td>Tabellenzelle 1</td>
    <td>Tabellenzelle 2</td>
  </tr>
</table>

</body>
</html>

Und in der Ausgabe sieht es dann so aus: klick!

Zusammenfassung: die zwingend benötigten Grundelemente einer Tabelle sind die Tags: table, tr und td. Optional kann der Tabelle noch eine Überschrift mit dem Element th gegeben werden. Jede Tabelle kann beliebig viele Reihen haben und auch beliebig viele Zellen/Spalten, wobei die Anzahl der Spalten in jeder Reihe gleich sein sollte. Leere Zellen sind dabei kein Problem, doch dazu später mehr. Auf der nächsten Seite beschäftigen wir uns erst einmal mit dem Rahmen einer Tabelle. »