Tabellen in HTML


Tabellen sind dazu geeignet, eine große Anzahl von Daten übersichtlich zu präsentieren. Durch Gitternetzlinien erfolgt eine Einteilung in Spalten, Zeilen und Zellen.

Tabellen sind jedoch auch sehr gut dafür geeignet um Texte, Grafiken und andere Elemente auf einer Seite anzuordnen. Dazu verwendet man so genannte blinde Tabellen, die keine sichtbaren Gitternetzlinien besitzen.

Der Grundaufbau einer Tabelle

Für die Darstellung einer Tabelle mit Hilfe von HTML benötigt man im Grunde genommen nur die folgenden vier Tags:

Aufgabe:
Erstellen Sie die folgende 2 * 3 Felder große Tabelle.
Testen Sie anschließend die Wirkung des Zusatzes border="1" zum Table-Tag.

<table>
<tr>
<th>Land</th>
<th>Hauptstadt</th>
</tr>
<tr>
<td>Deutschland</td>
<td>Berlin</td>
</tr>
<tr>
<td>Frankreich</td>
<td>Paris</td>
</tr>
</table>

Fazit:

Aufgabe
Experimentieren Sie mit den folgenden Eigenschaften des Table-Tags. Setzen Sie jeweils verschiedene Zahlen ein. Was stellen Sie fest?

[Seitenanfang]

Festlegen der Tabellengröße

Mit Hilfe der Eigenschaften width und height lassen sich für die Tabelle insgesamt wie auch für einzelne Zeilen bzw. Spalten der Tabelle bestimmte Höhen bzw. Breiten erzwingen. Die Angabe der gewünschten Breite bzw. Höhe kann dabei entweder durch die Vergabe von Zahlen (Pixeln) oder von Prozenten erfolgen.

Beispiele:

Aufgaben:

  1. Erstellen Sie eine Tabelle mit 3 Spalten und 2 Zeilen. Die erste Spalte der Tabelle soll 10 Pixel, die zweite Spalte 150 Pixel und die dritte Spalte 120 Pixel breit sein.
  2. Erstellen Sie eine Tabelle mit 3 Spalten und 2 Zeilen. Die Breite der Tabelle soll 80% der aktuellen Fensterbreite betragen. Die erste Spalte soll doppelt so breit wie die beiden anderen sein. Die Zeilenhöhe soll jeweils 100 Pixel betragen.
  3. Schreiben Sie Ihren aktuellen Stundenplan als HTML-Tabelle. Die Spalten der einzelnen Wochentage sollen dabei alle die gleiche Breite besitzen.

[Seitenanfang]

Tabellenzellen verbinden

Für die vielfältigsten Gelegenheiten benötigt man Tabellenzeilen bzw. Tabellenspalten, die über mehrere Zeilen bzw. Spalten reichen. Dazu verwendet man die Eigenschaften rowspan bzw. colspan. Die Anweisung colspan="3" bewirkt z.B. eine Ausdehnung der Tabellenspalte über 3 Spalten. Beide Eigenschaften können auch gleichzeitig verwendet werden.

Aufgabe:
Verändern Sie den von Ihnen erstellten Stundenplan dahingehend, dass er in der ersten Zeile eine Zelle mit dem Inhalt Stundenplan der Klasse 10x als Überschrift der Tabelle (th-Tag verwenden!) enthält. Diese Zelle soll sich über die gesamte Breite der Tabelle erstrecken.

[Seitenanfang]

Farben für Tabellen

Zur Färbung des Hintergrundes von Tabellen verwendet man den schon bekannten Tag bgcolor="gewünschte_Farbe". Je nachdem wo dieser Tag platziert wird, wird entweder die gesamte Tabelle (Platzierung im einleitenden table-Tag) oder eine bestimmte Zelle (Platzierung im td-Tag oder th-Tag) oder eine ganze Zeile (Platzierung im tr-Tag) farblich hervorgehoben.

Die Färbung des Tabellenrahmens erfolgt mit Hilfe des Tags bordercolor="gewünschte_Farbe". Dies geht natürlich nur dann, wenn im table-Tag die Eigenschaft border angegeben wurde.

Aufgabe:
Öffnen Sie Ihre Stundenplantabelle und versehen Sie den Hintergrund der Tabelle sowie die Rahmenlinien mit Farben. Experimentieren Sie auch mit verschiedenen Farben für unterschiedliche Zeilen oder Zellen der Tabelle.

[Seitenanfang]

Ausrichten von Tabellen und Zelleninhalten

Die Ausrichtung der Tabelle wird im einleitenden table-Tag durch die bereits bekannte Eigenschaft align angegeben. Die Ausrichtung kann die ebenfalls schon bekannten Werte left, right, center oder justify annehmen.

Zur Ausrichtung der Zelleninhalte stehen neben den oben erwähnten Möglichkeiten der horizontalen Ausrichtung noch die folgenden Möglichkeiten der vertikalen Aurichtung zur Verfügung:

Aufgabe:
Testen Sie anhand Ihrer Stundenplantabelle verschiedene Ausrichtungen sowohl für die gesamte Tabelle, wie auch für einzelne Zelleninhalte.


zuletzt geändert am:
Eine Seite von Mirko Hans