nicht angemeldet
Der Martin
Gunnar Bittersmann
Der Martin
tk
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
molily
molily
Gunnar Bittersmann
molily
Sollte ich für diese Darstellung eine Tabelle nehmen?
Und wie verhält sich dieses wenn ich eine Seite kleiner mache? Irgendwann hat alles kein Platz mehr.
vielen sagen KEINE Tabellen in 2014, aber ich bin der Meinung NICHT immer sind Tabellen schlecht.
Hallo,
Sollte ich für diese Darstellung eine Tabelle nehmen?
meine Meinung: Ja, selbstverständlich. Von der Art der Daten und ihrer Struktur her ist eine Tabelle hier IMO das einzig Richtige.
Und wie verhält sich dieses wenn ich eine Seite kleiner mache? Irgendwann hat alles kein Platz mehr.
Tabellen schrumpfen mit der Breite, solange es der Inhalt der Spalten zulässt und die Breite einzelner Spalten nicht explizit festgelegt ist; als letzte Stufe finden Zeilenumbrüche innerhalb der Zellen statt, falls möglich. Wird die Fensterbreite noch geringer, behält die Tabelle ihre erforderliche Mindestbreite, und der Nutzer muss horizontal scrollen.
Das mit dem horizontalen Scrollen ist nicht schön, aber in bestimmten Fällen vielleicht das kleinste Übel. Natürlich kann man entgegenwirken und beim Unterschreiten bestimmter Breiten nach und nach einzelne Spalten ausblenden (ihre Breite auf 0 setzen); dazu ist aber Voraussetzung, dass die Spalten untereinander gewisse Prioritäten haben, so dass das Weglassen keinen erheblichen Informationsverlust darstellt.
vielen sagen KEINE Tabellen in 2014
Das bezieht sich auf den Einsatz von Tabellen als Layoutinstrument, nicht auf die Darstellung von Daten, die per se Tabellencharakter haben.
Ciao,
Martin
Das mit dem horizontalen Scrollen ist nicht schön, aber in bestimmten Fällen vielleicht das kleinste Übel. Natürlich kann man entgegenwirken und beim Unterschreiten bestimmter Breiten nach und nach einzelne Spalten ausblenden (ihre Breite auf 0 setzen); dazu ist aber Voraussetzung, dass die Spalten untereinander gewisse Prioritäten haben, so dass das Weglassen keinen erheblichen Informationsverlust darstellt.
Also in meinem Fall könnte ich z.B. auf kleinen Geräten das PDf Symbol, den Status und das Bezahldatum ausblenden lassen, so würde ich mehr platz bekommen. Das könnte ich über Media Queries lösen, richtig?
Hi,
Das mit dem horizontalen Scrollen ist nicht schön, aber in bestimmten Fällen vielleicht das kleinste Übel. Natürlich kann man entgegenwirken und beim Unterschreiten bestimmter Breiten nach und nach einzelne Spalten ausblenden (ihre Breite auf 0 setzen); dazu ist aber Voraussetzung, dass die Spalten untereinander gewisse Prioritäten haben, so dass das Weglassen keinen erheblichen Informationsverlust darstellt.
Also in meinem Fall könnte ich z.B. auf kleinen Geräten das PDf Symbol, den Status und das Bezahldatum ausblenden lassen, so würde ich mehr platz bekommen. Das könnte ich über Media Queries lösen, richtig?
ja, genau. Wobei ich den Status (bezahlt oder offen) gerade nicht ausblenden würde, die Information halte ich für wichtig. Dann schon eher noch die Rechnungsnummer weglassen - die interessiert einen Kunden meist nur am Rande, wenn überhaupt.
Ciao,
Martin
Hallo,
ja, genau. Wobei ich den Status (bezahlt oder offen) gerade nicht ausblenden würde, die Information halte ich für wichtig. Dann schon eher noch die Rechnungsnummer weglassen - die interessiert einen Kunden meist nur am Rande, wenn überhaupt.
Ok danke für die Infos. Ich werde es mal so umsetzten.
@@Der Martin:
nuqneH
Wird die Fensterbreite noch geringer, behält die Tabelle ihre erforderliche Mindestbreite, und der Nutzer muss horizontal scrollen.
Nö, nicht notwendigerweise. Gegenbeispiel. Erklärung. Und Matthias(?) hat das in einen Wiki-Artikel gegossen.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Und Matthias(?) hat das in einen Wiki-Artikel gegossen.
Ja, das war ich. Und es gibt jetzt auch ein Beispiel mit einzelnen Spaltenüberschriften im Wiki. Der Artikel drumrum ist noch zu formulieren.
Matthias
Hallo,
das hat überhaupt nichts mit 2014 zu tun.
Bereits seit dem Jahr 2000 gibt es keinen Grund, Tabellen zum Layouten zu mißbrauchen.
Seitdem sollten Tabellendaten nur noch für Tabellendaten verwendet werden - also semantisch korrekt. Es gab und gibt also keinen Grund Tabellen grundsätzlich zu verdammen.
Deine Daten sind aber eindeutig Listendaten. Damit ist die Verwendung einer Tabelle zur Anzeige ein typischer Mißbrauch zum Layouten.
Korrekt wäre die Verwendung eines Listenelements - hier sinnvollerweise des dl-Elements.
Gruss
MrMurphy
Hi,
Deine Daten sind aber eindeutig Listendaten. Damit ist die Verwendung einer Tabelle zur Anzeige ein typischer Mißbrauch zum Layouten.
da bin ich ganz anderer Ansicht: Jede Zeile enthält einen in sich zusammengehörenden Datensatz, jede Spalte enthält die gleiche Information zum jeweiligen Datensatz. Das qualifiziert die Daten IMO eindeutig für eine Tabelle.
Korrekt wäre die Verwendung eines Listenelements - hier sinnvollerweise des dl-Elements.
Sehe ich hier nicht so.
Ciao,
Martin
Hallo MrMurphy,
Deine Daten sind aber eindeutig Listendaten.
Dann hast du andere Daten gesehen als Martin und ich: die Daten gehören eindeutig in eine Tabelle ...
Gruß,
Tobias
Korrekt wäre die Verwendung eines Listenelements - hier sinnvollerweise des dl-Elements.
Hast du für mich ein kleines Beispiel wie ich das mit so einer Liste hinbekomme? Ich meinte, ich hab eine Überschrift mit einer Trennlinie und darunter die Einträge.
Aber genau das habe ich befürchtet. Zwei Antworten zwei Meinungen.
@@Yael:
nuqneH
Aber genau das habe ich befürchtet. Zwei Antworten zwei Meinungen.
Kein Grund zur Sorge. Vergiss das mit der Liste. Du hast eindeutig eine Tabelle – mit mehreren Spalten.
Und selbst wenn jemand daherkommt und meint, eine zweispaltige Tabelle wäre keine Tabelle, sondern eine Beschreibungsliste dl: nein, nicht unbedingt.
Qapla'
Hallo
Ich meinte, ich hab eine Überschrift mit einer Trennlinie und darunter die Einträge.
Das ist doch kein Problem und schon lange kein Grund Tabellen zum Layouten zu mißbrauchen.
Hast du für mich ein kleines Beispiel wie ich das mit so einer Liste hinbekomme?
Gerne.
Ich habe aus deinen Angaben eine dl-Liste mit flexiblen Layout und Responsive Design erstellt.
Entsprechend werden auch alle Informationen durchgehend angezeigt, nichts ausgeblendet (warum sollen User mit schmalen Fenstern weniger Informationen bekommen?) und selbstverständlich muss auch bei schmalen Fensterbreiten nicht seitwärts gescrollt werden. Die User mit schmalen Fenstern (Smartphone und Tablet) machen inzwischen über 50% der Besucher aus - mit steigender Tendenz.
Auch eine Änderung, insbesondere eine Vergrößerung, des Zoom-Faktors führt nicht zur Zerstörung des Layouts.
Bei großen Fensterbreiten wird das Layout ähnlich wie bei dir dargestellt.
Bei mittleren Fensterbreiten werden die "Überschriften" links von den Informationen dargestellt und die einzelnen Rechnungen durch eine horizontale Linie getrennt.
Bei kleinen Fensterbreiten bleibt die Trennung der einzelnen Rechnungen durch horizontale Linien. Die "Überschrift" wird über der jeweiligen Information in Fettschrift dargestellt und zwischen den Informationen wird ein kleiner Abstand eingefügt.
Der HTML-Quellcode ist simpel und Übersichtlich:
Matthias Apsel
<dl class="clearfix">
<dt>Rechnungsnummer</dt>
<dd>Rechnungsdatum</dd>
<dd>Rechnungshöhe</dd>
<dd>Status</dd>
<dd>Bezahldatum</dd>
<dt>58763387</dt>
<dt><img src="../bilder/bilder_fremdprobleme/2014_06_14_yael_dl_liste_01.jpg" alt="Adobe Icon" /></dt>
<dd>11.01.2014</dd>
<dd>12.50</dd>
<dd>bezahlt</dd>
<dd>14.01.2014</dd>
<dt>58767441</dt>
<dt><img src="../bilder/bilder_fremdprobleme/2014_06_14_yael_dl_liste_01.jpg" alt="Adobe Icon" /></dt>
<dd>15.02.2014</dd>
<dd>12.50</dd>
<dd>bezahlt</dd>
<dd>18.02.2014</dd>
</dl>
Abstände, Farben, Schriftarten, -formatierungen u.a. können natürlich noch angepasst werden.
Hier der Link zu der Beispielseite:
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_01_dl_liste.html
Gruss
MrMurphy
Mahlzeit,
Der HTML-Quellcode ist simpel und Übersichtlich:
Dann hast du den falschen gepostet.
Abstände, Farben, Schriftarten, -formatierungen u.a. können natürlich noch angepasst werden.
Um die Liste wie eine Tabelle aussehen zu lassen?
Guten Abend,
Hier der Link zu der Beispielseite:
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_01_dl_liste.html
vielen Dank für dein klasse Beispiel, stimmt vom HTML Code ist es wirklich nicht schwer zu verstehen, allerdings beim CSS Code ist es doch verdammt viel zu schreiben, hätte ich nicht gedacht für eine kleine Auflistung fast 150 Zeilen Code zu schreiben. Dieser Aufwand steht doch in keinem Verhältnis? Machst du all deine Design so aufwändig?
Hallo,
an dem CSS ist nichts aufwändiges.
Das Entscheidene ist doch, das gleich alles abgefangen wird. Es ist vollkommen egal, um wie viele Rechnungen der HTML-Quellcode erweitert wird, die Darstellung / das Layout passt sich immer an.
Und so einen CSS-Code muss man ja nur einmal erstellen und kann ihn dann immer wieder verwenden. Nur wenn die Breite oder die Anzahl der Spalten geändert werden muss sind kleinere Änderungen notwendig.
Zudem ist die Forderung erfüllt, das HTML und CSS so weit wie möglich getrennt werden sollen. Auf id und class habe ich verzichtet.
Wie du bereits erkannt hast können im HTML problemlos weitere Informationen (in diesem Fall = Rechnungen) hinzugefügt werden, ohne das der Eintipper die Übersicht verliert. Darauf kommt es doch, neben den bereits in meinem vorigen Beitrag erwähnten Vorteilen, an.
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_02_dl_liste.html
Am CSS muss dazu nichts mehr geändert werden.
Wenn die Tabellenbefürworter eine bessere Lösung haben können sie die ja gerne konkret vorstellen - bloß da wird nichts kommen. Zu theoretisieren ist halt einfacher als konkrete Lösungen zu bieten.
Gruss
MrMurphy
Wie du bereits erkannt hast können im HTML problemlos weitere Informationen (in diesem Fall = Rechnungen) hinzugefügt werden, ohne das der Eintipper die Übersicht verliert. Darauf kommt es doch, neben den bereits in meinem vorigen Beitrag erwähnten Vorteilen, an.
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_02_dl_liste.html
Das gefällt mir ehrlich gesagt sehr gut, hab es mir auch mal mit dem Handy angeschaut und es passt sich wirklich sehr schön an, hätte ich nicht gedacht.
Wäre es denn möglich zu sagen, auf keinen Geräten kann das PDF weg, denn auf einem Handy muss es wirklich nicht sein, sich eine Rechnung herunterzuladen oder siehst du das anderes? Schön ist an deiner Lösung wirklich, dass man alle Daten angezeigt bekommt, vor allem schön geordnet.
Noch eine Frage, wie sieht dieses mit der Unterstützung aller Browser aus, also Firefox, Internetexplorer, Safari, Chrome, iPhone, Android und Tablets. Wie weit sollte man in den Browser zurück gehen? 1-2 Versionen? Das wäre im IE maximal bis IE 10/9
Hallo
Noch eine Frage, wie sieht dieses mit der Unterstützung aller Browser aus
Sehr gut.
Ich habe auf float zurückgegriffen, das alle aktuellen Browser verstehen.
Im IE8 müsste man auf Klassen (class) zurückgreifen, da er mit nth-child nicht zurechtkommt. Das ist aber nur etwas Fleißarbeit, am Prinzip ändert sich nichts. Der HTML-Quelltext würde halt etwas unübersichtlicher werden.
Wäre es denn möglich zu sagen, auf keinen Geräten kann das PDF weg
Kein Problem. Ich habe ja geschrieben, das ich alles flexibel gestaltet habe. Dazu ist nur eine zusätzliche CSS-Anweisung in dem passenden Media-Query notwendig:
dl :nth-child(6n+7) {
display: none;
}
Im praktischen Beispiel habe ich das mal für die schmalste Fensterbreite angepasst, das pdf-Symbol wird dort nicht mehr angezeigt:
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_03_dl_liste.html
Gruss
MrMurphy
@@MrMurphy:
nuqneH
Noch eine Frage, wie sieht dieses mit der Unterstützung aller Browser aus
Sehr gut.
Ach ja?? Wie sieht’s denn mit der Unterstützung von Screenreadern? Kann ein Screenreader die Beziehung des n-ten Datensatzes eines Blocks zur n-ten Bezeichnung (Spaltenüberschrift) herstellen?
Bei deinem verhunzten Markup wohl kaum.
Bei sinnvoller Auszeichnung (d.h. als Tabelle) sollte er das können.
Qapla'
Hallo,
Im praktischen Beispiel habe ich das mal für die schmalste Fensterbreite angepasst, das pdf-Symbol wird dort nicht mehr angezeigt:
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_03_dl_liste.html
Schau mal was er bei mir macht, wenn ich das Fenster von klein nach groß ziehe, aktuell mit dem Firefox getestet.
Mahlzeit,
Schau mal was er bei mir macht, wenn ich das Fenster von klein nach groß ziehe, aktuell mit dem Firefox getestet.
Ja, er macht genau das, was er soll. Dass du versuchst, eine Tabelle mit einer Liste nachzubilden, dafür kann der Browser nix. Ein Auto wird auch kein Hubschrauber, nur weil du im Fahrzeugschein das "Fahrzeug geschlossen" in "Fluggerät mit Rotor" änderst.
Hallo,
das ist ein Firefox-Bug, der in der Praxis keine Rolle spielt. Oder änderst du die Seitenbreite, wenn du im Internet Rechnungen abrufen willst?
Da float in allen Browsern seit über 10 Jahren problemlos funktioniert wird Firefox mit den nth-child Probleme haben.
Ansonsten einfach mal die F5-Taste drücken.
Gruss
MrMurphy
Hallo,
ich haben den Firefox-Bug gefunden und die ausführende Anweisung gelöscht. Die befand sich in meinen Standardeinstellungen. Meine ersten drei Beispiele funktionieren jetzt problemlos auch im Firefox.
Außerdem habe ich ein viertes Beispiel mit Klassen (class) erstellt. Das dazu nur die nth-child gegen Klassen ausgetauscht werden müssen hatte ich ja bereits geschrieben. Wer Klassen gewohnt ist kommt damit besser zurecht und technisch macht es keinen Unterschied.
Damit kommt auch der IE 8 zurecht. Der kommt erst ins Straucheln wenn die Media Queries greifen sollten, da er die nicht kennt. Aber die IE 8 wird meist 'eh nur auf Desktop-Monitoren ausgeführt.
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_04_dl_liste.html
Gruss
MrMurphy
@@Bug beseitigt:
nuqneH
Meine ersten drei Beispiele funktionieren jetzt problemlos auch im Firefox.
Und jetzt könntest du wirklich aufhören, deinen Unsinn zu verbreiten.
„die Erfahrung zeigt leider, das Seitenersteller, die es nicht mal auf die Reihe bekommen, Tabellendaten zu erkennen …“ Sagte wer?
Qapla'
Mahlzeit,
Ich habe auf float zurückgegriffen, das alle aktuellen Browser verstehen.
Du simulierst also die Darstellung einer Tabelle mit Elementen, die dafür nicht gedacht sind und zwingst ihnen eine Position auf die hier völlig falsch ist?
Gut, dass du kein Lehrer bist, die Schüler würden alle durchfallen.
Hallo,
Gut, dass du kein Lehrer bist, die Schüler würden alle durchfallen.
... oder durchdrehen.
Ciao,
Martin
Mahlzeit,
... oder durchdrehen.
Das wäre ein Fall wo ich einen Schüler verstehen würde, wenn er Amok läuft ...
Wenn die Tabellenbefürworter eine bessere Lösung haben können sie die ja gerne konkret vorstellen
https://forum.selfhtml.org/?t=217714&m=1496289
https://forum.selfhtml.org/?t=217714&m=1496285
Mathias
Hallo,
was bitte sehr ist an deinen Links konret? Damit meine ich eine Seite mit Yaels Daten erstellen und hier im Vergleich zu meiner Lösung zum Vergleich veröffentlichen.
Wenn das mit Tabellen so einfach ist kann das ja kein Problem sein.
Aber da wird nichts kommen.
Gruss
MrMurphy
Mahlzeit,
Wenn das mit Tabellen so einfach ist kann das ja kein Problem sein.
Das hat nichts mit einfach zu tun, sondern damit, dass es sich eindeutig um tabellarische Daten handelt. Eine Liste ist hier falsch.
Hallo,
Damit meine ich eine Seite mit Yaels Daten erstellen und hier im Vergleich zu meiner Lösung zum Vergleich veröffentlichen.
Du hast dir also mein Posting nicht angesehen. Das ist schade, denn ich habe mir Mühe gegeben. Mehr als es posten und darauf zu verlinken kann ich nicht.
Aber da wird nichts kommen.
Ich verstehe nicht, warum du hier ablästerst. Es gab gute Hinweise und konkrete Beispiele von verschiedenen Seiten. Ich hoffe, dass die Yael und anderen Mitlesenden weiterhelfen. Niemand hat behauptet, dass es einfach und problemfrei wäre. Gerne können wir Details erörtern.
Peace!
Grüße
Mathias
Om nah hoo pez nyeetz, MrMurphy!
Wenn das mit Tabellen so einfach ist kann das ja kein Problem sein.
Aber da wird nichts kommen.
http://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Responsive_Tabelle_5.html
Matthias
@@Yael:
nuqneH
vielen Dank für dein klasse Beispiel,
Häh? Auf das Beispiel passt ein anderes Wort auf …sse, schreibt sich aber eigentlich mit ß.
stimmt vom HTML Code ist es wirklich nicht schwer zu verstehen
Doch. Mir ist es völlig unverständlich, wie man solchen Schwachsinn ernsthaft in Betracht ziehen kann.
Wie mehrfach in diesem Thread gesagt: Zur Auszeichnung von tabellarischen Daten – und du hast solche! – ist alles andere als table mit (colgroup, col, thead, tfoot,) tbody, tr, th, td falsch.
Wenn MrMurphy das nicht wahrhaben will, sein Ding. Aber lass dich nicht von ihm auf die Dunkle Seite der Macht ziehen!
Qapla'
Mahlzeit,
Wenn MrMurphy das nicht wahrhaben will, sein Ding. Aber lass dich nicht von ihm auf die Dunkle Seite der Macht ziehen!
Langsam hab ich den Eindruck, MrMurphy und Yael sind ein und derselbe. Denn anders kann ich es mir nicht erklären, dass der OP die einzig falsche "Lösung" hier im Thread als die einzig gute ansieht.
Hallo,
Langsam hab ich den Eindruck, MrMurphy und Yael sind ein und derselbe. Denn anders kann ich es mir nicht erklären, dass der OP die einzig falsche "Lösung" hier im Thread als die einzig gute ansieht.
Nein bin ich 100% nicht! Aber hast du das Beispiel von MrMurphy mal auf einem Handy angeschaut, es wird alles schön angeordnet. Mit einer Tabelle habe ich auch meine Probleme. Ich muss diese Formatieren, es müssen Abstände rein usw.
Hab halt immer von unserem Prof der Satz im Kopf, lasst die Tabellen weg wenn ihr eine Seite macht, egal privat oder Geschäftlich, ihr fallt auf die Schnauze. Tabellen sind auch schlecht, wenn es um Barrierefreiheit geht.
Wie in meinem zweiten Posting schon geschrieben ich bin hin und her gerissen.
@@Yael:
nuqneH
Aber hast du das Beispiel von MrMurphy mal auf einem Handy angeschaut, es wird alles schön angeordnet.
Das erreichst du mit einer Tabelle auch, wie mein Beispiel zeigt und wie es auch molily erläuterte.
Mit einer Tabelle habe ich auch meine Probleme. Ich muss diese Formatieren, es müssen Abstände rein usw.
dl, dt, dd musst du auch stylen; da müssen vom Browser vorgegebene Abstände raus.
Hab halt immer von unserem Prof der Satz im Kopf, lasst die Tabellen weg wenn ihr eine Seite macht, egal privat oder Geschäftlich, ihr fallt auf die Schnauze.
Prof für eine Geisteswissenschaft, nehme ich an.
Tabellen sind auch schlecht, wenn es um Barrierefreiheit geht.
Layout-„Tabellen“ – ja. Tabellen für tabellarische Daten – nein. Im Gegenteil: Sie sind gut.
Wie in meinem zweiten Posting schon geschrieben ich bin hin und her gerissen.
Wärst du das auch noch, wenn über den Beiträgen von MrMurphy stehen würde „3 fachlich nicht hilfreich“?
Qapla'
Mahlzeit,
Aber hast du das Beispiel von MrMurphy mal auf einem Handy angeschaut, es wird alles schön angeordnet.
Das macht es aber nicht richtiger. Eine Seite mit einem Tabellen-Layout oder Frames kann auch gut aussehen, deshalb ist die verwendete Technik aber noch lange nicht die richtige.
Mit einer Tabelle habe ich auch meine Probleme. Ich muss diese Formatieren, es müssen Abstände rein usw.
Dieses Argument kommt auch heute noch von denen, die Frames und Tabellen zu Layout-Zwecken nutzen.
Das es mit einer Tabelle genauso funktioniert, haben schon viele Leute bewiesen.
Hab halt immer von unserem Prof der Satz im Kopf, lasst die Tabellen weg wenn ihr eine Seite macht, egal privat oder Geschäftlich, ihr fallt auf die Schnauze. Tabellen sind auch schlecht, wenn es um Barrierefreiheit geht.
Dan hat dein Prof keine Ahnung oder du hast nicht richtig zugehört, dass er nur die Verwendung als Layouthilfe gemeint hat.
Durch eine Tabelle navigiert ein Screenreader besser als durch so eine Liste.
Wurde im Übrigen in diesem Thread auch schon erwähnt, nur so nebenbei.
Also frag deinen Prof nochmal und wenn er dir sagt, das Tabellen pauschal schlecht sind, kannst du ihm ausrichten, er soll sich nen anderen Job suchen, denn als Lehrer ist er in diesem Fachbereich unfähig.
Hallo,
Hab halt immer von unserem Prof der Satz im Kopf, lasst die Tabellen weg wenn ihr eine Seite macht, egal privat oder Geschäftlich, ihr fallt auf die Schnauze.
Anscheinend hat er nicht den fundamentalen Unterschied zwischen Layouttabellen und echten Datentabellen verstanden.
Tabellen sind auch schlecht, wenn es um Barrierefreiheit geht.
Das Gegenteil ist der Fall.
Datentabellen sind, wenn sie korrekt ausgezeichnet sind, eine Wohltat für assistive Techniken wie Screenreader. Sie machen komplexe tabellarische Inhalte auf eine komfortable Weise zugänglich, wie es keine andere Art der Textauszeichnung erlaubt. Das sollte jeder einmal mit JAWS, Window-Eyes, NVDA oder VoiceOver ausprobieren, um den Unterschied zu sehen/hören. Das Beispiel mit dl ist wahrscheinlich verwirrend für Screenreader-Nutzer, weil der Kontext zu einer Informationseinheit fehlt. In einer Tabelle wird der Kontext durch die Zugehörigkeit zu Reihe und Spalte sowie durch die Reihen- und Spaltenheader bereitgestellt.
Die maßgeblichen Standard und Best Practices sind hier:
Der wichtigste Accessibility-Standard im Web: Web Content Accessibility Guidelines 2.0. Dieser ist sehr abstrakt und formuliert Grundziele.
Dazu gibt es die konkreten WCAG Techniques, die die Anwendung in HTML und CSS erläutern. Folgende Richtlinien betreffen barrierefreie Tabellen:
Einschlägige Sekundärquellen:
Mittlerweile sind assistive Techniken sehr gut darin, reine Layouttabellen von Datentabellen zu unterscheiden. Wenn eine Website sich an die genannten Richtlinien hält, die schon seit der WCAG 1.0 von 1999 existieren, sind Datentabellen äußerst hilfreich im Vergleich zu lose strukturierten Auflistungen.
Grüße
Mathias
@@MrMurphy:
nuqneH
Der HTML-Quellcode ist simpel und Übersichtlich:
und völlig daneben.
<dl class="clearfix">
Dass "clearfix" darstellungsbezogen ist und demzufolge nichts im HTML zu suchen hat, sei hier am Rande erwähnt.
<dt>Rechnungsnummer</dt>
<dd>Rechnungsdatum</dd>
<dd>Rechnungshöhe</dd>
<dd>Status</dd>
<dd>Bezahldatum</dd>
Die Bezeichnungen Rechnungsdatum, Rechnungshöhe, Status und Bezahldatum beziehen sich nicht auf die Bezeichnung Rechnungsnummer, sondern alles sind gleichartige Dinge (sollten im Markup also Elemente gleichen Typs sein), und zwar sind es Beschreibungen/Überschriften für Daten (innerhalb von dl müssten es dann alles dt sein, was aber so nicht geht, da nachfolgende dd sich nicht auf die Gruppe dieser Überschriften beziehen, sondern jeweils auf eine).
Die sinnvolle Auszeichnung wären th-Elemente innerhalb eines tr-Elements (innerhalb von thead).
<dt>58763387</dt>
<dt><img src="../bilder/bilder_fremdprobleme/2014_06_14_yael_dl_liste_01.jpg" alt="Adobe Icon" /></dt>
<dd>11.01.2014</dd>
<dd>12.50</dd>
<dd>bezahlt</dd>
<dd>14.01.2014</dd>
dl, dt, dd wäre angebracht, wenn auf verschiedene dt jeweils unterschiedliche dd folgen, s. Codebeispiel fürs dd-Element. In dem Fall kann es aber keine Spaltenüberschriften Rechnungsnummer, Rechnungsdatum, Rechnungshöhe, Status, Bezahldatum geben.
Dieser Fall ist hier nicht gegeben; alle Blöcke haben identische Struktur. Sie sind damit im Markup als tr mit th/td (innerhalb von tbody) adäquat ausgezeichnet.
Manchmal ist eine Tabelle einfach nur eine Tabelle.
Qapla'
Bereits seit dem Jahr 2000 gibt es keinen Grund, Tabellen zum Layouten zu mißbrauchen.
2002 vielleicht... 2000 aber waren Layouttabellen noch nötig.
Hallo,
Deine Daten sind aber eindeutig Listendaten.
Genau. Nur was für welche? Eine Tabelle ist auch eine Liste. Eine mehrdimensionale mit mehreren Informationseinheiten pro Listeneintrag. Und alle Einträge haben dieselbe Struktur, dieselben Dimensionen.
Korrekt wäre die Verwendung eines Listenelements -
Ja, table. :)
Grüße
Mathias
HI there,
Deine Daten sind aber eindeutig Listendaten. Damit ist die Verwendung einer Tabelle zur Anzeige ein typischer Mißbrauch zum Layouten.
sorry aber - Blödsinn. Etwas Tabellenartigeres als das vom OP Gezeigte kann es ja wohl nicht geben. Was mich nur wundert, daß die die Leute hier mittlerweile offenbar um Erlaubnis fragen. ob sie Tabellen verwenden dürfen. Wenn man Deine allerdings komische Antwort bedenkt, ist nicht einmal das überraschend.
Oder, um eine Gegenfrage zu stellen: was bitte ist denn dann in Deinen Augen eine Tabelle?
Oder, um eine Gegenfrage zu stellen: was bitte ist denn dann in Deinen Augen eine Tabelle?
;)
Mathias
Mahlzeit,
Deine Daten sind aber eindeutig Listendaten. Damit ist die Verwendung einer Tabelle zur Anzeige ein typischer Mißbrauch zum Layouten.
Muss ich dir recht geben. Ich benutz für solche Daten immer eine Listenkalkulation, wie Excel ...
Korrekt wäre die Verwendung eines Listenelements - hier sinnvollerweise des dl-Elements.
Gib mal ein semantisch sinnvolles Beispiel dazu, ich bin sicher nicht der Einzige, den das interessiert.
Om nah hoo pez nyeetz, M.!
Korrekt wäre die Verwendung eines Listenelements - hier sinnvollerweise des dl-Elements.
Gib mal ein semantisch sinnvolles Beispiel dazu, ich bin sicher nicht der Einzige, den das interessiert.
<dl>
<dt>Buch</dt>
<dd>Heute schauen alle Fußball</dd>
<dd>334 Seiten</dd>
<dd>erschienen 1988</dd>
<dt>Autor</dt>
<dd>Max Mustermann</dd>
<dd>1934 - 2003</dd>
</dl>
Matthias
Mahlzeit,
<dl>
<dt>Buch</dt>
<dd>Heute schauen alle Fußball</dd>
<dd>334 Seiten</dd>
<dd>erschienen 1988</dd>
<dt>Autor</dt>
<dd>Max Mustermann</dd>
<dd>1934 - 2003</dd>
</dl>
Das ist eine Liste, sowas gehört auch nicht in eine Tabelle. Ich wollte aber semantisch sinnvoll ein Beispiel wie die Daten des OP in eine Liste passen ;)
--
42
@@Yael:
nuqneH
vielen sagen KEINE Tabellen in 2014, aber ich bin der Meinung NICHT immer sind Tabellen schlecht.
Mitunter ist etwas alles andere als eine Tabelle schlecht. So wie hier. Das war 2004 so. Das ist auch 2014 so. Und das wird auch 2024 noch so sein.
Qapla'
Hallo und guten Tag,
Mitunter ist etwas alles andere als eine Tabelle schlecht. So wie hier. Das war 2004 so. Das ist auch 2014 so. Und das wird auch 2024 noch so sein.
Ich kann diesen Link leider nicht aufrufen, es kommt dass ich ein Passwort und Benutzername eingeben muss, hab ich leider nicht.
@@Yael:
nuqneH
Ich kann diesen Link leider nicht aufrufen, es kommt dass ich ein Passwort und Benutzername eingeben muss, hab ich leider nicht.
Oh, da bin ich wieder mal auf die dumme Forumsoftware reingefallen.
Ohne Registrierung hier entlang: ohne my/ im URI.
Qapla'
Hallo,
Sollte ich für diese Darstellung eine Tabelle nehmen?
Erbsenzählerei: HTML zeichnet den Text passend aus, für die Darstellung ist CSS zuständig. Insofern ist die erste Frage, das das geeignete Markup für den Inhalt ist, die zweite, ob und wie damit die gewünschte Darstellung erreicht werden kann.
Nun bringen Tabellen gleich ein Standard-Layout mit sich, drücken aber in erster Line eine inhaltliche Verbindung aus, sodass alternative Präsentationen möglich sind (z.B. eine verbesserte Navigation in Screenreadern).
Und wie verhält sich dieses wenn ich eine Seite kleiner mache?
Dann serialisierst du die Tabelle mit einer Media-Query, die die display-Eigenschaften der Tabellenelemente überschreibt.
table, thead/tbody, tr, td haben standardmäßig spezielle display-Werte, nämlich table, table-header-group/table-row-group, table-row, table-cell. Siehe:
http://css-tricks.com/almanac/properties/d/display/
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
http://www.w3.org/TR/CSS2/sample.html
Wenn du diese auf block, inline oder inline-block setzt (je nachdem, wie die serialisierte Tabelle aussehen soll), dann fällt das Layout in sich zusammen und die Elemente werden untereinander oder direkt nebeneinander positioniert.
Das schließt nicht aus, dass du Elemente nicht noch anders layoutest, damit sie den schmalen Viewport effektiv nutzen. Beispiel:
http://codepen.io/molily/pen/nGCxA?editors=110
Grüße
Mathias
vielen sagen KEINE Tabellen in 2014
viele haben eben auch KEINE Ahnung :-)
Mahlzeit,
vielen sagen KEINE Tabellen in 2014, aber ich bin der Meinung NICHT immer sind Tabellen schlecht.
Grundsätzlich solltest du Pauschalaussagen immer hinterfragen. Das ist pauschal immer so :D
Hallo,
Grundsätzlich solltest du Pauschalaussagen immer hinterfragen. Das ist pauschal immer so :D
... und Pauschalaussagen sind *immer* falsch. ;-)
Ciao,
Martin
Schau mal, ob dieses eine Option ist
<table>
<tr>
<th>Rechnungsnummer</th><th>Rechnungsdatum</th><th>Rechnungshöhe</th><th>Status</th>
</tr>
<tr>
<td><a href="#">123456789</a></td><td>14.06.2014</td><td>12,50 €</td>
<td>bezahlt</td>
</tr>
<tr>
<td><a href="#">101112131415</a></td><td>14.05.2014</td><td>12,50 €</td>
<td>offen</td>
</tr>
</table>
table {
border-collapse: collapse;
}
td {
padding: 10px;
}
@media only screen and (max-width: 600px) {
table, td, tr {
display: block;
}
th {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ddd;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
td:before {
position: absolute;
top: 10px;
left: 3px;
width: 30%;
}
td:nth-of-type(1):before { content: "Re. Nr.:"; }
td:nth-of-type(2):before { content: "Re. Datum"; }
td:nth-of-type(3):before { content: "Re. Höhe"; }
td:nth-of-type(4):before { content: "Re. Status"; }
}
Frag mal an deiner Uni einen zweiten Dozenten glaub mir, du wirst zwei verschiedene Meinungen haben. Und glaub mir auch, dass viele Dozenten keine Ahnung haben was draußen sich abspielt. Einmal gelernt, nie wieder weitergebildet.
Werde wohl erst einmal bei einer Tabelle bleiben. Die Liste von MrMurphy werde ich für etwas anderes verwenden. Ihr schreibt immer wieder etwas von Zusammenhänge, ist dieses HTML so in Ordnung?
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>Rechnungsnummer</td>
<td>Rechnungsdatum</td>
<td>Rechnungshöhe</td>
<td>Status</td>
</tr>
<tr>
<td><img src="icons/pdf.png" alt="PDF" style="padding-right:10px;"><a href="#">Re - 001</a></td>
<td>15.06.2014</td>
<td>12,50 €</td>
<td><span class="payed">bezahlt</span></td>
</tr>
</tbody>
</table>
@@Yael:
nuqneH
Werde wohl erst einmal bei einer Tabelle bleiben.
Fehler. Nicht „erstmal“, sondern für immer. Und ewig. Amen.
ist dieses HTML so in Ordnung?
Nein.
<table cellpadding="5" cellspacing="0" border="0" width="100%">
Darstellung gehört nicht ins HTML, sondern ins Stylesheet. Weg mit den präsentationsbezogenen Attributen!
<tbody>
<tr>
<td>Rechnungsnummer</td>
<td>Rechnungsdatum</td>
<td>Rechnungshöhe</td>
<td>Status</td>
</tr>
Die Spatenüberschriften sind th und gehören in den thead. Das sagte ich übrigens schon.
<tr> <td><img src="icons/pdf.png" alt="PDF" style="padding-right:10px;"><a href="#">Re - 001</a></td>
Die erste Zelle jeder Zeile ist ebenfalls eine Kopfzelle, also th.
Darstellung gehört nicht ins HTML, sondern ins Stylesheet. Weg mit dem style-Attribut!
Qapla'
Die Spatenüberschriften sind th und gehören in den thead. Das sagte ich übrigens schon.
Also so?
<table>
<tbody>
<tr>
<th>Rechnungsnummer</th>
<th>Rechnungsdatum</th>
<th>Rechnungshöhe</th>
<th>Status</th>
</tr>
<tr>
<td><img src="icons/pdf.png" alt="PDF"><a href="#">Re - 001</a></td>
<td>17.06.2014</td>
<td>12,50 €</td>
<td><span class="payed">bezahlt</span></td>
</tr>
</tbody>
</table>
@@Yael:
nuqneH
Die Spatenüberschriften sind th und gehören in den thead. Das sagte ich übrigens schon.
Also so?
Äh, wo ist denn dein thead?
Und
Die erste Zelle jeder Zeile ist ebenfalls eine Kopfzelle, also th.
musst du auch überlesen haben.
<table>
<thead>
<tr>
<th>Rechnungsnummer</th>
<th>Rechnungsdatum</th>
<th>Rechnungshöhe</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<th><img src="icons/pdf.png" alt="PDF"><a href="#">Re - 001</a></th>
<td>17.06.2014</td>
<td>12,50 €</td>
<td><span class="payed">bezahlt</span></td>
</tr>
</tbody>
</table>
Qapla'
Moin,
Also so?
<td><span class="payed">bezahlt</span></td>
nein, das Partizip von "pay "schreibt sich "paid".
Ciao,
Martin
Hello,
Die erste Zelle jeder Zeile ist ebenfalls eine Kopfzelle, also th.
Wieso?
Gilt das nur für HTML5 oder generell?
Verwunderte Grüße aus dem schönen Oberharz
Tom vom Berg
Om nah hoo pez nyeetz, Tom!
Die erste Zelle jeder Zeile ist ebenfalls eine Kopfzelle, also th.
Wieso?
In der ersten Spalte steht (in diesem Beispiel!) die Rechnungsnummer. (vergleichbar mit der ID in einer Datenbank) Alle folgenden Informationen in dieser Zeile gehören zur Rechnung mit genau dieser ID.
Gilt das nur für HTML5 oder generell?
generell, aber nur wenn die erste Zelle jeder Zeile tatsächlich eine Kopfzelle ist ;-)
Matthias
Hello Matthias,
Die erste Zelle jeder Zeile ist ebenfalls eine Kopfzelle, also th.
Wieso?In der ersten Spalte steht (in diesem Beispiel!) die Rechnungsnummer. (vergleichbar mit der ID in einer Datenbank) Alle folgenden Informationen in dieser Zeile gehören zur Rechnung mit genau dieser ID.
Gilt das nur für HTML5 oder generell?
generell, aber nur wenn die erste Zelle jeder Zeile tatsächlich eine Kopfzelle ist ;-)
Aber die Rechnungsnummer stellt DATA dar!
Wie würdest Du das übersetzen?
<!-- TH is for headers, TD for data, but for cells acting as both use TD -->
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
Hallo,
generell, aber nur wenn die erste Zelle jeder Zeile tatsächlich eine Kopfzelle ist ;-)
Aber die Rechnungsnummer stellt DATA dar!
ja und? Es ist nicht immer sinnvoll, Nutzdaten und Hilfsdaten streng zu trennen.
<!-- TH is for headers, TD for data, but for cells acting as both use TD -->
Das wäre der Grenzfall, den ich meinte, und widerspricht Gunnars Ansicht. Ich bin allerdings eher geneigt, ihm zuzustimmen und würde auch für th plädieren, wenn der Inhalt der Zelle kennezichnenden oder ordnenden Charakter hat, kurz: wenn er geeignet ist, den Datensatz zu identifizieren.
Ebenso würde ich einer Tabelle in einer DB keine zusätzliche ID-Spalte hinzufügen, wenn die Nutzdaten bereits ein eindeutiges Merkmal je Datensatz haben.
Ciao,
Martin
@@Tom:
nuqneH
Die erste Zelle jeder Zeile ist ebenfalls eine Kopfzelle, also th.
Gilt das nur für HTML5 oder generell?
2× nein.
Mit HTML5 hat das nichts zu tun; das war schon immer[tm] so.
Und nicht generell, sondern wenn die Zelle die Funktion einer Überschrift für die Datenzellen der Zeile hat (was oft der Fall ist).
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Mit HTML5 hat das nichts zu tun; das war schon immer[tm] so.
Hast du unser schönes ™ noch nicht gefunden?
Matthias
Werde wohl erst einmal bei einer Tabelle bleiben. Die Liste von MrMurphy werde ich für etwas anderes verwenden. Ihr schreibt immer wieder etwas von Zusammenhänge, ist dieses HTML so in Ordnung?
Bevor ich ausgiebig dein HTML kritisiere, verweise ich ein weiteres Mal auf mein Beispiel…
https://forum.selfhtml.org/?t=217714&m=1496289
http://codepen.io/molily/pen/nGCxA?editors=110
Ist das Posting für euch alle unsichtbar? Ist das die berüchtigte mod_gummizelle des CForums? ;-)
Möge die Nacht mit euch sein!
Mathias
Om nah hoo pez nyeetz, molily!
Bevor ich ausgiebig dein HTML kritisiere, verweise ich ein weiteres Mal auf mein Beispiel…
https://forum.selfhtml.org/?t=217714&m=1496289
http://codepen.io/molily/pen/nGCxA?editors=110
Oder auf das aus dem Wiki. Das ist ähnlich wie deins aufgebaut, liefert ein paar mehr Optionen und passende Erläuterungen dazu.
Es wurde ebenfalls schon mehrmals erwähnt, lässt sich auf das Beispiel ohne Probleme übertragen und liefert nicht mehr CSS-Aufwand als McMurphys Listen.
Nur so nebenbei: Der Verzicht auf Klassen ist in diesem Fall besonders heikel. Natürlich soll die Klasse dann nicht Spalte1 heißen, sondern etwas über den Inhalt des dl-Elementes aussagen. In Tabellen hingegen ist diese Zuordnung über die entsprechenden th Elemente quasi von selbst gegeben.
Matthias