[HTML Tutorial] #5 - Tabellen

**Comu** · 26.07.2012, 17:39

BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

#5 - Tabellen

Wir haben ja nun bereits schon in den letzten Teilen des Tutorials eine Menge Tags dazu gelernt. Der mit Abstand (neben den Formularen sowie div Boxen) schwierigste Tag ist der, der eine Tabelle enthält.

Denn wir haben anfangs ein Problem: Wir können das ganze nicht wie in Excel optisch betrachten sondern müssen und das ganze von Anfang an logisch aufbauen. Den einen Leuten fällt es einfacher, den anderen schwerer.

Aber bevor wir zu Reihen in einer Tabelle kommen oder einzelnen Zellen, legen wir erst einmal unser HTML-Dokument sowie den Tabellen Tag an. Auch hier kann man wieder aus dem Englischen übersetzen. "Timetable" => "Stundenplan/Stundentabelle".

In unserem Fall lautet der Tag für eine Tabelle also tatsächlich einfach <table>.

HTML-Code:

<html>
<head>
 <title> Eine einfache Tabelle </title>
</head>
<body>
  <h1> Unsere erste Tabelle </h1>
  <table>
  </table>
</body>
</html>

Nun weiß HTML schon einmal, dass wir eine Tabelle erzeugen wollen. In unserem Fall ist die Tabelle aber leer, da wir keinen Inhalt eingefügt haben.

Nun wollen wir anfangen in dem wir unsere erste Tabellenreihe anlegen. Eine Tabellenreihe besteht wie in Excel aus mehreren Zellen. Wie die Tabellenreihe in Excel aussieht:

BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

Wie sie in HTML aussieht:

HTML-Code:

<table>
<tr>
</tr>
</table>

Genau! Du hast es schon richtig erkannt. Eine Tabellenreihe wird auch wieder mithilfe von Tags innerhalb der Tabelle an sich definiert. In unserem Fall, mithilfe des <tr> Tags (Table Row = Tabellenreihe) haben wir nun unsere erste Reihe in der Tabelle erstellt.

Wollen wir nun weitere Reihen dranhängen, ist das ganz einfach. Wir setzen einfach nach und nach immer wieder <tr>'s aneinander, damit wir einzelne Reihen erhalten.

Aufgabe: Erstelle eine einfache Tabelle mit 3 Reihen. Es geht in dieser Aufgabe vor allem um die Logik, wie solche Tabellen aufgebaut sind.

Spoiler:Lösung

Ich habe das in dem Lösungscode bewusst außeinander gesetzt. Normalerweise fügt man die Tags einfach nach und nach zusammen. So ist es jedoch um einiges verständlicher, wie diese Reihen nun zustande kommen.

Nun wollen wir unsere "Felder" in die Tabelle einfügen. Diese Felder kennt man ebenfalls aus Excel, sie sehen so aus:

BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

In HTML sieht das ganze so aus:

HTML-Code:

<table>
<tr>
 <td> TEXT </td>
</tr>
</table>

Was haben wir nun da oben in dem Code gemacht? Wir haben erst einmal unsere Tabelle an sich angelegt, danach eine neue Reihe erstellt und in dieser Reihe ein Feld angelegt. Dieses Feld definiert man mit <td> (Table Data = Datensatz). Im Grunde findet sich diese Verschachtelung nun immer wieder. Ebenfalls ist es hier Möglich, mehrere "Zellen" innerhalb einer Tabellenreihe zu haben. Dazu hängen wir die ganzen <td>'s auch wieder nur aneinander:

HTML-Code:

<tr>
 <td> TEXT </td>
 <td> TEXT2 </td>
 <td> TEXT3 </td>
</tr>

Dieses Beispiel oben, würde folgende Ausgabe erzeugen:

BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]
(Anmerkung: Ich habe hier das Attribut border="1" verwendet. (<table border="1"). Dieses ist veraltet und wird heutzutage durch CSS ersetzt. Es dient nur dazu um den Rand zu sehen, da er sonst nicht sichtbar wäre.)

Um nun oben unsere Lösung zu erweitern, in der wir mehrere Tabellenreihen angelegt haben, wir nun wissen dass das ganze Logisch immer aufeinanderfolgt und ineinander verschachtelt ist, können wir uns nun ganz einfach 3 Tabellenreihen mit je 3 Zeilen zaubern:

HTML-Code:

<table>
<tr>
 <td> TEXT </td>
 <td> TEXT2 </td>
 <td> TEXT3 </td>
</tr>
<tr>
 <td> TEXT4 </td>
 <td> TEXT5 </td>
 <td> TEXT6 </td>
</tr>
<tr>
 <td> TEXT7 </td>
 <td> TEXT8 </td>
 <td> TEXT9 </td>
</tr>
</table>

Das ganze sieht dann am Ende so aus:

BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

Es gibt nun noch diverse Methoden und andere Tags die man dazu lernen kann. Diese kommen aber alle mit der Zeit wenn man sich mit so etwas mehr beschäftigt. Ebenfalls hat man die Möglichkeit eine Tabellenzelle an sich über mehrere andere laufen zu lassen (also das man quasi anstatt 3 <td> 1 <td> hat, dieses aber so breit ist wie die 3 anderen ).

Dieses kommt aber entweder in meinem CSS Tutorial, oder man kann sich erweitert mit Tabellen beschäftigen, dort wir das ganze (beispielsweise beim W3C) gut erklärt.

U-Labs

Account-Boerse

U-IMG

Thema: [HTML Tutorial] #5 - Tabellen

[HTML Tutorial] #5 - Tabellen

The Following 2 Users Say Thank You to Comu For This Useful Post:

Ähnliche Themen

[HTML Tutorial] #6 - Formulare

[HTML Tutorial] Übersicht

[HTML Tutorial] #3 - Textformatierungen

[HTML Tutorial] #2 - Die erste Webseite!

HTML Video Tutorial