Tabellen können in HTML dazu benutzt werden um Elemente auszurichten oder zusammengehörigen Sachverhalte (z.B. gegensätzliche Thesen) darzustellen.
Tabellen werden folgendermaßen eingebunden:
<table><tr><th><!-- Überschriften --></th></tr><tr><td><!-- Inhalte --></td></tr></table>
Die Tabelle wird mit dem table
-Tag begonnen. Dieser teilt dem Browser mit, dass eine Tabelle losgeht. Der tr
-Tag („table row“) eröffnet eine neue Zeile. Eine Tabelle enthält eine oder mehr Zeilen. Jede Zeile enthält eine oder mehr Spalten, die mit dem td
-Tag („table data“) geöffnet werden. Der th
-Tag („table header“) ist für Spaltenüberschriften und kann auch weggelassen werden. Folgendes wäre also eine Tabelle ohne Überschriften und mit 2 Zeilen, sowie mit 3 Spalten pro Zeile:
<table> <tr> <td>Text 11</td> <td>Text 12</td> <td>Text 13</td> </tr><tr> <td>Text 21</td> <td>Text 22</td> <td>Text 23</td> </tr> </table>
Um die Übersichtlichkeit des Quelltextes zu erhöhen empfiehlt es sich die Tags entsprechend ihrer Verschachtelung einzurücken. Was letztlich in den Spalten der Tabelle angezeigt wird ist egal. Es können in Tabellen weitere Tabellen, Links, Texte, Bilder, Frames, usw. enthalten sein. Als Beispiel können mit Tabellen Arbeitszeiten von Mitarbeitern dargestellt werden:
<table> <tr> <th>Mitarbeiter</th> <th>Arbeitszeit (pro Tag)</th> <th>Aufgaben</th> </tr><tr> <td>Xin</td> <td>12h</td> <td>proggen.org administrieren</td> </tr><tr> <td>Naums</td> <td>8h</td> <td>Artikel hinzufügen</td> </tr> <!-- so könnte das jetzt noch weiter gehen --> </table>
Anzeigebeispiel:
Mitarbeiter | Arbeitszeit (pro Tag) | Aufgaben |
---|---|---|
Xin | 12h | proggen.org administrieren |
Naums | 8h | Artikel hinzufügen |
Die Tabellen in dieser Seite passen sich der Website an. Außerhalb der proggen.org-Website haben die Tabellen, die wir oben erstellt haben, graue Ränder. Um Tabellen optisch zu gestalten gibt es es unter anderen diese Attribute:
Attribut | Wirkung |
---|---|
background | Pfad zu einem Hintergrundbild der Tabelle, der Zeile oder der Spalte |
bgcolor | Hintergrundfarbe der Tabelle, der Zeile oder der Spalte |
width | Die Breite der Tabelle, der Zeile oder der Spalte festlegen (ein Festlegen der obersten Spalte reicht, um alle unteren Spalten die gleiche Breite zu geben. (es gibt kein height-Attribut für Tabellen) |
align | Legt die Ausrichtung der Inhalte (Texte, Bilder,…) innerhalb der Tabelle, Zeile oder Spalte fest |
valign (s. unten) | Legt die vertikale Ausrichtung der Inhalte fest |
border | Legt die Breite des Rahmens der Tabelle, Zeile oder der Spalte fest |
bordercolor | Legt die Farbe des Rahmens der Tabelle, Zeile oder der Spalte fest |
Ein Beispiel mit linksbündiger Schrift in der gesamten Tabelle außer die Überschriften, die zentriert sind. Es gibt keine Rahmen, und die Tabelle nimmt die gesamte Fensterbreite ein. Die Inhalte sind am oberen Rand der Tabellenspalten ausgerichtet:
<table align="left" valign="middle" border="2px" width="100%"> <tr> <th align="center">Mitarbeiter</th> <th align="center">Arbeitszeit (pro Tag)</th> <th align="center">Aufgaben</th> </tr><tr> <td>Xin</td> <td>12h</td> <td>proggen.org administrieren</td> </tr><tr> <td>Naums</td> <td>8h</td> <td>Artikel hinzufügen</td> </tr> <!-- so könnte das jetzt noch weiter gehen --> </table>
Anzeigebeispiel:
Mitarbeiter | Arbeitszeit (pro Tag) | Aufgaben |
---|---|---|
Xin | 12h | proggen.org administrieren |
Naums | 8h | Artikel hinzufügen |
Das align
-Attribut gibt die horizontale Ausrichtung der Inhalte in der Tabelle, Zeile oder Spalte an. Es gibt folgende Attributwerte:
Attributwert | Wirkung |
---|---|
left | Die Inhalte sind linksbündig |
center | Die Inhalte sind zentriert |
right | Die Inhalte sind rechtsbündig |
Das valign
-Attribut gibt die vertikale Ausrichtung der Inhalte in der Tabelle, Zeile oder Spalte an. Es gibt folgende Attributwerte:
Attributwert | Wirkung |
---|---|
top | Die Inhalte sind am oberen Rand |
middle | Die Inhalte stehen in der Mitte |
bottom | Die Inhalte stehen am unteren Rand |
Die Festlegung der Optik innerhalb des HTML-Dokumentes ist allerdings nicht mehr gewünscht. Hierfür werden heutzutage CSS-Beschreibungen verwendet und mit der Tabelle nur noch die Daten tabellarisch strukturiert.
Das nächste Kapitel beschäftigt sich mit der Verwendung von Frames.