innerhalb tr-Tags mit td ("table data") Tabellenzellen hinzufügen
Anna
25
Ben
30
Tabellen gestalten
Überschrift und (Innen-)Rahmen
in einem tr Bereich mit th-Tag ("table header") Spaltenüberschriften hinzufügen
innerhalb tr-Tags mit td ("table data") Tabellenzellen hinzufügen
im css bezogen auf Tabelle: border: 1px solid black (für den Rahmen) und border-collapse: collapse (damit der Rahmen eine einfache Linie ist)
im css bezogen auf Tabelle, Zeilen (tr), Zellen(td): border: 1px solid black (für den Rahmen) und border-collapse: collapse (damit der Rahmen eine einfache Linie ist)
Name
Alter
Anna
25
Ben
30
Name
Alter
Anna
25
Ben
30
Spaltenbreite & Zeilenhöhe
im css bezogen auf Zellen(td):width: 150px
im css bezogen auf Zeilen(tr):height: 40px
Name
Alter
Wohnort
Hobby
Beruf
Anna
25
Köln
Geige
Lehrerin
Ben
30
Struckum
Lesen
Informatiker
Till
45
Berlin
Garten
Gärtner
Sam
99
Hamburg
Zocken
Rentner
Lina
10
München
Malen
Schülerin
Zellen verbinden
colspan: zum verbinden von Spalten (Bsp.: Spaltenüberschriften) -> z.B. 3 Spalten verbinden: im th-Tag colspan="3"
rowspan: zum verbinden von Zeilen -> z.B. 2 Zeilen verbinden: im td-Tag rowspan="2"
colspan und rowspan: zum verbinden von mehreren Zeilen/Spalten -> z.B. 2 Spalten, 2 Zeilen: im td-Tag colspan="2" rowspan="2"
Name
Alter
Infos
Anna
25
Köln
Geige
Lehrerin
Ben
30
Struckum
Lesen
Informatiker
Till
Berlin
Garten
Gärtner
Sam
99
Hamburg
Künster
Lina
10
München
Ausrichtung des Inhalts
mögliche Ausrichtungen sind left=linksbündig (Standard), center=zentriert und right=rechtsbündig
im css bezogen auf Zellen(td): text-align=left/center/right
Name
Alter
Wohnort
Hobby
Beruf
Anna
25
Köln
Geige
Lehrerin
Ben
30
Struckum
Lesen
Informatiker
Till
45
Berlin
Garten
Gärtner
Sam
99
Hamburg
Zocken
Rentner
Lina
10
München
Malen
Schülerin
Hintergrundfarben
zum hervorheben der Spaltenüberschriften im css bezogen auf th:background-color:Farbcode (z.B.#f2f2f2)
für abwechselnde Zeilenfarben im css bezogen auf tr:nth-child(even) (alle geraden Zellen 2,4,6,...):background-color:Farbcode (z.B.#D9ECFF) und bezogen auf tr:nth-child(odd) (alle ungeraden Zellen 1,3,5,...):background-color:anderer Farbcode (z.B#A8D0FF)