Auflistung mittels CSS gestalten

Hallo,

ich arbeite gerade an einer dynamisch erstellten Auflistung, welche ich mittels CSS formatieren möchte. Bisher sieht mein Code etwa folgendermaßen aus:

while ($row = $result-\>fetch\_assoc()) {
 echo ' ' . $row['name'] . ', ' . $row['beruf'] . ', ' . $row['land'] . ' ';
}

Die Ausgabe will mir allerdings nicht so recht gefallen:

Otto Normalverbrauer, Mechaniker, Deutschland
Hans Müller, Maurer, Österreich
Max Mustermann, Beamter, Deutschland

Lieber wäre mir eine Auflistung im Stil einer Tabelle (jedoch ohne Rahmen):

+-----------------------+-------------+--------------+
| Name | Beruf | Land |
+-----------------------+-------------+--------------+
| Otto Normalverbrauer | Mechaniker | Deutschland |
+-----------------------+-------------+--------------+
| Hans Müller | Maurer | Österreich |
+-----------------------+-------------+--------------+
| Max Mustermann | Beamter | Deutschland |
+-----------------------+-------------+--------------+

Die Spaltenlänge sollte sich jeweils am längsten Eintrag orientieren, etwas „Buffer“ zur nächsten Spalte wäre wunschenswert. Unter Umständen möchte ich auch jede zweite Zeile farblich hinterlegen.

Wie kann ich dieses Design mittels CSS (ohne Tabelle?) umsetzen? Für einen „Schubs“ in die richtige Richtung wäre ich dankbar. Eine komplette Lösung ist vorrangig nicht gefragt.

Vielen Dank für eure Vorschläge!

Wie kann ich dieses Design mittels CSS (ohne Tabelle?)
umsetzen? Für einen „Schubs“ in die richtige Richtung wäre ich
dankbar. Eine komplette Lösung ist vorrangig nicht gefragt.

warum ohne Tabelle?

mit border:none bekommst du im css den rahmen weg und mit nem 2ten Zähler im php kannst du jeder 2ten noch ne id oder ne class geben und dann im CSS jeder mit dieser id/class noch ne background-color setzen

Danke für deinen Post. Ich beschäftige mich erst relativ kurz mit Webdesign, habe aber schon ein paar mal gelesen, dass man Tabellen nach Möglichkeit durch CSS ersetzen soll. Ist eine Tabelle in meinem Fall semantisch (?) angebracht?

Hallo,

Danke für deinen Post. Ich beschäftige mich erst relativ kurz
mit Webdesign, habe aber schon ein paar mal gelesen, dass man
Tabellen nach Möglichkeit durch CSS ersetzen soll. Ist eine
Tabelle in meinem Fall semantisch (?) angebracht?

-> FAQ:3384

-> http://de.selfhtml.org/html/tabellen/aufbau.htm

-> http://de.selfhtml.org/html/tabellen/layouts.htm

-> http://little-boxes.de/lb1/3.1-div-seite-in-bereiche…

Grüße Roman

Danke für deinen Post. Ich beschäftige mich erst relativ kurz
mit Webdesign, habe aber schon ein paar mal gelesen, dass man
Tabellen nach Möglichkeit durch CSS ersetzen soll. Ist eine
Tabelle in meinem Fall semantisch (?) angebracht?

Das heißt doch nicht das Tabellen jetzt generell verboten sind. Das abraten von Tabellen gilt eher für komplette Layouts die als Tabellen gestaltet sind.

Aber hier ist die logisch korekkte Anordnung (wie in deinem ersten Post) eine Tabelle und kann daher denke ich auch bedenkenlos genutzt werden.

Hallo,

Danke für deinen Post. Ich beschäftige mich erst relativ kurz
mit Webdesign, habe aber schon ein paar mal gelesen, dass man
Tabellen nach Möglichkeit durch CSS ersetzen soll. Ist eine
Tabelle in meinem Fall semantisch (?) angebracht?

Dein Beispiel ist gerade ein Paradebeispiel für eine Datentabelle!

Beatrix

Danke für eure Postings und Links. Es freut mich zu hören, dass Tabellen für tabellarische Darstellungen geeignet sind. Klingt soweit auch logisch :wink:

Ich habe meine Tabelle nun mit „table {width:100%}“ über mein gesamtes Seitenlayout gespannt. Je nachdem welche Daten aus der Datenbank geliefert werden, sind manche Spalten breiter und andere weniger breit. Die Spalten sind auch jeweils etwas breiter als der Inhalt, um die 100% Tabellenbreite zu erreichen. Dabei fällt auf, dass Spalten mit mehr Inhalt mehr „Leerraum“ am Ende zugeteilt wird.

Tabellenbreite 100%
+---------------+----------------------------+-------------+-----------+
| Name | Beruf | Land | Ort |
+---------------+----------------------------+-------------+-----------+
| Hans Müller | Zimmermann, Tapezierer | Österreich | Salzburg |
+---------------+----------------------------+-------------+-----------+

Die Darstellung wäre allerdings übersichtlicher, wenn der zur Verfügung stehende Platz gleichmäßig auf die Spalten verteilt werden würde.

Tabellenbreite 100%
+---------------+--------------------------+--------------+------------+
| Name | Beruf | Land | Ort |
+---------------+--------------------------+--------------+------------+
| Hans Müller | Zimmermann, Tapezierer | Österreich | Salzburg |
+---------------+--------------------------+--------------+------------+

Ist dies möglich?

Hallo,

Die Darstellung wäre allerdings übersichtlicher, wenn der zur
Verfügung stehende Platz gleichmäßig auf die Spalten verteilt
werden würde.

Das lässt sich mit table-layout: fixed; erreichen. Du kannst auch die Breite der einzelnen Spalten mit CSS vorgeben: http://de.selfhtml.org/css/eigenschaften/tabellen.ht…

HTH
Heavy