XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Tabellen und Barrierefrei (http://xhtmlforum.de/showthread.php?t=45639)

|SONY| 28.04.2007 17:34

CSS Tabellen und Barrierefrei
 
moin zusammen,

da ich nun doch nicht, trotz css um tabellen herum komme tabellen zwecks daten zu erstellen die frage bitte zum thema barrierefreiheit:

in einem anden forum habe ich gelesen table, tr, td OK th sollte nicht verwendet werden.

wenn dies so weit richtig ist, gesagt getan. mein problem ist nun den table html code komplett über css zu steuern was mir in hinsicht auf schrift, größe, breite etc. nicht so gelingt.

beispiel

html
Code:

<div id="main"><h1>Wirtschaft</h1><table>
 <tr>
  <td style="width:25%">Bruttoinlandsprodukt (Atlas)</td><td style="width:25%">552,7 Mrd. US-$ (2005)</td></tr>
  <tr><td style="width:25%">Bruttoinlandsprodukt pro Kopf</td><td style="width:25%">3090 US-$ (2005)</td></tr>

css
Code:

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

da ich mich mit table angaben nicht mehr so gut auskenne, benötige ich bitte einen tipp wie ich die tabelle komplett per css steuern kann ?

hierum geht es: BrasilGate - Ihr Partner für Brasilien und Südamerika - Wirtschaft

besten dank
sony

Thorben 28.04.2007 19:56

Zitat:

Zitat von |SONY| (Beitrag 331562)
in einem anden forum habe ich gelesen table, tr, td OK th sollte nicht verwendet werden.

Das Forum sollte sofort geschlossen werden :roll:

Natürlich darfst du Tabellen und alle Tabellenelemente verwenden, solange du damit Daten tabellarisch darstellen willst.

|SONY| 29.04.2007 14:43

hallo thorben,

hast du / ihr noch einen tipp zu o.a. beispiel, wie ich die tabellen vernünftig über css steuere ?

mfg
sony

ct2oo4 29.04.2007 14:53

hallo, ich versteh irgendwie nicht was du "steuern" möchtest!? Kannst du das bitte nochmal erläutern?

|SONY| 29.04.2007 15:06

hallo ct2004,

es funktioniert jetzt soweit mit css allerdings habe ich so meine schwierigkeiten die tabelle richtig zu positionieren bzw. bin mir auch nicht so sicher wie ich in die tabelle = td ein p einbringe um die schrift zu steuern / links, rechts fett dünn etc. außerdem bekomme ich die gesamte tabelle nicht zentriert im main.

aktuelles beispiel

html:
Code:

<table>
 <tr>
  <td>Bruttoinlandsprodukt (Atlas)</td><td>552,7 Mrd. US-$ (2005)</td></tr>
  <tr><td>Bruttoinlandsprodukt pro Kopf</td><td>3090 US-$ (2005)</td></tr>
  <tr><td>Bruttosozialprodukt</td><td>604,9 Mrd. US-$ (2005)</td></tr>
  <tr><td>Wirtschaftswachstum</td><td>5,2 % (2004)</td></tr>
  <tr><td>Inflationsrate</td><td>5,8 % (2003)</td></tr>
  <tr><td>Arbeitslosenrate</td><td>9–10 % (2004)</td></tr>
  <tr><td>Armutsrate</td><td>22 % (2005)</td></tr>
</table>

css:
Code:

table {background: gray; width: 550px; position:center;}
table td {background: #fff; color: black;margin:10px; 15px 10px 25px;}

die tabelle habe ich im div main.

BrasilGate - Ihr Partner für Brasilien und Südamerika - Wirtschaft

vielen dank
sony

ct2oo4 29.04.2007 15:37

achso...
mir fallen da ein paar mittel ein: (manche kommen aber nicht durch den validator ^^)
1.) <p style="text-align:center"><table></table></p>
2.) <center><table></table></center>
3.) <table style="position: absolute; text-align:center">

musste mal ausprobieren (habs jetzt nicht getestet)

<!--
Mir ist noch etwas eingefallen:
Setze die Tabelle doch einfach wieder in ein div... das lässt sich viel leichter positionieren.
-->

EvT 29.04.2007 15:52

<table> ist ein Blockelement und Blockelemente lassen sich über ihre margins positionieren. Damit du die Positionierung auch siehst, sollte die Tabelle weniger breit sein, als das Elternelement.

|SONY| 29.04.2007 16:00

hallo zusammen,

mit dem div für table funktioniert jetzt so weit so gut. wo ich noch nicht hintergestiegen bin ist die schrift form, positionierung un größe etc. zu beeinflussen.

beispiel mit p

Code:

<td><p>Bruttoinlandsprodukt (Atlas)</p></td><td><p>552,7 Mrd. US-$ (2005)</p></td></tr>
Code:

table {border-style:solid; border: 1px solid #000;width:580px; position:center;margin:10px 10px 10px 45px;}
table td {background: #fff; color: black;margin:15px 15px 15px 25px;}
table p{color:red;}

will nicht so ich ich mir es vorstelle !?
<-----SORRY habe falsch hochgeladen, das mit dem div table funktioniert doch nicht !!
-----------------------------------------------------------------------------------

mfg
sony

Boris 29.04.2007 16:16

Es gibt kein position: center ... wenn du die Tabelle (oder jedes andere Blockelement) zentrieren wilst, benutzt man margin: 0 auto; (sprich: links und rechts 'auto').

Das sind CSS Grundlagen ... ;)

EvT 29.04.2007 16:16

Code:


<style>
table {border: 1px solid #000; width:580px; margin:10px 10px 10px 45px;}
table td {background: #fff; color: black; margin:15px 15px 15px 25px;}
table p {color:red;}
</style>


<table>
<tr>
<td><p>Bruttoinlandsprodukt (Atlas)</p></td>
<td><p>552,7 Mrd. US-$ (2005)</p></td>
</tr>
</table>


Vergleich mal den Code, es gibt z.B. kein position:center.


edit: Zweiter ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:47 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023