HTML Tabellen oder eher doch CSS ? Wann nehme ich was und wieso?

[devian]

Guten Tag,
ich habe ein kleines Forum - welches auf php und html bassiert (das wbblite).
Die Auflistung der Foren und Themen erfolgt grundsätzlich über html-Tabellen. Als ich letztens eine kleine Erweiterung schreiben wollte stellte sich mir die Frage, ob ich nun mit css oder mit html-Tabellen arbeiten soll.

Zu meinem genaueren Vorhaben:
Wenn man auf http://www.mobile.de/ klickt, so sieht man dort einen Kasten. Der wo man auf Suchen und Anbieten klicken kann und je nachdem die gewünschten Optionen angezeigt bekommt - er erinnert ein wenig an Karteikarten. Hier mal ein Bild davon:

Ich habe diesen Kasten auch soweit in Form von einer html-tabelle erstellt.
Und die "Kartei-karten" wechsel ich mithilfe von Ajax. Funktioniert auch wunderbar, allerdings lese ich immer öffter, das html zur Erstellung von Tabellen vollkommen ungeeignet ist. Daher bin ich nun etwas skeptisch ob ich mein Vorhaben so überhaupt realisieren sollte.

Hier könnt ihr meine Umsetzung in html betrachten:
KLick Hier
(Ohne AJAX)

Könnt ihr mir vl Rat geben, wie ich es erstellen sollte? Überhaupt würde mich interessieren, wann ich html-Tabellen nehmen sollte und wann eher nicht?

[Joachim]

Hi,

Die Auflistung der Foren und Themen erfolgt grundsätzlich über html-Tabellen.

Warum das? Handelt es sich um tabellarische Daten?

Als ich letztens eine kleine Erweiterung schreiben wollte stellte sich mir die Frage, ob ich nun mit css oder mit html-Tabellen arbeiten soll.

Das ist kein Gegensatz: auch Tabellen solltest Du mit Css stylen.

allerdings lese ich immer öffter, das html zur Erstellung von Tabellen vollkommen ungeeignet ist.

Genau genommen ist es spätestens sein dem Verschwinden von Netscape 4 völlig überflüssig, Tabellen für Layoutzwecke zu verbiegen.

Überhaupt würde mich interessieren, wann ich html-Tabellen nehmen sollte und wann eher nicht?

Orientiere Dich am Inhalt: tabellarische Daten in eine Tabelle, Listendaten (Navi z.B) in eine Liste, Absätze in p etc.

Gruesse, Joachim

[devian]

Die Auflistung der Foren und Themen erfolgt grundsätzlich über html-Tabellen.
Warum das? Handelt es sich um tabellarische Daten?

Naja, das Forensystem stammt von burningboard und dort werden die einzelnen Foren Tabellarisch Aufgelistet. Also von daher schon.

Meine erstellte Tabelle läuft bei mir nun aber absolut problemlos (siehe Link) gibt es nun einen trifftigen Grund das ganze nochmal von Vorne mit css anzupacken?

[LX]

Meine erstellte Tabelle läuft bei mir nun aber absolut problemlos (siehe Link) gibt es nun einen trifftigen Grund das ganze nochmal von Vorne mit css anzupacken?

Damit hast Du die Pflicht (es muss funktionieren) erfüllt. Die Kür besteht jetzt darin, nicht nur funktionierenden, sondern auch validen, semantischen und ästetischen Code zu schreiben - in etwa in dieser Reihenfolge.

Gruß, LX

[devian]

Demnach geht es den Programmierern nicht nur darum ein funktionierenden Code zu erstellen er soll auch ästetisch sein?
Mh... ist die Erstellung von Tabellen über css letzendlich nur eine Frage der Ästethik? Verstehe ich das richtig?
Weil praktisch hat demnach mein html-Tabellen Gerüst dann ja keine Nachteile. Es ist eben einfach nur "hesslich"?!

[Deus Figendi]

Demnach geht es den Programmierern nicht nur darum ein funktionierenden Code zu erstellen er soll auch ästetisch sein?

Absolut, ästhetisch im Sinne von lesbar oder nachvollziehbar sollte möglichst jeder Code sein. Wenn er dann noch "schön" ist, ist er wahrscheinlich in PERL (oder einer esoterischen Sprache).

Mh... ist die Erstellung von Tabellen über css letzendlich nur eine Frage der Ästethik? Verstehe ich das richtig?

Niemand verlangt/erwartet, dass Tabellen mit CSS erstellt werden, das ist zwar technisch möglich aber eigentlich doch totaler Quatsch. Wenn man eine Tabelle haben möchte spricht überhaupt gar nichts dagegen das dafür vorgesehene HTML-Element <table> und seine Kinder zu verwenden. Im Gegenteil alles andere wäre semantischer Unsinn und würde die oftmals angesprochenen nicht visuellen Ausgabegeräte (bzw. deren Anwender) nur irritieren.
Natürlich kann ich meine tabellarischen Daten in <div>s packen und untereinander chaotisch im Quelltext verteilen um sie anschließend über CSS und ihre ids wieder zu ordnen. Aber das ist eben Unsinn. Für Tabellen einfach Tabellen nehmen, diese mit CSS formatieren (oder "stylen") aber doch nicht erstellen!

Weil praktisch hat demnach mein html-Tabellen Gerüst dann ja keine Nachteile. Es ist eben einfach nur "hesslich"?!

Ein Tabellengerüst hat immer dann Vorteile, wenn es tabellarische Daten enthält und immer Nachteile wenn es anderen Zwecken dient, so simpel ist die Rechnung. Im Falle eines Forums mit Brettstruktur halte ich es für legitim (imho Grenzfall) wenn man Tabellen verwendet. Im Falle des WBBlite (gerade mal deren Website aufgesucht) ist das eben eine Tabelle mit den Spalten
Foren
Beiträge
Themen
Letzter Beitrag
Moderatoren

beziehungsweise

Thema
Antworten
Autor
Hits
Bewertung
Letzter Beitrag

Dass die Icons eine eigene Spalte bekommen finde ich auch noch okay (hätte ich aber anders gemacht).
Nur ist das Banner oben ebenfalls in einer Tabelle und die linksseitige Navigation ebenfalls und überhaupt die Ganze Seite beginnt mit

<body bgcolor="#A0A0A0" text="#000000" id="bg">  
<table width="95%" cellpadding=0 cellspacing=1 align="center" border=0 bgcolor="#000000">

und endet mit

</table>  
  
</body>  
</html>

Enthält aber im Grunde nur Zentral/rechts tatsächlich auch optisch eine Tabelle und nur dieser Teil sollte dann auch eine sein.

[devian]

Gut, dann werde ich mich nun dazu durchringen mein vorhaben mit divs umzusetzen und diese über css zu stylen. Allerdings bin ich recht neu auf dem Gebiet und mein Vorhaben scheint mir etwas schwierig zu sein, da ich ja die "Kateikarten-Ecken" habe. Also die wo bei mobile.de Suchen und Anbieten draufsteht.

Deshalb bitte ich euch um einen kleinen roten Faden andem ich mich entlang hangeln könnte. Ich weiß nicht, ob der Weg denn ich im Kopf habe wirklich sinnvoll ist. Zum Beispiel bin ich noch zimlich ratlos, was die Anordung der Div boxen betrift?

Bin für jede Anregung dankbar!

[Deus Figendi]

Ich hab mal einen Artikel gelesen zum Thema. Da war auch so eine "Registerbnavigation" in CSS gelöst (allerdings als <ul> IIRC). Sah sehr gut aus, aber ich weiß nicht mehr wo das war. Vielleicht erinnert sich ein anderer Benutzer!?

[Deus Figendi]

Ich hab mal einen Artikel gelesen zum Thema. Da war auch so eine "Registerbnavigation" in CSS gelöst (allerdings als <ul> IIRC). Sah sehr gut aus, aber ich weiß nicht mehr wo das war. Vielleicht erinnert sich ein anderer Benutzer!?

NACHTRAG: Gefunden Horizontale Navigation wie Karteireiter
Ich find's sehr hübsch, semantisch korrekt und äh ja, ich mag's halt :)

[devian]

Oh das sieht gut aus... vl mache ich mich auch mal daran. Habe nun eben schonmal was gebastelt und finde es bis jetzt gar nicht mal so schlecht. Die Ecken sind allerdings nochnicht IE tauglich, da werde ich wohl mit einer Grafik arbeiten müssen. Den Hintergrund wollte ich farblich durch einen farbverlauf noch aufpeppen. Jetzt fehlt allerdings noch die Ecke oben rechts. Da bin ich noch am grübeln wie ich die denn auch wie ihr sagt semantisch und ästetisch hinbekomme. Hier mal der Code:

  
<div style="  
width:120;  
height:23;  
float:left;  
border-left:2px solid #aaaaaa;  
border-right:2px solid #aaaaaa;  
border-top:2px solid #aaaaaa;  
-moz-border-radius-topleft:10px;  
-khtml-border-radius-topleft:30px;  
-moz-border-radius-topright:10px;  
-khtml-border-radius-topright:30px;  
">Hallo</div>  
<div style="  
width:120;  
height:23;  
float:left;  
border-left:2px solid #aaaaaa;  
border-right:2px solid #aaaaaa;  
border-top:2px solid #aaaaaa;  
-moz-border-radius-topleft:10px;  
-khtml-border-radius-topleft:30px;  
-moz-border-radius-topright:10px;  
-khtml-border-radius-topright:30px;  
">Hallo</div>  
<div style="  
clear:left;  
width:{tableinwidth};  
height:175;  
border-left:2px solid #aaaaaa;  
border-right:2px solid #aaaaaa;  
border-bottom:2px solid #aaaaaa;  
-moz-border-radius-bottomleft:10px;  
-khtml-border-radius-bottomleft:30px;  
-moz-border-radius-bottomright:10px;  
-khtml-border-radius-bottomright:30px;  
">Beispiel 1</div>  

Ein Bild habe ich auch noch.

Was meint ihr dazu? Anregungen, Kritiken usw. sind erwünscht!

[LX]

Die Bezeichnung "unschön" im Sinne von "wenig zweckmäßig" trifft es eher. An dieser Stelle erfüllt die Tabelle zwar ihren Zweck, mit ein bis zwei divs wäre dasselbe Ziel jedoch auch erreicht.

Versuchen wir es mal mit einem Vergleich: Du kannst eine DIN-A4-Seite mit einem LKW transportieren oder mit einem Auto. Der LKW verbraucht mehr Sprit und fährt sich auch schwerer. Das Auto ist damit die zweckmäßigere Lösung.

Gruß, LX

[suit]

Das Auto ist damit die zweckmäßigere Lösung.

um eine a4-seite zu transportieren?

ich reiche ein paar krücken nach, für deinen hinkenden vergleich :D

das erinnert mich an die diskettenversion von windows 95, die bekam man inklusive scheibtruhe (mit windows-logo drauf) :p

[Joachim]

Hi,

Naja, das Forensystem stammt von burningboard

na und, was besagt das?

Meine erstellte Tabelle läuft bei mir nun aber absolut problemlos

und screenreader verstehen es auch? Suchmaschinen können die Inhalte optimal analysieren? Alternative Layouts für alternative Medien sind möglich?
Nur eine Strukturierung, die sich am Inhalt orientiert,entspricht modernen, barierrearmen Webdesign, alles andere ist Mittelalter.

gibt es nun einen trifftigen Grund das ganze nochmal von Vorne mit css anzupacken?

Es gibt viele. Aber ich werde nicht Überzeigungsarbeit für Dinge leiste, über die längst nicht mehr diskutiert wird, weil sie heutzutage keiner mehr ernsthaft in Frage stellt. Du bist 2 Jahre zu spät dran - mindestens.

Gruesse, Joachim

[Timo "God's Boss" Reitz]

Zu meinem genaueren Vorhaben:
Wenn man auf http://www.mobile.de/ klickt, so sieht man dort einen Kasten. Der wo man auf Suchen und Anbieten klicken kann und je nachdem die gewünschten Optionen angezeigt bekommt - er erinnert ein wenig an Karteikarten. Hier mal ein Bild davon: *snip*

Sieht nicht nach Tabellen aus.

Ich habe diesen Kasten auch soweit in Form von einer html-tabelle erstellt.
Und die "Kartei-karten" wechsel ich mithilfe von Ajax. Funktioniert auch wunderbar, allerdings lese ich immer öffter, das html zur Erstellung von Tabellen vollkommen ungeeignet ist. Daher bin ich nun etwas skeptisch ob ich mein Vorhaben so überhaupt realisieren sollte.

In welchem Zusammenhang wurde die Aussage, dass HTML zur Erstellung von Tabellen ungeeignet sei, getroffen? In HTML-Dokumenten, darunter typischerweise Webseiten, wird mir wohl wenig übrigbleiben, wenn ich Tabellen haben will, anders als mit HTML werde ich sie nicht (sinnvoll) umsetzen können.

Könnt ihr mir vl Rat geben, wie ich es erstellen sollte? Überhaupt würde mich interessieren, wann ich html-Tabellen nehmen sollte und wann eher nicht?

Die Regel ist theoretisch einfach, in der Praxis mitunter schwierig. Wenn tabellarische Daten vorliegen, so verwende eine Tabelle.