Lösung mit CSS für eine Tabelle checken

Status
Nicht offen für weitere Antworten.

son gohan

Erfahrenes Mitglied
Hallo,

ich habe mir eine Tabelle gebastelt und wollte mal ganz lieb nachfragen ob nicht jemand mir den Code checken kann und bzw. tipps geben kann ob diese Konstruktion gut ist oder ob es eine bessere Lösung gibt die überall funktioniert z.b. mit Listen, bevor ich mich an diese Variante gewöhne.

Leider habe ich es mit Listen nicht geschaft das so aufzubauen.

Vielen Dank im Voraus.

HTML:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>test Tabelle</title>
 
<!--
#leftright { padding:0px; border-left:1px solid #009F00; border-right:1px solid #009F00; }
.ae { float:left; background-color:#005F00; width:179px; height:20px; color:#ffffff; font-size:14px;
font-family:arial; font-weight:bold; vertical-align:middle; padding-top:2px; margin:1px; }
.fk { float:left; background-color:#95E199; width:179px; height:20px; color:#000000; font-size:14px;
font-family:arial;font-weight:bold; vertical-align:middle; padding-top:2px; margin:1px; }
.lr { float:left; background-color:#95E199; width:179px; height:20px; color:#000000; font-size:14px;
font-family:arial; font-weight:bold; vertical-align:middle; padding-top:2px; margin:1px; }
.sz { float:left; background-color:#005F00; width:179px; height:20px; color:#ffffff; font-size:14px;
font-family:arial; font-weight:bold; vertical-align:middle; padding-top:2px; margin:1px; }
.mae { float:left; background-color:#E3F9E6; width:179px; color:#000000; font-size:14px;
font-family:arial; text-align:left; vertical-align:middle; padding-top:2px; margin:1px; display:block; }
-->
</style>
 
</head>
<body>
 
<div style="width:727px;" align="center">
<div id="leftright">
<span class="ae">A - E</span>
<span class="fk">F - K</span>
<span class="lr">L - R</span>
<span class="sz">S - Z</span>
<br style="clear:both;">
<span class="mae">A - E</span>
<span class="mae">F - K</span>
<span class="mae">L - R</span>
<span class="mae">S - Z</span>
<br style="clear:both;">
<span class="ae">A - E</span>
<span class="fk">F - K</span>
<span class="lr">L - R</span>
<span class="sz">S - Z</span>
<br style="clear:both;">
</div>
</div>
 
</BODY>
</HTML>
 
M

Maik

Warum verwendest du nicht einfach eine Tabelle, wenn du Daten / Inhalte tabellarisch darstellen / aufbereiten willst?

[ editpost 22:34 ] Was hat denn (d)eine 'Tabelle' mit Listen zu tun :confused:
 

son gohan

Erfahrenes Mitglied
hallo maik,

ich habe ja gelesen, das es besser ist keine Tabellen zu verwenden, wenn jemand zum Beispiel meine Seite mit einem PDA Gerät besuchen tut dann wird es nicht so gut angezeigt wegen der Tabelle, dann habe ich auch noch gelesen, das Suchmaschienen auch nicht so gerne Tabellen mögen.

Ansonsten fällt mir nicht mehr viel dazu ein ausser die Ladezeit. Aber ich habe mir gedacht um alle diese Probleme aus den Weg zu gehen baue ich mir einfach mal eine Tabelle mit ein paar CSS Eigenschaften, nur hat mir wieder dieses durcheinander mit den ganzen Browsern und den unterschiedlichen Darstellungen alles vermiest.

Daher habe ich hier nochmal angefragt, mein Beispiel oben ist schon nicht schlecht aber es macht noch etwas Probleme in verschiedenen Browser, am besten wäre ja dann vielleicht auch eine Lösung mit Listen und dispaly:inline oder so, denke ich mal, nur weis ich net damit umzugehen.

Ansonsten benutze ich wie im Beispiel oben halt immer float:left.

Ich habe auch ehrlich gesagt schon viele gute Lösungen mit CCS kennenlernen dürfen aber eine richtig gute Lösung für Tabellen suche ich immer noch, und das wie gesagt aus dem Grund das Tabellen nur Probleme machen und ich habe schon genug Probleme mit den blöden framesets die ich net losgeworden bin wegen meinem Javascript Warenkorb.:) :) :) :) :) :confused: :rolleyes: :confused: :suspekt:
 
Zuletzt bearbeitet:
M

Maik

Stimmt, Tabellen sollten nicht zum Gestalten einer kompletten HTML-Seite 'zweckentfremdet' werden, da sie den Quelltext unnötig aufblähen und bei grossen Dateien die Ladezeit ausbremsen. Mag sein, dass Suchmaschinen Dokumente mit so einer (i.d.R. verschachtelten) Tabellen-Konstruktionen nicht mögen...

Aber zum 'tabellarischen' Anzeigen von Daten in einer HTML-Seite ist das <table>-Element doch eigens gedacht. Warum also 'das Rad neu erfinden' und sich damit (Darstellungs)Probleme in den unterschiedlichen Browsers schaffen?

Wie PDAs auf Tabellen reagieren, entzieht sich meiner Kenntnis. Aber ob deine Frameset-Version (grosse Auflösung, viele Bilder, usw.) auf den superkleinen PDA-Displays einwandfrei läuft bzw. dargestellt wird, kann ich mir nur schwer vorstellen. Wenn doch, dann hat der User viel zu scrollen - horizontal und vertikal -, was man nicht gerade als 'user-friendly' bezeichnen kann.
 
Status
Nicht offen für weitere Antworten.