zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Wie setze ich diese Tabelle am besten um?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.01.2010, 12:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2008
Beiträge: 42
made.by.kaufmann befindet sich auf einem aufstrebenden Ast
Frage 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.
Angehängte Grafiken
Dateityp: jpg daten_tabelle.JPG (36,6 KB, 48x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.01.2010, 13:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.06.2007
Ort: Verden
Beiträge: 405
chorn wird schon bald berühmt werden
Standard

Sieht ja mehr nach einer Tabelle und einer (Definitions-)Liste aus.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.01.2010, 14:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2008
Beiträge: 42
made.by.kaufmann befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.01.2010, 19:13
Neuer Benutzer
neuer user
 
Registriert seit: 04.02.2009
Beiträge: 14
realmuecke befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 08.01.2010, 10:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2008
Beiträge: 42
made.by.kaufmann befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.01.2010, 10:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 08.01.2010, 12:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2008
Beiträge: 42
made.by.kaufmann befindet sich auf einem aufstrebenden Ast
Standard

Also hier ist mein Tabellenvorschlag:

HTML-Code:
<table summary="&Uuml;bersicht &uuml;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&ouml;he</th>
			<th id="breite" scope="col">Breite</th>
			<th id="preis" scope="col">Preis</th>
			<th id="loeschen" scope="col">L&ouml;schen</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th id="gesamtpreis" scope="row">Gesamtpreis</th>
			<td></td>
			<td></td>
			<td></td>
			<td headers="gesamtpreis">710,00 &euro;</td>
			<td></td>
		</tr>
		<tr>
			<th id="versand" scope="row">Versandkosten</th>
			<td></td>
			<td></td>
			<td></td>
			<td headers="versand">12,00 &euro;</td>
			<td></td>
		</tr>
		<tr>
			<th id="endpreis" scope="row">Endpreis</th>
			<td></td>
			<td></td>
			<td></td>
			<td headers="endpreis">722,00 &euro;</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 &euro;</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 &euro;</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 &euro;</td>
			<td headers="loeschen">X</td>
		</tr>
	</tbody>
</table>
Kann man das so umsetzen??

Gruß, MK.

Geändert von made.by.kaufmann (08.01.2010 um 12:07 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.01.2010, 12:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Wenn du dir durchliest, was efa zur Aufgabe des tfood-Elements schreibt: Hältst du wirklich für sinnvoll, was du damit machst?
Mit Zitat antworten
  #9 (permalink)  
Alt 08.01.2010, 12:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.02.2008
Beiträge: 42
made.by.kaufmann befindet sich auf einem aufstrebenden Ast
Standard

Hmm, stimmt eigentlich. tfoot ist da nicht ganz so geeignet!

Dann versuch ich´s mal so:

HTML-Code:
<table summary="&Uuml;bersicht &uuml;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&ouml;he</th>
			<th id="breite" scope="col">Breite</th>
			<th id="preis" scope="col">Preis</th>
			<th id="loeschen" scope="col">L&ouml;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 &euro;</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 &euro;</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 &euro;</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 &euro;</td>
			<td></td>
		</tr>
		<tr>
			<th id="versand" scope="row">Versandkosten</th>
			<td></td>
			<td></td>
			<td></td>
			<td headers="versand">12,00 &euro;</td>
			<td></td>
		</tr>
		<tr>
			<th id="endpreis" scope="row">Endpreis</th>
			<td></td>
			<td></td>
			<td></td>
			<td headers="endpreis">722,00 &euro;</td>
			<td></td>
		</tr>
	</tbody>
</table>
Gruß, MK.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.01.2010, 12:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:05 Uhr.