[css] Tabellendarstellung, Fexibel
#1
geschrieben 12. April 2010 - 06:29
ich versuche mich ein wenig in CSS. Dabei möchte ich eine Tabelle in CSS darstellen.
Die Anzahl der Spalten kann dabei variieren.
Ich hätte gerne etwas in der Form:
<div id="beginn_zeile">
<div id="spalte">One</div>
<div id="spalte">Two</div>
<div id="spalte">Three</div>
</div>
beginn_zeile sollte dabei die zeile ansich, evtl mit fester breite darstellen, spalte ansich sollte einen sich selbstbestimmenden wert von der zeile sich nehmen.
Das Problem: meine CSS Erfahrung sind gleich null. Daher würde ich mich über Unterstützung freuen!
Anzeige
#2
geschrieben 12. April 2010 - 06:52
Noch dazu müssen ids immer eindeutig sein, dein Beispiel ist also schonmal grundlegend falsch (verwende stattdessen class)
ansonsten kannst du mit display:inline schon einiges erreichen.
Aber wie gesagt: Tabellen sollte man auch mit den dafür ausgelegten Tags beschreiben.
#3
geschrieben 12. April 2010 - 07:05
wenn du mir bestätigen könntest, das dieses tutorial noch aktuell ist, werde ich mich daran mal halten, obwohl ich das die html syntax für tabellen sehr aufgebläht finde
http://www.thestylew...cs/tables.shtml
merci!
#4
geschrieben 12. April 2010 - 07:39
Zitat (faxendicke: 12.04.2010, 08:05)
deine divs wären bei gleichem Funktionsumfang bei weitem aufgeblähter.
Soweit kann ich nichts gegen das Tutorial sagen. Es deckt das ab, was man über Tabellen wissen sollte. Ich vermiss nur ein wenig, wann man welches Tag benutzt.
Kurzzusammenfassung:
Zuerst kommt eine oder mehrere colgroups (<colgroup></colgroup>). Diese fassen mehrere Spalten in einer logischen Einheit zusammen um allen Spalten ein gemeinsames Aussehen geben zu können.
Innerhalb einer colgroup folgen ein oder mehrere cols (<col /> ohne schließenden Tag). Diese dienen dazu, der ganzen Spalte ein bestimmtes Aussehen zu geben. Wird vor allem für Breitenabgaben genutzt, was die Darstellung ein wenig beschleunigt. Die Anzahl aller cols in allen colgroups zusammen ergibt die gesamte Spaltenanzahl der Tabelle.
Dann folgt der thead (<thead></thead>), dass den Tabellenkopf beschreibt. Da rein kommen Tabellenzeilen (<tr></tr>) mit ths (<th></th>) für die Spaltenüberschriften.
tfoot beschreibt den unteren Bereich der Tabelle, in dem zum Beispiel irgendwelche Auswertungen der Werte oben stehen. Die Zellen in den Zeilen sind normale tds (<td></td>).
tbody schließchlich enthält den eigentlichen Inhalt. Hier sind wieder Zeilen mit den Zellen. Sollte die erste Spalte die Zeilenüberschrift darstellen, so ist diese Zelle wieder mit <th> zu kennzeichnen. Alle anderen Zellen sind <td>
In der Regel brauchst du aber nicht alles davon
<colgroup>, <thead>, <tbody> und <tfoot> sind optional. Du kannst die Zeilen mit den Inhalten auch direkt unterhalb von <table> platzieren. Die Trennung folgt nur der Anforderung an ein semantisches Web, nämlich die Daten möglichst so aufzubereiten, dass der Inhalt von Maschinen richtig erfasst werden kann
Naja, ich hoffe, das war soweit verständlich und hoffentlich korrekt. Zusammen mit dem Tut von oben solltest du aber einen guten Überblick über Tabellen bekommen
#5
geschrieben 12. April 2010 - 07:50
Der Nachteil ist, dass Webdesigner dich ausbuhen werden - denn eine Tabelle ist gleich nach (i)frame eines der Dinge, die man nicht gerne sieht. Meistens mit der Begründung "weil man es nicht macht" (denn eine gute Begrüund kann einem kaum einer liefern), aber das geistert halt gerne herum.
Wenn du wirklich modern sein willst und / oder musst, brauchst du keine Tabellen, dann würde ich Boxen nehmen. http://jendryschik.de/wsdev/einfuehrung/ei...n/css-boxmodell
Das Problem von Boxen ist aber, dass sie eigentlich nur in IE > 6 (also nicht im IE6), Firefox 3.x, Opera > 9.x und Safari/Chrome funktionieren, ältere Browser müsste man lang und breit ansteuern, was man heutzutage aber normalerweise weniger macht.
Was auch "in" ist, das ist die Geschichte mit jQuery - aber ich würde auf jQuery / Javascript so lange verzichten, bis es wirklich Sinn macht. Bei einer HTML-Tabelle ist das einzige wo Javascript für mich Sinn macht das abwechselnde Färben jeder 2. Zeile.
Dieser Beitrag wurde von Tienchen bearbeitet: 12. April 2010 - 07:52
#6
geschrieben 12. April 2010 - 07:53
#7
geschrieben 12. April 2010 - 07:58
vielen Dank, im Grunde sind "Boxen" genau das, wonach ich gesucht habe.
Ich möchte es nur für mich benutzen, ein wenig in der Materie rumspielen.
Keine Projekte mit Zeitdruck o. finanziellem Hintergrund.
Die Browserwahl ist mir eigentlich egal, da ich Momentan eh mit den neusten zu Fuß bin.
Vielen Dank für den Link, ich werde mich einlesen!
#8
geschrieben 12. April 2010 - 08:00
Was für ein Quatsch. Als ob Screenreader keine Tabellen lesen könnten.
Es geht hier sicherlich nicht um das Gestalten einer Seite mit Tabellen. Dafür natürlich das schöne Box-Modell.
Geht es hier um eine tabellarische Auflistung von Daten, wie als Bsp. eine Excel-Tabelle, dann ist der Table-Tag schon richtig.
Wie zwutz schon richtig erkannt hat, ist genau dafür der Table-Tag mit seinem ganzen Unter-Tags gedacht. Es geht hier um semantisches HTML und nicht darum sämtliche bereits vorhandenen HTML-Tags durch einen Div-Tag in Verbindung mit CSS nachzubilden.
#9
geschrieben 12. April 2010 - 08:24
http://www.vorsprungdurchwebstandards.de/t...rt-einzusetzen/
Du kannst sogar mit Javascript barrierefreie Webseiten erstellen...
Ich habe nur das Boxmodell vorgeschlagen, weil mir nicht wirklich erscheint, dass faxendicke auch wirklich eine Tabelle machen will, sondern eher ein dreispaltiges Seitenlayout.
#10
geschrieben 12. April 2010 - 08:55
Tienchen sagte:
Das dachte ich zu Beginn allerdings auch. Allerdings habe ich den Gedanken schnell verworfen, nach diesem Satz:
faxendicke sagte:
Was mich zur tabellarischen Ansicht von Daten ála Excel brachte.
#11
geschrieben 12. April 2010 - 09:03
dabei soll a) ein einheitliches design genutzt werden und b) es auf templates basieren, dh ich möchte ungerne ellenlangen quellcode erzeugen durch html 4.1 tables und statdessen auf css basierter logik arbeiten.
auch wenn es nur spielerein für mich sind, möcht ich schon gern "modern" scripten.
#12
geschrieben 12. April 2010 - 09:16
Wenn wirklich brauchst du
- PHP / Ruby o.ä. um die Daten auslesen zu können (serverseitige Scriptsprache)
- Eine Art Templateengine, um auch wirklich sinnvoll Templates auf Basis der PHP-Ausgaben gestalten zu können. Templateengine kann man sich aber auch selber selber schreiben, oder auf das "übliche" wie Smarty, PHPlib oder Dwoo ausweichen.
#13
geschrieben 12. April 2010 - 09:24
Ein fertiges CMS möchte ich nicht benutzen. Ich finde diese zu aufgebläht (für mein vorhaben) und möchte nur das, was ich präsentieren möchte, auch selber coden. zb wordpress und co sind mir echt zu träge und zu umfangreich.
Ich werde kein vollständiges CMS programmieren (dafür hätte ich die Zeit garnicht) aber so ein oder zwei scripte, die mir und meine präsentation im Web etwas unter die arme greifen.
#14
geschrieben 12. April 2010 - 10:04
Und deine Ergebnisse kannst du auch gerne hier präsentieren, damit wir anschließend Tienchens Sicherheits-Alarm-Glocke verstummen lassen können.
Zur Ausgangsfrage. Ja, ein Table-Tag auf der HTML-Seite ist für diese Art der Darstellung das Richtige. Wie du das nun serverseitig erstellst, ob du es nun "hässlich" machst und in deinem Code HTML rausschreibst oder womöglich eine kleine Template-Engine entwickelst, ist natürlich völlig dir überlassen.
#15
geschrieben 12. April 2010 - 10:11
Zitat (Witi: 12.04.2010, 09:00)
Geht es hier um eine tabellarische Auflistung von Daten, wie als Bsp. eine Excel-Tabelle, dann ist der Table-Tag schon richtig.
ok, dann wars ein missverständnis. Da das gestalten einer Seite mit Tabellen nicht mehr zeitgemäß ist.
- ← Mysql ... Where Field In (field) ?
- Skript/Web-Programmierung
- (cms) System Für Website Fotogalierie/videos →