Startseite > Datentabellen
Datentabellen (HTML-Tabellen) erstellen
Datentabellen: Zur übersichtlichen und einheitlichen Darstellung gleichförmiger Daten gibt es HTML-Tabellen. Sie sind also ein Mittel der Textstrukturierung. Tabellen können verschiedene Eigenschaften aufweisen: zwei-, drei- oder mehrspaltig, mit oder ohne Rand, einfarbig oder gestreift (Zebra-Tabelle), mobilgeräte-tauglich oder nicht, mit Medienabfragen (responsiv) oder ohne. Wichtig ist, daß Tabellen auch auf schmalen Endgeräten so angezeigt werden, daß der Besucher nicht waagerecht scrollen muß. Nachfolgend vier verschieden strukturierte Tabellen:
- ⇓ Zweispaltige Tabelle ohne Ränder, mobilgeräte-tauglich
- ⇓ Dreispaltige Tabelle, mobilgeräte-tauglich, Tabellenkopf
sticky
- ⇓ Dreispaltige Tabelle, mobilgeräte-tauglich, mit Medienabfrage
- ⇓ Zweispaltige Zebra-Tabelle, mobilgeräte-tauglich, Kopf
sticky
Zweispaltige Tabelle ohne Ränder, mobilgeräte-tauglich
Diese HTML-Tabelle (CSS-Klasse tab1) ist zweispaltig ohne Rand, einfarbig, mobilgeräte-tauglich, kommt aber ohne Medienabfrage und ohne besondere CSS-Regeln für schmale Endgeräte aus (ist also, wenn man es genau nimmt, nicht responsiv
). Die Spaltenbreiten lege ich absichtlich über Inline-CSS-Regeln fest; damit bin ich flexibler bei weiteren Tabellen dieser Art, aber anderer Spaltenaufteilung.
(Beispieltext:) Badcafe Streitberg: Adreßdaten, Bierpreis, Öffnungszeiten, Hinweise:
| Anschrift: | Badcafe Streitberg, Am Freibad 7, 91346 Wiesenttal |
| Telefon: | 0160 / 3441000 (Mobil) oder 09196 / 298 (Freibad) |
| Internet: | www.badcafe-streitberg.de |
| Bierpreis: | ein Seidla (0,5 Liter) Helles (Greif-Bräu) oder Dunkles (Meisterbräu) kostet 2,50 € (Radler: gleicher Preis) |
| Öffnungszeiten: | parallel zu den Freibad-Öffnungszeiten (Mitte Mai bis Mitte Sept. täglich von 10-19 Uhr), aber bei Bedarf ist das Badcafe abends länger geöffnet |
| Hinweise: | Anfahrt: Schwimmbad und Badcafe sind in Streitberg an der B470 ausgeschildert (Abzweigung nach Niederfellendorf), Parkplätze vor dem Bad |
| Lageplan: | OSM-Karte (Kartenmitte, siehe Pfeil-Markierung) |
Dreispaltige Tabelle, mobilgeräte-tauglich, Tabellenkopf sticky
Diese HTML-Tabelle (CSS-Klasse tab2) ist dreispaltig mit Rand, einfarbig, mobilgeräte-tauglich, kommt aber ohne Medienabfrage und ohne besondere CSS-Regeln für schmale Endgeräte aus (ist also, wenn man es genau nimmt, nicht responsiv
). Der Tabellenkopf ist sticky
: wenn während der Anzeige der Tabelle nach unten gescrollt wird, bleibt der Tabellenkopf am oberen Rand des Browserfensters kleben
. Die Spaltenbreiten lege ich absichtlich über Inline-CSS-Regeln fest; damit bin ich flexibler bei weiteren Tabellen dieser Art, aber anderer Spaltenaufteilung. Die letzte Tabellenreihe faßt die drei Spalten zusammen.
(Beispieltext:) Speisenkarte des Gasthofs Roter Ochse
in Ochsenfurt ;-)
| Nr. | Gericht | Preis |
|---|---|---|
| 1 | Ochsenschwanzsuppe mit Croutons | 3,10 |
| 2 | Ochsenmaulsalat mit Zwiebelringen, Balsamico und Olivenöl | 4,60 |
| 3 | Ochsenzunge gepökelt mit Sauerkraut und Bauernbrot | 9,60 |
| 4 | Ochsenbäckchen in Rotweinsoße mit Baggers und gemischtem Salat | 11,50 |
| 5 | Ochsenbraten vom Spieß mit rohen Klößen und Blaukraut | 12,90 |
| 6 | Ochsenkotelett vom Grill mit Kräuterbutter, Pommes frites und gemischtem Salat | 20,70 |
| 7 | für Kinder, Senioren und andere Wenigesser: Kloß mit Soß' | 2,40 |
| Alle Preise einschließlich Bedienung und Mehrwertsteuer, Preisangaben in Euro | ||
Dreispaltige Tabelle, mobilgeräte-tauglich, mit Medienabfrage
Diese HTML-Tabelle (CSS-Klasse tab3) ist dreispaltig mit Rand, einfarbig, mobilgeräte-tauglich und responsiv (also mit Medienabfrage): Bei einer Fensterbreite von 400px und kleiner werden die Tabellenzellen nicht nebeneinander, sondern untereinander angezeigt. Nachteil: die typische Tabellendarstellung ist im Smartphone
-Portraitmodus nicht mehr erkennbar. Weiterer Nachteil: Dann beansprucht die Speisenkarten-Tabelle in der Höhe mehr Platz als die vorige Tabelle tab2 mit gleichem Inhalt. Die letzte Tabellenreihe faßt die drei Spalten zusammen.
(Beispieltext, gleich wie in Tabelle tab2 zuvor:)
Speisenkarte des Gasthofs Roter Ochse
in Ochsenfurt ;-)
| Nr. | Gericht | Preis |
|---|---|---|
| 1 | Ochsenschwanzsuppe mit Croutons | 3,10 |
| 2 | Ochsenmaulsalat mit Zwiebelringen, Balsamico und Olivenöl | 4,60 |
| 3 | Ochsenzunge gepökelt mit Sauerkraut und Bauernbrot | 9,60 |
| 4 | Ochsenbäckchen in Rotweinsoße mit Baggers und gemischtem Salat | 11,50 |
| 5 | Ochsenbraten vom Spieß mit rohen Klößen und Blaukraut | 12,90 |
| 6 | Ochsenkotelett vom Grill mit Kräuterbutter, Pommes frites und gemischtem Salat | 20,70 |
| 7 | für Kinder, Senioren und andere Wenigesser: Kloß mit Soß' | 2,40 |
| Alle Preise einschließlich Bedienung und Mehrwertsteuer, Preisangaben in Euro | ||
Zweispaltige Zebra-Tabelle, mobilgeräte-tauglich, Kopf sticky
Als Zebra-Tabelle
wird landläufig eine Tabelle bezeichnet, deren Reihen abwechselnd verschiedene Hintergrundfarben haben. Das sieht nicht nur schön aus, sondern ist übersichtlicher und macht den Text leichter lesbar. Diese zweispaltige Tabelle mit Rand (CSS-Klasse tab4) wird auch auf schmalen Endgeräten ansehnlich dargestellt, ist also mobilgeräte-tauglich (obwohl sie ohne Medienabfrage auskommt). Der Tabellenkopf ist sticky
. Die Spaltenbreiten lege ich absichtlich über Inline-CSS-Regeln fest; damit bin ich flexibler bei weiteren Tabellen dieser Art, aber anderer Spaltenaufteilung.
(Beispieltext:) In dieser Tabelle sind einige Musik-Interpreten und -Gruppen mit ihren bekanntesten Titeln aufgeführt (ohne Anspruch auf Vollständigkeit):
| Interpret, Gruppe | Titel |
|---|---|
| Claudia Jung | Komm und tanz ein letztes Mal mit mir |
| Ute Freudenberg | Auf den Dächern von Berlin |
| Die Puhdys | Alt wie ein Baum |
| Aalbachtal-Expreß | Gruß an Kiel |
| Tomislav Ivčić | Večeras je naša fešta |
| Milo Hrnić | Kome bi šumilo more moje sinje |
| Jasna Zlokić | Skitnica |
| Hrvatski Band Aid | Moja Domovina |
HTML-Quelltext:
<table class="tab4"> <colgroup><col style="width:300px;"> <col style="width:500px;"></colgroup> <thead> <tr> <th class="gitter"><b>Interpret, Gruppe</b></th> <th class="gitter"><b>Titel</b></th> </tr> </thead> <tbody> <tr> <td class="gitter">Claudia Jung</td> <td class="gitter">Komm und tanz ein letztes Mal ...</td> </tr> <tr> <td class="gitter">Ute Freudenberg</td> <td class="gitter">Auf den Dächern von Berlin</td> </tr> ... usw. ... </tbody> </table>
Auch die große Tabelle auf der Seite Merkmale der Vorlage ist mit dieser Tabelle der CSS-Klasse tab4 erstellt, wobei die Kategorien A. bis F. jeweils eigene Elemente thead und tbody haben.