CSS und Tabellen

[|SONY|]

moin zusammen,

ich versuche ja nun meine seite per css zu erstellen und tabellenlos zu bleiben, komme aber nicht herum gewisse zahlen, daten und fakten in eine tabelle packen zu müssen.

wenn ich im internet so stöbere komme ich zu diesem thema immer wieder zu den selektoren die da heißen:

td, th, table etc. ist diese anwendung dann eigentlich noch richtig barrierefrei !? gibt es evtl. andere anweisungen die table umgehen aber trotzdem als tabellen angezeigt werden ?

beispiel:

html

Code: Alles auswählen

<table class="cl1">
<tr>
<td>&#91;cl1&#93;</td><td class="r1c2">r1c2</td><td>r1c3</td>
</tr>
<tr>
<td class="r2c1">r2c1</td><td>r2c2</td><td>r2c3</td>
</tr>
<tr>
<td>r3c1</td><td>r3c2</td><td class="r3c3">r3c3</td>
</tr>
</table>

css

Code: Alles auswählen

<pre>table &#123;background&#58; gray; width&#58; 300px;&#125;
table td &#123;background&#58; #FF9; color&#58; black;&#125;
.r1c2 &#123;width&#58; 100px;&#125;
.r2c1 &#123;width&#58; 150px;&#125;
.r3c3 &#123;width&#58; 100px;&#125;
.cl1 &#123;table-layout&#58; fixed;&#125;
.cl2 &#123;table-layout&#58; auto;&#125;

mfg
sony

[christians]

Wenn Du Daten in Tabellenform anzeigen willst ist das einzig richtige Mittel eine Tabelle.

Das ist "richtig Barrierefrei".

Das Problem, über das immer diskutiert wird ist, wenn man Tabellen für "Daten" benutzt, die keine tabellarische Darstellugn erfordern. Also zB nur aus Layoutzwecken.

[|SONY|]

hallo christians,

dann werde ich dies mal versuchen.

besten dank
sony

[chio]

An sich kannst du auch reine Layout-Tabellen verwenden, wenn du "barrierefreie" Seiten machen willst; solange du dich auf die Tags <table><tr> und <td> beschränkst. Du darfst zb NICHT <th> verwenden.

Für Tabellen, die "tabellarische Daten" enthalten - also im eigentlichen Sinne verwendet werden - gilt bzgl Barrierefreiheit ein sehr umfangreiches Regelwerk, was wie zu bezeichnen ist. Musst du dich kundig machen. Viel Spaß dabei.

[|SONY|]

hallo chio @all,

ich habe mal eine testtabelle hochgeladen ---> https://www.brasilgate.com/main/wirtschaft.php

aber irgendwie weiß ich nicht wie ich die css angaben so definieren kann, so dass ich die tabelle komplett über css steuern kann = farbe, schrift, breite etc.

folgendes habe ich bisher gemacht - validator "meckert" auch nicht:

html

Code: Alles auswählen

<div id="main"><h1>Wirtschaft</h1><table>
 <tr>
  <td style="width&#58;25%">Bruttoinlandsprodukt &#40;Atlas&#41;</td><td style="width&#58;25%">552,7 Mrd. US-$ &#40;2005&#41;</td></tr>
  <tr><td style="width&#58;25%">Bruttoinlandsprodukt pro Kopf</td><td style="width&#58;25%">3090 US-$ &#40;2005&#41;</td></tr>

css

Code: Alles auswählen

table {background: gray; width: 300px;} 
table td {background: #fff; color: black;}

wie kann ich z.b. die ganze tabelle centriert erstellen oder aber den text und die spaltenbreite komplett über css steuern so dass z.b. style="width:25% in css übernommen wird ?

vielen dank
sony

[heino]

Du kannst die ganzen Tabellen-tags (table,th,td,caption,...), wie alle anderen auch, per css formatieren. Schau es dir doch in selfhtml mal an.

[|SONY|]

hallo heino, @all,

funktioniert so weit so gut, bis darauf das andere browser wie z.B. FF folgendes nicht erfassen bzw. umsetzen.

Code: Alles auswählen

<table summary="Submitted table designs">

bzw.

Code: Alles auswählen

<caption>wirtschaftliche Indikatoren</caption>

für weitere info's wäre ich sehr dankbar.

mfg
sony

[MonikaTS]

hallo heino, @all,

funktioniert so weit so gut, bis darauf das andere browser wie z.B. FF folgendes nicht erfassen bzw. umsetzen.

Code: Alles auswählen

<table summary="Submitted table designs">

bzw.

Code: Alles auswählen

<caption>wirtschaftliche Indikatoren</caption>

für weitere info's wäre ich sehr dankbar.

mfg
sony

table summary sieht man nicht, das wird nur vorgelesen,
der FF kann caption, der alte IE 5 oder so kann es nicht

zeigt dann eben nicht an
Beispiel einer Tabelle mit Quelltext und Erklärung und so...

lg