HTML/Tabellen: Unterschied zwischen den Versionen
Aus SELFHTML-Wiki
< HTML
K (l korr) |
K |
||
| Zeile 1: | Zeile 1: | ||
In diesem Kurs lernen Sie, wie Sie '''Tabellen''' mit und ohne Gitternetzlinien in Ihre Web-Seiten einbauen können. | In diesem Kurs lernen Sie, wie Sie '''Tabellen''' mit und ohne Gitternetzlinien in Ihre Web-Seiten einbauen können. | ||
| − | {{nSpalten| | + | {{nSpalten|2|min-width=15em| |
# [[HTML/Tabellen/Aufbau einer Tabelle|'''Aufbau einer Tabelle''']] | # [[HTML/Tabellen/Aufbau einer Tabelle|'''Aufbau einer Tabelle''']] | ||
#* Tabellenzeilen (table), (tr) | #* Tabellenzeilen (table), (tr) | ||
| Zeile 14: | Zeile 14: | ||
#* Spaltengruppen (colgroup) | #* Spaltengruppen (colgroup) | ||
#* Spalten überspannen (colspan) | #* Spalten überspannen (colspan) | ||
| − | #* Zeilen überspannen (rowspan) | + | #* Zeilen überspannen (rowspan)<br><br> |
# [[HTML/Tabellen/Gestaltung mit CSS|'''Gestaltung mit CSS''']] | # [[HTML/Tabellen/Gestaltung mit CSS|'''Gestaltung mit CSS''']] | ||
#* Kopf- und Datenzellen gestalten | #* Kopf- und Datenzellen gestalten | ||
| Zeile 20: | Zeile 20: | ||
#* Zeilenüberschriften | #* Zeilenüberschriften | ||
#* Zeilen bei :hover markieren | #* Zeilen bei :hover markieren | ||
| + | #* [[HTML/Tabellen/Gestaltung_mit_CSS#Fester_Tabellenkopf_mit_position:sticky|Tabelle mit festem Kopf]] | ||
# [[HTML/Tabellen/Responsive Gestaltung|'''Responsive Gestaltung''']] | # [[HTML/Tabellen/Responsive Gestaltung|'''Responsive Gestaltung''']] | ||
#* Anpassung für breite Viewports | #* Anpassung für breite Viewports | ||
| Zeile 53: | Zeile 54: | ||
| | | | ||
* [[CSS/Tutorials/Selektoren/strukturelle Pseudoklassen#nth-child|Tabelle im Zebralook]] | * [[CSS/Tutorials/Selektoren/strukturelle Pseudoklassen#nth-child|Tabelle im Zebralook]] | ||
| − | |||
* [[CSS/Tutorials/Einstieg/Webseiten responsiv umbauen|Alternativen zu Tabellen]] | * [[CSS/Tutorials/Einstieg/Webseiten responsiv umbauen|Alternativen zu Tabellen]] | ||
Aktuelle Version vom 12. Mai 2023, 03:43 Uhr
In diesem Kurs lernen Sie, wie Sie Tabellen mit und ohne Gitternetzlinien in Ihre Web-Seiten einbauen können.
- Aufbau einer Tabelle
- Tabellenzeilen (table), (tr)
- Kopf- (th) und Datenfelder (td)
- thead, tbody und tfoot
- Beschriftung
- Tabellenüberschrift (caption)
- Kurzinformation (abbr)
- headers
- scope
- Spalten und Zellen verbinden
- Spalten (col)
- Spaltengruppen (colgroup)
- Spalten überspannen (colspan)
- Zeilen überspannen (rowspan)
- Gestaltung mit CSS
- Kopf- und Datenzellen gestalten
- Zebrastreifen
- Zeilenüberschriften
- Zeilen bei :hover markieren
- Tabelle mit festem Kopf
- Responsive Gestaltung
- Anpassung für breite Viewports
- Anpassung für schmale Viewports
- Hintergrund
- table-layout – Breitenangaben mit der table-layout-Eigenschaft steuern
- Gestaltung mit JavaScript
- Spalten bei :hover markieren
- Spalten bei :hover markieren
Wann sollte man eine Tabelle verwenden?
Eine Tabelle ist eine geordnete Zusammenstellung von Texten oder Daten. Die darzustellenden Inhalte werden dabei in Zeilen (waagerecht) und Spalten (senkrecht) gegliedert, die grafisch aneinander ausgerichtet werden.
Sinnvolle Einsatzbereiche für Tabellen sind beispielsweise:
- Kalender
- Stundenpläne
- Fahrpläne
- Ranglisten, z. B. im Sport
- TV-Programm
- Statistiken
Oft kann man anstelle von Tabellen auch Listen oder ähnliches verwenden:
Siehe auch
- CSS/Eigenschaften
- Tabellenüberschriften (caption-side)
- table-layout
- Rahmen und Zwischenlinien
- Umgang mit leeren Zellen (empty cells)
Weblinks
- W3C: tabular data
