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:
- Der Table-Tag umschließt die gesamte Tabelle: <table>...</table>
- Mit dem tr-Tag umschließt man eine Zeile der Tabelle (table row): <tr>...</tr>
- Der td-Tag umschließt eine Zelle der Tabelle (table data): <td>...</td>
- Mit dem th-Tag umschließt man eine Zelle im Kopf der Tabelle (table header): <th>...</th>
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:
- Durch den Zusatz border kann die Tabelle mit einem Rahmen versehen werden.
- Die Breite der Tabelle passt sich automatisch den Einträgen an.
- Der th-Tag formatiert den Inhalt der betreffenden Zellen fett und zentriert.
- Die Standardausrichtung innerhalb der einzelnen Zellen ist linksbündig.
Aufgabe
Experimentieren Sie mit den folgenden Eigenschaften des Table-Tags. Setzen Sie jeweils verschiedene Zahlen ein. Was stellen Sie fest?
- border=""
- cellspacing=""
- cellpadding=""
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:
-
<table width="40%" height="30%" >
Die Zusätze bewirken hier, dass die Tabelle 40 % der Bildschirmbreite und 30 % der Bildschirmhöhe einnimmt.
- <td width="150"> (legt die Breite der Spalte auf 150 Pixel fest)
- <td height="50"> (in der ersten Spalte einer Zeile der Tabelle; legt die Höhe der Zeile auf 50 Pixel fest)
Aufgaben:
- 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.
- 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.
- Schreiben Sie Ihren aktuellen Stundenplan als HTML-Tabelle. Die Spalten der einzelnen Wochentage sollen dabei alle die gleiche Breite besitzen.
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.
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.
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:
- valign="top" - obenbündig
- valign="middle" - mittig
- valign="bottom" - untenbündig
Aufgabe:
Testen Sie anhand Ihrer Stundenplantabelle verschiedene Ausrichtungen sowohl für die gesamte Tabelle, wie auch für einzelne Zelleninhalte.
Lösung zur Aufgabe Stundenplantabelle. Betrachten Sie den Quelltext, um sich evtl. Hilfestellung zu holen.
Eine Seite von Mirko Hans