In den bisherigen Teilen unseres HTML-Kurses habt ihr gelernt, wie eine HTML-Seite aufgebaut ist und angelegt wird . Ihr wisst bereits, wie ihr Texte gestaltet und Links einfügt . Und ihr könnt auch bereits die eigene E-Mail-Adresse einbauen und Bilder anzeigen lassen . Oftmals reicht das alles aber noch nicht.
Profis wollen Texte und Bilder nämlich haargenau an bestimmten Stellen der Seite anzeigen lassen. Dafür braucht man Tabellen. Damit lässt sich die Seite in einzelne Bereiche aufteilen, in denen dann die Inhalte erscheinen. Auch unsere Internetseite www.news4kids.de besteht aus Texten und Grafiken, die in Tabellen in Spalten und Zellen angeordnet sind (Bild oben).
Eine Tabelle (englisch: Table ) wird von oben nach unten in Zeilen ( T able r ow) und von links nach rechts in Spalten unterteilt. Dabei ergeben sich dann die Tabellenzellen ( T able d ata) (Bild oben). Entsprechend heißen die wichtigsten Befehle bzw. für den Anfang und das Ende der Tabelle. und markieren den Anfang und das Ende einer Zeile. Und sowie stehen für Anfang und Ende der Tabellenzelle.
Um unsere Internetseite mithilfe einer Tabelle zu gestalten, müssen wir direkt nach und direkt vor die Befehle bzw. schreiben. Mit folgenden Zeilen direkt nach und vor fügen wir dann über und unter unserer Seite einen leeren Streifen ein, der genau 40 Pixel hoch ist (height = Englisch für Höhe):
Auf die gleiche Weise können wir auch die Breite einer Tabellenzelle festlegen. Statt "height" schreiben wir dann aber "width" (Englisch für Breite). Statt einer Pixel-Zahl können wir hier auch einen Prozentwert eingeben. "10%" würde bedeuten, dass die Tabellenzelle eine Breite von zehn Prozent der Gesamttabelle (bei uns die Bildschirmbreite) bekommt.
Die anderen Tabellenzellen der Zeile müssen ebenfalls einen Prozentwert als Breite erhalten. Alle gemeinsam ergeben dann 100 Prozent - also die Gesamtbreite. Die Höhe (height) einer Zeile muss ebenso wie die Breite (width) einer Spalte (mehrere Zellen untereinander) übrigens nur jeweils einmal angegeben werden:
Natürlich sollen in den Tabellenzellen meistens auch Inhalte wie Text oder Bilder erscheinen. Die entsprechenden HTML-Befehle werden einfach nach dem ">" des td-Befehls eingegeben. In folgendem Beispiel werden in einer Tabellenzelle mit einer Breite von 80 Prozent ein Bild (news4ids.jpg) und ein Text angezeigt.
Tabellen wirken recht kompliziert. Wie alles andere bei HTML sind aber auch sie nur eine Frage der Übung. Am besten du probierst es einfach selbst aus. Lege auf deiner Internetseite eine einfache Tabelle mit mehreren Zeilen und Spalten an und probiere ein wenig mit den Breiten- und Höhen-Angaben herum. Wenn du das verstanden hast, baue doch deine ganze Seite zu einer Tabelle um. Hier noch ein letztes Beispiel für eine einfache Tabelle. Unsere News4Kids-Beispieldatei für den vierten Teil unseres HTML-Kurses kannst du dir über den Link am Artikelende herunterladen.
26. Februar
RSS 2.0