====== Tabellen ====== Tabellen können in HTML dazu benutzt werden um Elemente auszurichten oder zusammengehörigen Sachverhalte (z.B. gegensätzliche Thesen) darzustellen. ===== Tabellen einbinden ===== Tabellen werden folgendermaßen eingebunden:
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:
Text 11 Text 12 Text 13
Text 21 Text 22 Text 23
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, [[html:basics:frames|Frames]], usw. enthalten sein. Als Beispiel können mit Tabellen Arbeitszeiten von Mitarbeitern dargestellt werden:
Mitarbeiter Arbeitszeit (pro Tag) Aufgaben
Xin 12h proggen.org administrieren
Naums 8h Artikel hinzufügen
Anzeigebeispiel:\\
Mitarbeiter Arbeitszeit (pro Tag) Aufgaben
Xin 12h proggen.org administrieren
Naums 8h Artikel hinzufügen
===== Tabellen stylen ===== 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:
Mitarbeiter Arbeitszeit (pro Tag) Aufgaben
Xin 12h proggen.org administrieren
Naums 8h Artikel hinzufügen
Anzeigebeispiel: \\
Mitarbeiter Arbeitszeit (pro Tag) Aufgaben
Xin 12h proggen.org administrieren
Naums 8h Artikel hinzufügen
==== Das align-Attribut ==== 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 ==== 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 | \\ ==== Noch besser: CSS ==== Die Festlegung der Optik innerhalb des HTML-Dokumentes ist allerdings nicht mehr gewünscht. Hierfür werden heutzutage [[css:start|CSS-Beschreibungen]] verwendet und mit der Tabelle nur noch die Daten tabellarisch strukturiert. Das [[html:basics:frames|nächste Kapitel]] beschäftigt sich mit der Verwendung von Frames.