|
|||
Wie setze ich diese Tabelle am besten um?
Ich möchte eine - möglichst barrierefreie - Tabelle erstellen. Wie die Tabelle aussehen soll, hab ich als Bild angehängt.
Das Problem ist, dass in der Headzeile Titel bzw. Spaltenüberschriften stehen und in der ersten Spalte ganz unten auch Zeilenüberschriften. Ich weiß nicht, wie man das ganze so umsetzt, dass auch ein Screenreader mit der Tabelle klarkommt. - Schaut euch einfach das Bild an, dann wisst ihr schon was ich meine... Bin für alle Vorschläge offen... Gruß, MK. |
Sponsored Links |
|
|||
Wo siehst du eine Definitionsliste??
Eine Definitionsliste hat doch einen ganz anderen Einsatzbereich. In der Regel bestehen sie aus einer Reihe von Einträgen, die aus einem zu definierden Ausdruck und der entsprechenden Definition bestehen, wie z.B. bei einem Glossar. Also meiner Meinung nach, ist das ganze doch eine Tabelle! Gruß, MK. |
|
|||
das ist auf jeden Fall eine Tabelle. Am besten du setzt es mit thead, tfoot und tbody um. Siehe Vorsprung durch Webstandards | Ein Herz für Tabellen für mehr Infos dazu.
griass, Michael |
|
|||
Diese Einteilung für Tabellen kenne ich schon. Aber das Problem ist ja, dass ich nicht nur eine Zeile mit Titelzellen habe (was ja dann der thead wäre), sonder in der ersten Spalte die letzten 3 Einträge auch noch Titelzellen sind. (nur das sie keine Titel für Spalten sind, sondern Titel für die drei letzten Zeilen)
Aus diesem Grund habe ich auch diese Frage hier gestellt, da ich meine, dass man bei dieser Tabelle nicht die normale Gliederung (thead, tfoot, tbody) nehmen kann. Gruß, MK. |
|
|||
Du müsstest schon erstmal was machen, damit man drüber reden kann. Was hast du denn recherchiert zum Thema barrierearme Tabellen? Hast du wirklich die Artikelserie bei efa nicht gefunden?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Also hier ist mein Tabellenvorschlag:
HTML-Code:
<table summary="Übersicht über den Inhalt des Warenkorbs, inklusive Versandkosten."> <caption>Warenkorb</caption> <colgroup span="6" /> <thead> <tr> <th></th> <th id="position" scope="col">Position</th> <th id="hoehe" scope="col">Höhe</th> <th id="breite" scope="col">Breite</th> <th id="preis" scope="col">Preis</th> <th id="loeschen" scope="col">Löschen</th> </tr> </thead> <tfoot> <tr> <th id="gesamtpreis" scope="row">Gesamtpreis</th> <td></td> <td></td> <td></td> <td headers="gesamtpreis">710,00 €</td> <td></td> </tr> <tr> <th id="versand" scope="row">Versandkosten</th> <td></td> <td></td> <td></td> <td headers="versand">12,00 €</td> <td></td> </tr> <tr> <th id="endpreis" scope="row">Endpreis</th> <td></td> <td></td> <td></td> <td headers="endpreis">722,00 €</td> <td></td> </tr> </tfoot> <tbody> <tr> <td></td> <td headers="position">1</td> <td headers="hoehe">2566 mm</td> <td headers="breite">1895 mm</td> <td headers="preis">250,00 €</td> <td headers="loeschen">X</td> </tr> <tr> <td></td> <td headers="position">2</td> <td headers="hoehe">3599 mm</td> <td headers="breite">2055 mm</td> <td headers="preis">300,00 €</td> <td headers="loeschen">X</td> </tr> <tr> <td></td> <td headers="position">3</td> <td headers="hoehe">1589 mm</td> <td headers="breite">400 mm</td> <td headers="preis">160,00 €</td> <td headers="loeschen">X</td> </tr> </tbody> </table> Gruß, MK. Geändert von made.by.kaufmann (08.01.2010 um 12:07 Uhr) |
|
|||
Wenn du dir durchliest, was efa zur Aufgabe des tfood-Elements schreibt: Hältst du wirklich für sinnvoll, was du damit machst?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Hmm, stimmt eigentlich. tfoot ist da nicht ganz so geeignet!
Dann versuch ich´s mal so: HTML-Code:
<table summary="Übersicht über den Inhalt des Warenkorbs, inklusive Versandkosten."> <caption>Warenkorb</caption> <colgroup span="6" /> <thead> <tr> <th></th> <th id="position" scope="col">Position</th> <th id="hoehe" scope="col">Höhe</th> <th id="breite" scope="col">Breite</th> <th id="preis" scope="col">Preis</th> <th id="loeschen" scope="col">Löschen</th> </tr> </thead> <tbody> <tr> <td></td> <td headers="position">1</td> <td headers="hoehe">2566 mm</td> <td headers="breite">1895 mm</td> <td headers="preis">250,00 €</td> <td headers="loeschen">X</td> </tr> <tr> <td></td> <td headers="position">2</td> <td headers="hoehe">3599 mm</td> <td headers="breite">2055 mm</td> <td headers="preis">300,00 €</td> <td headers="loeschen">X</td> </tr> <tr> <td></td> <td headers="position">3</td> <td headers="hoehe">1589 mm</td> <td headers="breite">400 mm</td> <td headers="preis">160,00 €</td> <td headers="loeschen">X</td> </tr> <tr> <th id="gesamtpreis" scope="row">Gesamtpreis</th> <td></td> <td></td> <td></td> <td headers="gesamtpreis">710,00 €</td> <td></td> </tr> <tr> <th id="versand" scope="row">Versandkosten</th> <td></td> <td></td> <td></td> <td headers="versand">12,00 €</td> <td></td> </tr> <tr> <th id="endpreis" scope="row">Endpreis</th> <td></td> <td></td> <td></td> <td headers="endpreis">722,00 €</td> <td></td> </tr> </tbody> </table> |
Sponsored Links |
|
|||
Vielleicht könnten die Bereiche für Einzelpositionen und Gesamtpreise jeweils noch ein eigenes tbody bekommen.
Ich bin aber kein Spezialist für barrierefreie Datentabellen. Vielleicht bekommst du mehr Antworten, wenn du hemfrie bittest, den Thread in den Bereich Barrierefreiheit zu verschieben. Jetzt ist ja was da, worüber man reden kann.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wie setze ich am besten diese Navi um? | chrizzbee | CSS | 5 | 29.12.2008 08:59 |
Tabelle erscheint innerhalb eines DIVs | FBI | CSS | 1 | 27.06.2007 02:39 |
Tabelle height 100% im IE | paule | CSS | 0 | 09.05.2007 13:27 |
Mysql: Tabelle Ordnen, nach Integer Werten (timestamp) oder Zeitformaten? | braindead | Serveradministration und serverseitige Scripte | 8 | 14.03.2007 21:21 |
FF: Tabelle in Tabelle centern | wuschba | CSS | 2 | 20.07.2006 11:00 |