WinFuture-Forum.de: [css] Tabellendarstellung, Fexibel - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
  • 2 Seiten +
  • 1
  • 2

[css] Tabellendarstellung, Fexibel


#1 Mitglied ist offline   faxendicke 

  • Gruppe: Verbannt
  • Beiträge: 11
  • Beigetreten: 11. April 10
  • Reputation: 0

geschrieben 12. April 2010 - 06:29

Hallo,

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!
0

Anzeige



#2 Mitglied ist offline   zwutz 

  • Gruppe: aktive Mitglieder
  • Beiträge: 652
  • Beigetreten: 17. Juli 07
  • Reputation: 1
  • Geschlecht:Männlich

geschrieben 12. April 2010 - 06:52

Für Tabellen gibt es bereits passende Tags, die musst du nicht mit divs simulieren.

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.
Raise your glass if you are wrong
0

#3 Mitglied ist offline   faxendicke 

  • Gruppe: Verbannt
  • Beiträge: 11
  • Beigetreten: 11. April 10
  • Reputation: 0

geschrieben 12. April 2010 - 07:05

okay danke.

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!
0

#4 Mitglied ist offline   zwutz 

  • Gruppe: aktive Mitglieder
  • Beiträge: 652
  • Beigetreten: 17. Juli 07
  • Reputation: 1
  • Geschlecht:Männlich

geschrieben 12. April 2010 - 07:39

 Zitat (faxendicke: 12.04.2010, 08: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 ;)


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
Raise your glass if you are wrong
0

#5 Mitglied ist offline   Tienchen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 423
  • Beigetreten: 09. März 08
  • Reputation: 0
  • Geschlecht:Männlich

geschrieben 12. April 2010 - 07:50

Der Vorteil von HTML-Tabellen ist eindeutig, dass sie sich sehr schlecht verschieben können. Wenn du div-Tabellen hast passiert es sehr häufig, dass alles irgendwo in der Gegend sich befindet aber nicht dort, wo du es haben möchtest. Selbiges passiert, wenn du keine fixe Breite einsetzt, wenn der Benutzer einen anderen Browser / andere Einstellungen hat etc.
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

0

#6 Mitglied ist offline   tobias86 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.690
  • Beigetreten: 14. August 06
  • Reputation: 6
  • Geschlecht:Männlich
  • Wohnort:localhost

geschrieben 12. April 2010 - 07:53

Wenn du barrierefrei entwickelst, nimmt man keine Tabellen, weil diese nicht mit von Blinden gelesen werden können.
0

#7 Mitglied ist offline   faxendicke 

  • Gruppe: Verbannt
  • Beiträge: 11
  • Beigetreten: 11. April 10
  • Reputation: 0

geschrieben 12. April 2010 - 07:58

Hallo Tienchen,

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!
0

#8 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 12. April 2010 - 08:00

@tobias86
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.
0

#9 Mitglied ist offline   Tienchen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 423
  • Beigetreten: 09. März 08
  • Reputation: 0
  • Geschlecht:Männlich

geschrieben 12. April 2010 - 08:24

Zum Thema Barrierefreiheit / Screenreader (ist ja nicht immer dasselbe, also Section 508 und Wai-Aria):
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.
0

#10 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 12. April 2010 - 08:55

Tienchen sagte:

dass faxendicke auch wirklich eine Tabelle machen will, sondern eher ein dreispaltiges Seitenlayout.

Das dachte ich zu Beginn allerdings auch. Allerdings habe ich den Gedanken schnell verworfen, nach diesem Satz:

faxendicke sagte:

Die Anzahl der Spalten kann dabei variieren.

Was mich zur tabellarischen Ansicht von Daten ála Excel brachte.
0

#11 Mitglied ist offline   faxendicke 

  • Gruppe: Verbannt
  • Beiträge: 11
  • Beigetreten: 11. April 10
  • Reputation: 0

geschrieben 12. April 2010 - 09:03

im prinzip geht es darum, das ich daten aus einer mysql datenbank auslesen und entsprechend wiedergeben möchte.

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.
0

#12 Mitglied ist offline   Tienchen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 423
  • Beigetreten: 09. März 08
  • Reputation: 0
  • Geschlecht:Männlich

geschrieben 12. April 2010 - 09:16

Wieso benutzt du dafür nicht gleich ein fertiges CMS? Daten aus einer SQL-Datenbank klingelt bei mir erst einmal die "Sicherheits-Alarm-Glocke".
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.
0

#13 Mitglied ist offline   faxendicke 

  • Gruppe: Verbannt
  • Beiträge: 11
  • Beigetreten: 11. April 10
  • Reputation: 0

geschrieben 12. April 2010 - 09:24

Grundkenntnisse in PHP/MySQL/PHPmyAdmin etc sind vorhanden, daher möchte ich darauf aufbauen.

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.
0

#14 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 12. April 2010 - 10:04

Also in dem Fall würde ich auch was Eigenes entwickeln und auf kein CMS setzen. Einfach auch deshalb, weil du in diesem Projekt lernst und in der entsprechenden Programmiersprache besser wirst.

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.
0

#15 Mitglied ist offline   tobias86 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.690
  • Beigetreten: 14. August 06
  • Reputation: 6
  • Geschlecht:Männlich
  • Wohnort:localhost

geschrieben 12. April 2010 - 10:11

 Zitat (Witi: 12.04.2010, 09:00)

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.


ok, dann wars ein missverständnis. Da das gestalten einer Seite mit Tabellen nicht mehr zeitgemäß ist.
0

Thema verteilen:


  • 2 Seiten +
  • 1
  • 2

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0