auf Tabellen verzichten, dafür CSS

Mauki

Mauki

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.499
Reaktionspunkte
189
Ich versuche auf ner Webseite, ne Speisekarte ohne Tabellen umzusetzten. Nun habe ich mehrere Boxen mit CSS erstellt und in einer soll die Speisekarte rein. Mit ner Tabelle hätte ich kurz 4 Spalten gemacht und fertig. Wie mache ich das mit CSS ?

Ich habe auf der Startseite 2 Spalten gemacht mittels folgendem Code:

CSS

div.spalten
{
height:25%;
float:left;
}

HTML
<div class="spalten" style="width:310px;">Spalte 1
</div>
<div class="spalten" style="width:330px;margin:0px 2%;">Spalte 2
</div>


Kann ich so auch 3 oder 4 Spalten definieren oder gibt es ne bessere Lösung ?
 
Zuletzt bearbeitet von einem Moderator:
Ich bin zwar auch immer gegen Tabellen für Layoutzwecke, aber ist eine Speisekarte nicht ein sehr gutes Beispiel für eine Tabelle?

Eine Speisekarte ist doch nichts anderes als die Auflistung von Produkten (hier speziell Speisen) und deren Preisen (vllt. sogar eine Spalte für Artikelnummer und exkl. und eine inkl. MwSt usw. usf.). Wobei eine Speisekarte den Spezialfall darstellt (keine Artikelnummer oder vllt. doch?) und die Preise immer inkl. MwSt. Somit ist für mich eine Speisekarte ein typisches Beispiel für die Verwendung von Tabellen.

Ansonsten schaue auch noch einmal in de.selfhtml.org, die Jungs und Mädels haben letztes WE die überarbeite Version freigegeben, die jetzt viele neue Hinweise in Bezug auf CSS beinhaltet.

Pingu
 
bei SelfHTML hab ich auch mal reingeschaut, auch die vorgeschlagenen Seiten von kelli habe ich mal durchgeschaut aber nichts gefunden.

Ehrlich gesagt möchte ich auf ne Tabelle verzichten, allerdings wenn es nicht anders geht dann muß ich wohl.

Vielleicht hat noch jemand ne Idee ?
 
Der Grund, warum Tabellen noch nicht aus XHTML herausgeflogen sind ist, dass es zur Darstellung von tabellarischen Daten nichts besseres gibt.
Also, mach eine schöne Tabelle, die du mit CSS formatierst ;)
 
Mehrspaltige Layouts mit CSS, ganz frisch in SelfHTML 8.1 :)

Die Karte an sich könnte (strukturell berechtigt) als Tabelle umgesetzt werden oder als (Definitions-) Liste.

cheers
 
ein tip verichte auf float und nimm lieber position:absolute nur dan nicht vergessen die abstände zu setzen sonst überschneiden sich dinge.

ich hab auch letztens eine seite gemacht und mich auf diversen css seiten schlau gemacht aber ich hatte nachher arge probleme mit float da das wohl noch viele bugs oder so hat im ie konnte auf jeden fall nachher nichts vernünftig angezeigt werden mit position gehts wunderbar
 
... wenn man bedenkt, daß nicht wenige Layouts "alter Schule" ihre Tabellchen ohne mit der Wimper zu zucken fünf-, sechs- und siebenfach ineineinder verschachteln - warum nicht? :D

Wenn du aber eine Struktur hinbekommst, wo du auf die äußeren Boxen verzichten kannst, wirf sie über Bord. Ansonsten sind geschachtelte DIVs kein Problem.
 
Brandhoff schrieb:
Wenn du aber eine Struktur hinbekommst, wo du auf die äußeren Boxen verzichten kannst, wirf sie über Bord. Ansonsten sind geschachtelte DIVs kein Problem.
Zum Vergrößern anklicken....

wie du meinst ich soll die anderen Boxen über Board werfen. Na dann ist doch das Layout futsch. Hast du dir die Seite mal angeschau, wo die Infos drauf sollen ?
 
Hi Mauki,

bei a list apart gibt es einige Beispiele zu Boxen. Und die kannst Du auch ineinanderschachteln.

Außerdem möchte ich mich den anderen anschließen: Ich kann einfach nicht verstehen, warum für die Darstellung tabellarischer Daten nicht eine Tabelle verwendet werden sollte.

Grüße,

tasha
 
tasha schrieb:
Außerdem möchte ich mich den anderen anschließen: Ich kann einfach nicht verstehen, warum für die Darstellung tabellarischer Daten nicht eine Tabelle verwendet werden sollte.
Zum Vergrößern anklicken....

Weil irgendwelche CSS-Puristen das im Augenblick so predigen. Es geht dabei offensichtlich weniger um Funktionalität als um Glaubensgrundsätze.
 
ja ihr habt recht, ich glaube ne Tabelle ist das einfachste und beste für die Darstellung der Speisekartendaten.

Ich werde das also mal reinbasteln ;)
 
Mick321 schrieb:
Weil irgendwelche CSS-Puristen das im Augenblick so predigen. Es geht dabei offensichtlich weniger um Funktionalität als um Glaubensgrundsätze.
Zum Vergrößern anklicken....

Ich kann ja nachvollziehen, dass manche sagen, dass man die Markup-Befehle verwenden soll, die zum dargestellten Element passen, z. B. Listen für Menüs etc., damit in textorientierten Browsern die Seiten noch sinnvoll, wenn auch hässlich, dargestellt werden können. Dazu gehört dann m. E. aber auch, dass man tabellarische Daten auch als Tabellen auszeichnet. Alles andere ist m. E. Blödsinn.

Grüße,

tasha
 
Mauki schrieb:
wie du meinst ich soll die anderen Boxen über Board werfen. Na dann ist doch das Layout futsch. Hast du dir die Seite mal angeschau, wo die Infos drauf sollen ?
Zum Vergrößern anklicken....

Ich hätte wohl eher "integrieren" statt "über Bord werfen" schreiben sollen. :)

Wie weiter oben geschrieben: Tabellen sind OK für die Aufgabe, alternativ gingen geschachtelte DIVs - was immer dir eher zusagt und leichter zu pflegen ist.

@Mick: je komplexer eine Seite wird, desto eher greifen die Vorteile von konsequent durchgezogenen CSS-Layouts, sei es bei Inhaltspflege, unterschiedlichen Layouts (ganz simpel: Screen vs. Print) oder Designänderungen. Der Aufwand gegenüber reinen Tabellen-Layouts schrumpft dramatisch. Die Idee ist übrigens auch nicht neu, sondern feiert bald ihren zehnten Geburtstag. :)

Nachtrag: Tabellen an sich haben natürlich nach wie vor eine Existenzberechtigung, nämlich für tabellarische Inhalte (siehe Tasha) ... aber macht hier irgend jemand Print-Layouts mit Excel, weil es so schön waage- und senkrechte Linien kann? ;)
 
Zuletzt bearbeitet:
Geht es dir jetzt darum, mehrere Seiten der Speisekarte nebeneinander anzuzeigen oder möchtest du wirklich eine Speisekarte (also Produkt | Preis) in DIVs realisieren?

Letzteres wäre nämlich totaler Humbug und keinesfalls der Sinn von CSS (der nämlich ist, Layout-Tabellen zu verhindern, um den eigentlichen Sinn von Tabellen wiederherzustellen).
 
Es gibt ein gutes Buch über CSS: Cascading Style Sheets von Shafer/Yank. Kostet 39 Euro. Da steht alles drin.

Frank
 
Ich habe eine Seite entdeckt mit unzähligen Templates - viele davon auf Basis von css und alles sehr sauber (w3-konform):
http://www.oswd.org/

Gruss, neptun
 
so habe jetzt mal mit ner Tabelle angefangen, ist halt noch nicht fertig. Auch die Formatierung stimmt noch nicht zu 100%
 
so ich habe jetzt ne Tabelle, ich will die jetzt entprechend formatieren. Es geht mit aber nur um die Breite der Spalte. Dies kann mann ja mit colgrouß gut erreichen.

Ich rätsel gerade was ich da in meine externe CSS-Datei reinschreibe. Sehe ich das richtig das ich da garnichts brauche oder könnte ich die Werte in die externe CSS Datei reinschreiben ? Was kommt dann aber in den HTML-Code. Stehe gerade irgendwie auf dem Schlauch ?

<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten