CSS Tabellen ?

Beitrag von **Ice Man** » 21.03.2013, 00:41

Abend

Ich wollte es mal mit einem CSS Design ohne Tabellen versuchen.
Hab jahrelange mit Tabellen gearbeitet, aber mir wurde in letzter Zeit immer wieder gesagt, Tabellen sind Out CSS ist in

Also versuch macht Klug

Das Design steht soweit, aber mein billiges Tabellen Menü will per CSS einfach nicht klappen.

Bisher war es so

SQL Abfrage
Beispiel

Code: Alles auswählen

schleife anfang

tr td $sql&#91;sport&#93; /td td &#40;$sql&#91;treffer&#93;&#41; /td /tr

schleife ende

Sieht dann natürlich so aus

Fusball | 3
Formel 1 | 6

Per Tabelle in 2-3 Minuten erledig

Per CSS, mir qualmt der Kopf

Wenn ich nur die Kategorie Namen ohne die Zahl in Klammer ausgebe klappt alles bestens. Aber eine 2 Spalte per CSS dahinter zu zaubern, ist irgendwie nicht möglich ?

Wie bekomme ich die Treffer dahinter ?

Alles in eine Spalte schreiben geht zwar, aber das gefällt mir nicht.
Als Tabellen verwöhnter liebe ich meine mehrfachspalten

Sieht einfach strukturierter aus.

Geht das mit CSS nicht, oder bin ich zu blond dafür

von **Anzeige von ABAKUS** »

Beitrag von **rg1** » 21.03.2013, 01:07

Ice Man hat geschrieben:Tabellen sind Out CSS ist in

Das HTML-Element <table> kann nur mit CSS im Browser angezeigt werden. Ohne CSS ist nichts zu sehen. HTML ist nur die Struktur (markup). Die Aussage ist also ohne Sinn, eher so was wie "nachts ist es kälter als draußen".

Versuch gar nicht erst, Tabellen nachzubauen. Tabellen haben ihre Berechtigung, wo Daten tabellarisch dargestellt werden sollen. CSS kann aber mehr als einer Tabellenzelle einen Rahmen zu geben. In HTML4 bietet sich für ein Menü eine Liste an. Listenelemente können zueinander jede Position haben.

Wenn du wirklich auf Tabellen für diesen Zweck verzichten willst, musst du die Grundlagen von CSS lernen. Ansonsten spricht nichts dagegen, alles so zu lassen wie es ist.

Edit: die Lösung ist float:left;

Beitrag von **Stelufl** » 21.03.2013, 09:08

Dass HTML out und CSS In ist hast du ja schonmal richtig verstanden, wenn auch spät

Gegen Tabellen mit HTML als "echte Tabellen" spricht nichts, ein ganzes Layout damit zu erstellen ist aber ein No Go geworden.. Zu statisch.. zu verschachtelt, zu schlecht wartbar.

Grundlegendes:

Code: Alles auswählen

<div id="menucontainer">
<div id="tabelle">
  <div>
    <div>Fußball</div><div>1</div>
  </div>
  <div>
    <div>Formel 1</div><div>6</div>
  </div>
</div>
</div>

css&#58;
#menucontainer &#123;
float&#58; left;
&#125;
#tabelle &#123;
display&#58; table;
&#125;

#tabelle div &#123;
display&#58; table-row;
&#125;

#tabelle div div &#123;
display&#58; table-cell;
&#125;

Diese Tabelle muss sich aber in einem Container (MenuContainer) befinden der entsprechend links floatet (falls das Menu links sein soll), sonst sprengst du dir dein Layout. Der ContentContainer, der den eigentlichen Content umgibt, floatet dann entsprechend rechts.

Da css ohne Vorkenntnisse kaum zu meistern ist würde ich dir empfehlen dir erstmal einen Sandkasten zu schaffen und dort mal ein bisschen zu layouten.
Dabei soll das Layout immer grundlegend eine Struktur verfolgen, die durch Container gegeben ist. Container enthalten idR nur Layout spezifische CSS Attribute wie margin, padding, display, float, width, height, etc.
Font etc das ist zu konkret für Container.

Hier ein wie ich finde sehr gutes Tutorial https://www.andreas-kalt.de/webdesign/t ... -erstellen

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Melegrian** » 21.03.2013, 09:25

rg1 hat geschrieben:
Ice Man hat geschrieben:Tabellen sind Out CSS ist in
Das HTML-Element <table> kann nur mit CSS im Browser angezeigt werden. Ohne CSS ist nichts zu sehen.

Nun verwirrst Du mich. Also ich halte HTML-Elemente für Elemente der Hypertext-Auszeichnungssprache. CSS hingegen für Stilvorlagen zur Ausrichtung von HTML-Elementen, ohne die es zur Not aber auch geht.

Ich würde einfach mal in den Raum stellen, ohne CSS würden HTML-Elemente halt linksbündig wie auf einer Schreibmaschine ausgerichtet, da es Zeilenumbrüche, Wagenrückläufe und sonstige Steuerzeichen bereits gab, bevor es CSS gab. Auch gibt es bereits Tabellen seit wann? Jedenfalls seit der Antike oder so, von HTML wurden diese Elemente halt ab HTML 3.2 übernommen. Vermutlich werden sich Tabellen auch noch mehrere tausend Jahre halten.

Beitrag von **rg1** » 21.03.2013, 10:50

Melegrian hat geschrieben:
rg1 hat geschrieben:
Ice Man hat geschrieben:Tabellen sind Out CSS ist in
Das HTML-Element <table> kann nur mit CSS im Browser angezeigt werden. Ohne CSS ist nichts zu sehen.
Nun verwirrst Du mich. Also ich halte HTML-Elemente für Elemente der Hypertext-Auszeichnungssprache. CSS hingegen für Stilvorlagen zur Ausrichtung von HTML-Elementen, ohne die es zur Not aber auch geht.

Der erste Teil ist richtig, der letzte nicht. Lösche probehalber alle browsereigenen stylesheets und du wirst sehen...

Edit: ich muss gerade feststellen, dass in Firefox 19 das stylesheet gar nicht mehr frei zugänglich ist. Firefox' Grundeinstellungen kannst du aber hier einsehen: resource://gre-resources/html.css

Es gibt in jedem Browser ein Basis-stylesheet, damit überhaupt was angezeigt wird. Dieses ist teilweise über Browsereinstellungen anpassbar.

Beitrag von **rg1** » 21.03.2013, 11:12

Stelufl hat geschrieben:Grundlegendes:

Code: Alles auswählen

<div id="menucontainer">
<div id="tabelle">
  <div>
    <div>Fußball</div><div>1</div>
  </div>
  <div>
    <div>Formel 1</div><div>6</div>
  </div>
</div>
</div>

css&#58;
#menucontainer &#123;
float&#58; left;
&#125;
#tabelle &#123;
display&#58; table;
&#125;

#tabelle div &#123;
display&#58; table-row;
&#125;

#tabelle div div &#123;
display&#58; table-cell;
&#125;

Semantisch betrachtet totaler Quark. Du ersetzt Tabellenelemente durch Ebenen und formatierst sie wie Tabellenzellen. Dadurch hast du: eine Tabelle (nach div-Suppen-Rezept). Guten Appetit.

Beitrag von **Stelufl** » 21.03.2013, 11:17

Jo.. richtig. Er wollte ne Tabelle ich hab ihm gezeigt wies geht. So what?
Oder versuchst du gerade die Intention des Threads zu stören indem du eine HTML vs. CSS Tabellendiskussion starten willst?

Beitrag von **Ice Man** » 21.03.2013, 11:25

Stelufl hat geschrieben:Dass HTML out und CSS In ist hast du ja schonmal richtig verstanden, wenn auch spät
Gegen Tabellen mit HTML als "echte Tabellen" spricht nichts, ein ganzes Layout damit zu erstellen ist aber ein No Go geworden.. Zu statisch.. zu verschachtelt, zu schlecht wartbar.

Grundlegendes:
Code: Alles auswählen
<div id="menucontainer">
<div id="tabelle">
  <div>
    <div>Fußball</div><div>1</div>
  </div>
  <div>
    <div>Formel 1</div><div>6</div>
  </div>
</div>
</div>

css&#58;
#menucontainer &#123;
float&#58; left;
&#125;
#tabelle &#123;
display&#58; table;
&#125;

#tabelle div &#123;
display&#58; table-row;
&#125;

#tabelle div div &#123;
display&#58; table-cell;
&#125;
Diese Tabelle muss sich aber in einem Container (MenuContainer) befinden der entsprechend links floatet (falls das Menu links sein soll), sonst sprengst du dir dein Layout. Der ContentContainer, der den eigentlichen Content umgibt, floatet dann entsprechend rechts.

Da css ohne Vorkenntnisse kaum zu meistern ist würde ich dir empfehlen dir erstmal einen Sandkasten zu schaffen und dort mal ein bisschen zu layouten.
Dabei soll das Layout immer grundlegend eine Struktur verfolgen, die durch Container gegeben ist. Container enthalten idR nur Layout spezifische CSS Attribute wie margin, padding, display, float, width, height, etc.
Font etc das ist zu konkret für Container.

Hier ein wie ich finde sehr gutes Tutorial https://www.andreas-kalt.de/webdesign/t ... -erstellen

Danke, das hat schon mal funktioniert

Hab mir das Tutorial mal durchgelesen, aber selbst die Seite verwendet noch den Tabellen Code, unten wo die Tabelle mit den "Browser-Support-Optionen "

Hab mir per Firebug in Firefox man paar große bekennte Webseiten angeschaut, aber was ich da gesehen habe, das ist der Wahnsinn.

Bsp: Computerbild

Da sind bestimmt 500 Divs eingebaut.
Der Code ist riesig, für jeden Scheiß ein Div.
Und dafür dann unmengen Code in der CSS Datei.

Angeblich soll doch das alles mit CSS vermieden werden.
Also der Code soll nicht aufgebläht werden.

Wenn ich solche Seiten mit der bekannten (Old School) Varinaten über die Tabellen vergleiche, dann ist die Tabellen Varianten viel einfacher, und vom Code gesamt sicher auch besser.

Naja, ich teste erstmal weiter

Beitrag von **rg1** » 21.03.2013, 11:29

Warum sollte man sich die Mühe machen, eine Tabelle in anderen Elementen nachzuformen? Dann kann man das Tabellenelement behalten. Entweder ich mach es richtig oder ich nutze die Zeit besser für was anderes.

Beitrag von **rg1** » 21.03.2013, 11:39

Ice Man hat geschrieben: Angeblich soll doch das alles mit CSS vermieden werden.
Also der Code soll nicht aufgebläht werden.

Hier wird seit jeher viel durcheinander gebracht. Massen an sinnfreien div-Elementen sind für das markup genauso falsch wie Layout-Tabellen. Aber es interessiert sich kein Schwein für HTML, die Browser schaffen das schon. Es geht nur um Darstellbarkeit und Wartbarkeit. Theoretisch könnte man sich auf ein einziges Element beschränken, egal ob Ebene, Tabellenzelle, Absatz oder weißderkuckuckwas. Mit CSS bekommst du alles schick positioniert und dargestellt. Die Schlachten sind alle geschlagen, wenn du keinen wichtigen Grund hast, kannst du bei der Tabelle bleiben, Stelufl hat eindrucksvoll gezeigt warum.

Beitrag von **Stelufl** » 21.03.2013, 11:58

Also @ Threadersteller,
wie vermutet versucht rg1 hier jetzt eine Grundsatzdiskussion zu führen ob mit CSS realisierte Tabellen sinnvoll sind oder nicht. Hier streiten sich die Gelehrten und ich will meinen Senf da gar nicht zu beitragen weil es dir nichts bringt. Dazu nur 1 Satz am Rande: Ob du ne Tabelle als "echte Tabelle" nun mit HTML oder CSS erstellst ist dir überlassen. Am Ende tun sich beide nichts, weil eine HTML Tabelle musst du sowieso mit CSS anpassen, da sie sonst scheiße aussieht. Der Code wird also nicht schlanker, indem du HTML Tabellen benutzt.. Wohlgemerkt sind wie gesagt aber nur die "echten Tabellen" gemeint die Inhalt tabellarisch darstellen sollen.

Eben wegen den 1 Mio divs hat man versucht mit HTML 5 die Struktur anzupassen. Da kommen jetzt Elemente wie <header>, <section>,<article>, <footer> und <aside> hinzu. Ich nutz das bei meiner Homepage schon. Der IE braucht z. T. (8 auf jeden Fall, 9 glaub auch) dann aber noch eine extra Zeile Code, mit der mittels JS HTML5 gefaked wird.

Code: Alles auswählen

<!--&#91;if IE&#93;>
<script src="http&#58;//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->
</head>

Die HTML5 Tags die die divs reduziren ändern ansich nichts an der Funktionalität, bringt aber bessere Lesbarkeit und Struktur, auch im CSS. Wenn da ein <article> Tag kommt, weiß man dann halt, dass der nächste Block einen Artikel darstellt. Du musst nicht mehr den class Titel entziffern, der oft bescheuert gewählt wird wie class="textblockLeftInline" und in Wirklichkeit einen Artikel repräsentiert... Das bringt schon eine Menge, gerade in Bezug auf Themen wie Wartbarkeit, Lesbarkeit.

Ein CSS kann auch schlank und schön sein. Man muss sich nur ausgiebig damit vorher befassen und vorher wissen, wo ich Vererbung einsetzen kann, wo nicht, wo ich abstrahieren kann und ob ich nun wirklich für jedes noch so kleine Popelcustomelement eine neue ID oder CLASS setzen muss oder nicht.

Beitrag von **Melegrian** » 21.03.2013, 12:53

rg1 hat geschrieben:Es gibt in jedem Browser ein Basis-stylesheet, damit überhaupt was angezeigt wird. Dieses ist teilweise über Browsereinstellungen anpassbar.

Gut, jetzt habe ich mal wieder etwas dazu gelernt. Dass jede Render-Engine auch die entsprechenden Vorlagen besitzen muss, das war mir schon klar. Nur hätte ich jetzt eher vermutet, dass die Ausrichtung usw. zum Beispiel eher in C programmiert wird und dann nach dem Kompilieren mit zum Bestandteil der Exe wird, als eingeschlossene Library oder so und nicht dass es als CSS mit beiliegt. Sieht aber zumindest interessant aus:

www.w3.org/html/wg/drafts/html/master/rendering.html