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 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:
Zelle 1 | and Zelle 2 | . 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
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:
Zelle 1 |
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) | Русский | 中文 |