Liste mit CSS erstellen

Ich für meinen Teil würde für so eine Liste bei Tabellen bleiben, ist um einiges einfacher!

Und wird ja auch in allen Browern gleich dargestellt, nur Layout mit Tabellen ist verpönt -> Layouten ohne Tabellen

Aber wer will Tabelle mit CSS

MoiN!

Ich glaube du verwechselst da etwas:

Stylessheets (CSS) formatieren die optische anzeige. Du kannst damit keine Listen erstellen oder anzeigen, du kannst aber das Aussehen von Listen, die du -wie auch immer- anzeigen läßt, optisch verändern, z.B. in der Schriftart, Schriftgröße, pp.

Die Listen selbst solltest du per PHP ind Datenbänke oder zumindest Textdateien schreiben und von dort ebenfalls mit PHP wieder auslesen.

für die Ausgabe bietet sich dann eine Tabelle an, die man wiederum mit CSS stylen kann.

Hast du PHP-fähigen Webspace?

G.a.d.M.

Ronald

Siehe auch Text von Ronald

Versuchs mal so:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">Wohnort</th>
    <th scope="col">Name</th>
    <th scope="col">Auto</th>
  </tr>
  <tr>
    <td>Wien</td>
    <td>Peter Alexander </td>
    <td>Aston Martin </td>
  </tr>
  <tr>
    <td>St. P&ouml;lten </td>
    <td>Albert Einstein </td>
    <td>Puch G </td>
  </tr>
  <tr>
    <td>T&uuml;rnitz</td>
    <td>Stephen Hawking </td>
    <td>Rollstuhl</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Sollte eigentlich auf jedem Browser gleich aussehen!

Zitat von mgraf

Und wird ja auch in allen Browern gleich dargestellt, nur Layout mit Tabellen ist verpönt -> Layouten ohne Tabellen

Sorry, mir platzt grade mal wieder die Hutschnur:

Zitat von css4you

Obwohl Tabellen nie zum Layouten von Seiten vorgesehen waren, wurden und werden sie meistens verwendet.

Ich finde es immer wieder faszinierend, wie Leute, die selbst kaum mehr Ahnung von HTML-Programmierung haben als wir, mit einem Brustton der Überzeugung Argumente in den Raum schmeißen, welche völlig haltlos sind.

Natürlich sind Tabellen ausdrücklich für das Layouten von Internetseiten vorgesehen. Warum bitte sollte man sonst die ganzen verschiedenen Tabellen-Tags extra ins HTML aufgenommen haben, damit sie nicht genutzt werden? Auch wären die ganzen Tabellenstyles ja völlig überflüssig - welch Schwachsinn..

Tabellen, egal ob sichtbar oder unsichtbar, gehören zum Standard-HTML und dürfen für alle Arten von Layouts hemmungslos eingesetzt werden. Die gerne genannte Variante "nur für tabellarische Darstellung von Daten" ist so hirnig wie nur sonst irgendetwas, wieviele Webmaster stellen denn tatsächlich DAten tabellarisch auf ihrer HP dar?

An Tabellen stößt sich kein Validator und auch die W3C hat nichts dagegen, die Bibel der Webmaster (SelfHTML) erklärt umfangreich wie es geht, also wo ist das Probem?

Es gibt Tabellengegner, die durch ihr lautes Geschrei langsam eine Lobby aufbauen - aber es gibt auch Leute die keine Hunde mögen und andere, die keine roten Autos leiden können. Das sind aber alles immer nur persönliche Meinungen.

Ich werde glaube ich mal ein "Webmaster-Club gegen dunkle oder bunte Webseitenhintergründe" gründen, wenn wir ähnlich erfolgreich sind, wie die Tabellengegner, die gibt es bald nur noch weiße HPs

Ronald
der sich bei solchem Schwachsinn immer nur an den Kopf fassen kann (was jetzt nicht mgraf galt)

EDIT: css4you.de ist ein Bayer - eine (zweifellos angagierte und viel wissende) Privatperson, aber eben nur eine Privatperson.

Mir doch egal ich bin Österreicher und stolz darauf, abgesehen von ein paar dingen (und bitte jetzt keine Fussball oder Ösi-Witze), habe mit Bayernn nur wenig zu tun...

Aber ohne hier eine Grundsatzdiskussion auslösen zu wollen, ich hab auch mal mit Tabellen gelayoutet, machs jetzt nimma
Warum -> keine Ahnung gefällt mir einfach besser, wenn ich keine x-verschatelten Tabellen habe

-> meine Meinung!!!!!!!!!!!!!!!!!!!!!!!!!!

aber eines noch -> http://seybold.jan-andresen.de/

Zitat von mgraf

aber eines noch -> http://seybold.jan-andresen.de/

Auch der ist nur einer von den vielen, die (falsches) Geschrei machen (übrigens wieder nur eine privatperson, diesmal aus denneuen Bundesländern).

Begreife es: es gibt Atomkraftgegner, Leute die Jäger hassen, Leute die keine Katzen mögen, Autogegner, Bahngegner, Fahrradgegner, Zufußgehgegner und was weiß ich alles - und es gibt Tabellengegner.

Unter dem Strich sind das aber alles nur Schreihälse, die manchmal zwar Alternativen anbieten, letztendlich aber meistens nur ihre eigene Meinung akzeptieren. Wenn wir auf all diese Menschen hören würden, dann würden wir heute noch irgendwo in einer Höhle beim offenen Feuer sitzen - mit 'nem Lapptop ohne Akkus ....

Ronald

Edit:
schau dir mal sein Impressum an -> http://jan-andresen.de/ich/impressum.php, da siehst du schon, daß der gar keine Ahnung hat (abgesehen davon, daß dieses Impressum jeden Abmahn-Anwalt freuen wird)

Geht ja auch ohne Akku -> Laptop ohne Akku

Aber lustig ist es immer wieder, denn so eine Diskussion gibt es in jedem Forum min. 1x / Jahr

Das war mein letzter Beitrag zu diesem Thema (für dieses Jahr ) weil es bekanntlich mehrere Wege "über die Straße gibt" (Nette Phrase, was ?)

Zitat von mgraf

Aber wer will -> Tabelle mit CSS

gehen tut alles

Zitat von MarieLouise

Ich finde das zwar spannend, es hilft mir aber nicht wesentlich weiter.

Ist es möglich eine Tabelle mit CSS zu bauen (ohne die "alten" HTML-Tags) oder geht das sowieso nicht ?

Das geht sicherlich, ist m.E. aber aufwendiger, als wenn du es mit einer traditionellen Tabelle machst.

Tipp: mach es mit PHP, laß PHP die Daten aus einer (Text)-Datei auslesen und dir dann den Quelltext schreiben. Das macht am wenigsten Arbeit bei der Wartung. Die Textdateien kannst du entweder ebenfalls mit PHP erstellen, oder mit irgendeinem Editor oder z.B. mit Excel oder Word.

G.a.d.M.

Ronald

MarieLouise:
Für einen strukturieren Aufbau wie von dir gewünscht (Name, Wohnort, Fahrzeug) ist der traditionelle Tabellen-HTML-Code weitaus besser geeignet, als eine CSS-Lösung. mgraf hat dafür das richtige Code-Beispiel dargestellt.
Falls du allerdings die Tabelle selbst formatieren willst (z.B. die Spalte "Name" mit blauem Hintergrund, "Wohnort" mit rotem usw.) dann macht es wiederum Sinn, diese Angaben in einer CSS-Datei zu hinterlegen und im Rahmen des HTML-Codes auf die definierten CSS-Klassen zu verweisen.

Das Schlagwort "Layouten ohne Tabellen" bedeutet aus meiner Sicht nicht, dass man generell auf Tabellen verzichten soll. Dort, wo strukturierte und damit tabellarische Darstellungen benötigt werden, haben Tabellen nach wie vor ihre Berechtigung.
Tabellen werden Dank CSS jedoch nicht mehr benötigt, wo es um reine Formatierungen geht. Hier bietet CSS weitaus bequemere Möglichkeiten.

Zitat von sejuma

MarieLouise:
Das Schlagwort "Layouten ohne Tabellen" bedeutet aus meiner Sicht nicht, dass man generell auf Tabellen verzichten soll. Dort, wo strukturierte und damit tabellarische Darstellungen benötigt werden, haben Tabellen nach wie vor ihre Berechtigung.
Tabellen werden Dank CSS jedoch nicht mehr benötigt, wo es um reine Formatierungen geht. Hier bietet CSS weitaus bequemere Möglichkeiten.

Weise Worte

Hier noch eine Tabelle mit CSS farblich formatiert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
th {background-color: #996600;}
td {border-style: dotted; border-color:#FF0000; border-width:1px;}


.wohnhort {background-color:#CCCCCC; color:#666666;}


.name {background-color: #F2F2F2; color:#666666;}


.auto {background-color:#CCCCCC; color:#666666;}


-->
</style>


</head>


<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">Wohnort</th>
    <th scope="col">Name</th>
    <th scope="col">Auto</th>
  </tr>
  <tr>
    <td class="wohnhort">Wien</td>
    <td class="name">Peter Alexander </td>
    <td class="auto">Aston Martin </td>
  </tr>
  <tr>
    <td class="wohnhort">St. P&ouml;lten </td>
    <td class="name">Albert Einstein </td>
    <td class="auto">Puch G </td>
  </tr>
  <tr>
    <td class="wohnhort">T&uuml;rnitz</td>
    <td class="name">Stephen Hawking </td>
    <td class="auto">Rollstuhl</td>
  </tr>
  <tr>
    <td class="wohnhort"></td>
    <td class="name"></td>
    <td class="auto"></td>
  </tr>
</table>
</body>
</html>

Ist nicht schön aber zeigt, im Ansatz was man mit Tabellen und CSS machen kann

mgraf:
Genau das ist der Code, den ich meinte: HTML-Tabellenstruktur kombiniert mit CSS. Speziell in diesem Fall geht es nicht um "entweder oder" sondern um "sowohl als auch".

Für eine komplette HP würd' ich dagegen schon auf die Tabellen verzichten. Bei einzelnen Darstellungen machen sie aber durchaus Sinn.

Sollte eigentlich so funktionieren:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
th {background-color: #996600; width: 252px;}
td {border-style: dotted; border-color:#FF0000; border-width:1px; width:250px;}


.wohnhort {background-color:#CCCCCC; color:#666666;}


.name {background-color: #F2F2F2; color:#666666;}


.auto {background-color:#CCCCCC; color:#666666;}


-->
</style>


</head>


<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th colspan="3" scope="col"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th scope="col">Wohnort</th>
        <th scope="col">Name</th>
        <th scope="col">Auto</th>
      </tr>
    </table></th>
  </tr>
  <tr>
    <td class="wohnhort">Wien</td>
    <td class="name">Peter Alexander </td>
    <td class="auto">Aston Martin </td>
  </tr>
  <tr>
    <td class="wohnhort">St. P&ouml;lten </td>
    <td class="name">Albert Einstein </td>
    <td class="auto">Puch G </td>
  </tr>
  <tr>
    <td width="250" class="wohnhort">T&uuml;rnitz</td>
    <td width="250" class="name">Stephen Hawking </td>
    <td width="250" class="auto">Rollstuhl</td>
  </tr>
  <tr>
    <td width="250" class="wohnhort"></td>
    <td width="250" class="name"></td>
    <td width="250" class="auto"></td>
  </tr>
</table>
</body>
</html>

Das Problem bei Tabellengestaltung mit CSS und insbesondere beim Verwenden von mehreren Tabellen in einer - ist, das alles mit eingerechnet werden muss bei der Angabe einer Weite (width), also. inkl allen border-width.... etc
Deshalb auch bei den <td> width=250 aber bei den <th> width = 252 !!

Dann muss man aber bei den <table> jegliche width entfernen, da sonst nichts mehr zusammenpasst!

lg

Es geht dir also darum, dass du eine fixe Kopfzeile hast und darunter einen scrollbaren Tabellenkörper ?
Mit HTML funktioniert das nicht, weil die Kopfzeile und der Tabellenkörper nie die gleiche Spaltenbreite behalten (in versch. Browsersn)