Anmelden | Registrieren | FAQ Anonymous * Startseite * Tutorials * Foren * Über ____________________ Suche Startseite » Tutorials » HTML » Lektion 10: Tabellen Lektion 10: Tabellen Tabellen werden verwendet um “Tabellendaten” anzuzeigen, also Informationen, welche logisch – in Zeilen und Spalten angeordnet – präsentiert werden können. Ist das schwierig? Tabellen in HTML zu bauen mag am Anfang schwierig aussehen. Aber wenn Sie cool bleiben und Schritt für Schritt vorgehen, ist es eigentlich ganz logisch. So wie alles andere bei HTML auch. Beispiel 1:
Zelle 1 Zelle 2
Zelle 3 Zelle 4
sieht im Browser wie folgt aus: Zelle 1 Zelle 2 Zelle 3 Zelle 4 Wo ist der Unterschied zwischen und ? Werfen Sie einen nochmal einen kurzen Blick auf das obige Beispiel, dies ist wohl das bisher schwerste. Lassen Sie uns kurz den Code auseinandernehmen und die Tags erklären: Drei verschiedene Elemente werden benötigt, um Tabellen zu erzeugen: * Der Start-Tag öffnet und der End-Tag
schließt die Tabelle. Logisch. * Eine Tabellenzeile wird durch (steht für “table row”, also Tabellenzeile) und geöffnet bzw. geschlossen. Auch logisch. * Ein Eintrag in der Tabelle (Tabellenzelle) wird mit und umschlossen. td steht für “table data”, was man mit Tabellendaten übersetzen kann. Sie sehen, alles einfach und logisch. Hier eine kurze Erklärung des Beispiels 1: Die Tabelle startet mit einem und wird gefolgt von einem , welches der Beginn einer neuen Zeile ist. Zwei Tabellenzellen werden in diese Zeile eingefügt: and . Danach wird die Zeile mit geschlossen und gleich beginnt eine neue Zeile mit . Auch diese enthält zwei Zellen. Die Zeile wird mit und die Tabelle am Schluß mit
Zelle 1Zelle 2
geschlossen. Noch ein Hinweis zum weiteren Verständnis: Zeilen werden die horizontalen Tabellenzellen genannt und von Spalten spricht man bei den vertikalen Tabellenzellen. Zelle 1 Zelle 2 Zelle 3 Zelle 4 Zelle 1 und Zelle 2 bilden eine Zeile. Zelle 1 und Zelle 3 bilden eine Spalte. Im gerade gezeigen Beispiel hat die Tabelle zwei Zeilen und zwei Spalten. Eine Tabelle kann aber eine unbegrenzte Anzahl an Zeilen und Spalten haben. Beispiel 2:
Zelle 1 Zelle 2 Zelle 3 Zelle 4
Zelle 5 Zelle 6 Zelle 7 Zelle 8
Zelle 9 Zelle 10 Zelle 11 Zelle 12
sieht im Browser wie folgt aus: Zelle 1 Zelle 2 Zelle 3 Zelle 4 Zelle 5 Zelle 6 Zelle 7 Zelle 8 Zelle 9 Zelle 10 Zelle 11 Zelle 12 Gibt es auch Attribute? Natürlich! Z.B. gibt es das Attribut border (engl. für Grenze, Begrenzung). Dieses wird verwendet um die Dicke der Rahmen (Begrenzungslinien) der Tabelle anzugeben: Beispiel 3:
Zelle 1 Zelle 2
Zelle 3 Zelle 4
sieht im Browser wie folgt aus: Zelle 1 Zelle 2 Zelle 3 Zelle 4 Die Dicke der Begrenzungslinien wird in Pixeln angegeben – siehe Lektion 9 Genau wie bei Bildern können Sie auch die Breite von Tabellen in Pixeln angeben. Alternativ dazu ist auch eine Prozentangabe möglich. Beispiel 4: Dieses Beispiel wird im Browser als Tabelle angezeigt, deren Breite 30% des Bildschirmes beträgt. Probieren Sie’s aus! Mehr Attribute? Es gibt viele Attribute für Tabellen. Hier sind noch zwei weitere: * align gibt die horizontale Ausrichtung (alignment) des Inhaltes in der Tabelle, einer Tabellenspalte oder einer einzelnen Zelle an. Werte für dieses Attribut sind left (links), center (zentriert) oder right (rechts). * valign gibt die vertikale Ausrichtung (vertical alignment) des Inhaltes in einer Tabellenzelle. Werte für dieses Attribut sind z.B. top (oben), middle (in der Mitte) oder bottom (unten). Beispiel 5: Was kann ich in meine Tabellen einfügen? Theoretisch können Sie alles in Tabellen einfügen: Text, Links und Bilder … ABER Tabellen sind dafür gedacht “Tabellendaten” anzuzeigen (also Informationen, welche in Zeilen und Spalten präsentiert werden sollten). Bitte nehmen Sie davon Abstand Dinge in Tabellen zu packen, bloß weil diese nebeneinander angezeigt werden sollen. Früher (also eigentlich ist es erst ein paar Jahre her) wurden Tabellen als Layoutwerkzeug herangezogen. Wenn Sie aber die Präsentation von Texten und Bildern kontrollieren möchten, gibt es heute für solche Zwecke einen viel besseren Weg (Stichwort: CSS). Mehr dazu später. Jetzt setzen Sie das soeben gelernte in die Praxis um und entwerfen Sie ein paar Tabellen in verschiedenen Größen, mit verschiedenen Attributen und Inhalten. Das sollte Sie ein wenig beschäftigen. __________________________________________________________________ __________________________________________________________________ << Lektion 9: Bilder Lektion 11: Mehr über Tabellen >> Tutorials * HTML Tutorial + Einführung + Fangen wir an! + Was ist HTML? + Elemente und Tags + Ihre erste Webseite + Was Sie bisher gelernt haben! + Einige weitere Elemente + Attribute + Links + Bilder + Tabellen + Mehr über Tabellen + Layout (CSS) + Seiten ins Netz laden + Web-Standards und Validierung + Abschließende Hinweise * CSS Tutorial * PHP Tutorial Sprache [Deutsch___________] >> Layout [Default_______] >> Übersetzung Sven Albert-Pedersen __________________________________________________________________ Wer ist online?: Insgesamt sind 322 Besucher online: 3 registrierte, 0 unsichtbare und 319 Gäste Der Besucherrekord liegt bei 819 Besuchern, die am Mo Okt 15, 2012 9:42 am gleichzeitig online waren. Mitglieder: Google [Bot], Google Adsense [Bot], Guruman2 Statistik: Beiträge insgesamt 9987 - Themen insgesamt: 4189 Mitglieder insgesamt: 10321 - Unser neuestes Mitglied: stumpht Zeigt eine vollständige Liste aller Mitglieder an Sprache: العربية | Deutsch | English | Español | Français | עברית | Italiano | Polski | Portgués (Brasil) | Русский | 中文 |
Zelle 1