Tabellen umcodieren in DIV/CSS

[sheeba1507]

Hallo zusammen,

da immer wieder angesprochen wurde, daß Tabellen nicht mehr
modern sind und von den Suchmaschienen ungern gesehen werden,
habe ich mich entschlossen, dem Folge zu leisten.

Leider habe ich nach einigen Versuchen immer noch keine passende
Idee, wie so etwas funktionieren könnte.

Hier mal ein Beispiel :

  <table>
    <tr>
      <td class="td140"><strong>Datum (von-bis)</strong></td>
      <td class="td140"><strong>Uhrzeit (von-bis)</strong></td>
      <td class="td360"><strong>Beschreibung</strong></td>
      <td class="td100"><strong>Anm./Telefon</strong></td>
    </tr>
  </table>

Dieses Script erzeugt eine Tabellen-Überschrift, die nachfolgenden
Termin-Daten kommen aus einer Datenbank.

Die Class "td140" besagt z.B. eine Weite von 140px sowie weiterer
Formatierungen.

Wie kann ich jetzt dieses Tabellen-Layout umwandeln in div/css mit
den gleichen Format-Eigenschaften ?
Oder gibt es eine andere modernere Möglichkeit, Tabellen darzustellen ?

Ich erwarte keine fertigen Scripts, sondern einen Schub in die richtige
Richtung, damit ich einen Ansatz habe.

Schon mal Danke im voraus.

Gruß, Mike

[Brian]

AW: Tabellen umcodieren in DIV/CSS

unmodern sind und von den Suchmaschienen ungern gesehen werden

halt, das was von suchmaschienen ungern gesehen wird ist ein unverhältnismäßig hoher anteil von html gegenüber text. je mehr textanteil im gesamten html dokument, desto besser......

also du musst dir das anders vor augen stellen. tabellen sind immer noch nützlich, dann nämlich wenn man etwas tabellarisch darstellen möchte (wofür sie auch da sind).
der vorteil von tabellen ist eben, dass jede spalte gleichlang ist und du dort keine fixe größe angeben musst. erweitert man dein beispiel um eine 2. spalte und entfernt die unnötige größen definition, kann sie als gute informations ein und ausgabe dienen. außerdem würde ich th benutzen anstatt <td><strong>, denn strong dient, meiner meinung nach, nur dazu um schlüsselwörter hervorzuheben. <b> hat immer noch nicht ausgedient, ebensowenig <th>...

<table>
    <tr>
      <th>Datum (von-bis)</th><td><select name="name"><option>bla</option></select></td>
    </tr>
    <tr>
      <th>Uhrzeit (von-bis)</th><td><input type="text" /></td>
    </tr>
    <tr>
      <th>Beschreibung</td><td><input type="text" /></td>
    </tr>
    <tr>
      <th>Anm./Telefon</td><td><input type="text" /></td>
    </tr>
  </table>

nun wird schön alles in reih und glied dargestellt, unabhängig von der schriftgröße und vor allem unabhängig von der länge der eingegeben texte.

so soviel zum eigentlichen gebrauch der tabellen. wofür sie nicht verwendet werden sollten ist das design unterzubringen. das ist unflexibel und hat einen riesigen undurchsichtigen quellcode.....
dazu gibt es viele schöne links. so zb:

http://css.fractatulum.net/beispiele.htm

http://www.barrierefreies-webdesign.de/knowhow/index.php#layout-techniken

ein etwas anderes beispiel ist meine seite: http://www.ifyouwantblood.de/de/
dort sind die div boxen oben und links fix während du den inhalt scrollen kannst. das ist meine lieblingsvariante weil da das menü nicht verschwindet (und du nicht ewig und drei tage hochscrollen musst um das wieder zu finden....)....


gruß

edit> was hat das eigentlich in PHP zu suchen?

[sheeba1507]

AW: Tabellen umcodieren in DIV/CSS

@Brian

Vorab Anmerkung :

edit> was hat das eigentlich in PHP zu suchen?

Sorry, aber da ich die meisten Postings zu Problemen in PHP habe,
war es von mir reine Gewohnheit, ihn hier reinzustellen.
@Admin, wenn notwendig, verschieben.

... außerdem würde ich th benutzen ...

... bei der Codierung mit "th" ergab die Validierung Fehler, deshalb habe
ich sie wieder entfernt.

<th>Uhrzeit (von-bis)</th><td><input type="text" /></td>

... ist am Thema vorbei. Das von mir gezeigte Beispiel stellt lediglich
eine Überschrifts-Zeile dar, eine Eingabe ist hier nicht vorgesehen.

... wofür sie nicht verwendet werden sollten ist das design unterzubringen ...

... hier ist von einer Tabellen-Überschrift die Rede, nicht von einem
Design.

Warum ich diesen Thread überhaupt eröffnet habe, ist eine Anmerkung,
die mir bei einer Bewertung aufgefallen ist, und zwar hier.
Nach Eingabe meiner Webseite erhalte ich u.a. folgende Anmerkungen :

Technische Details :
Die Seite verwendet anscheinend Tabellenkonstrukte für das Layout.

Davon ausgehend war ich bislang der Meinung, es seien alle Tabellen
gemeint, die ich in meinen Scripten verwendet habe.
Das einzige, immer wiederkehrende, Tabellen-Layout befindet sich
lediglich im Besucher-Counter unterhalb der Navi-Leiste.
Alle anderen Tabellen-Konstrukte befinden z.B. in den Formularen.

Um eine Möglichkeit kennen zu lernen, alle Tabellen-Konstrukte zu
umgehen, habe ich diese Anfrage hier gestellt.
Deshalb bitte ich um weitere Anregungen und Tipps zu diesem Problem.

Gruß, Mike

[Ingo]

AW: Tabellen umcodieren in DIV/CSS

Hi,

@Admin, wenn notwendig, verschieben.

nicht notwendig, aber sinnvoll...

Das von mir gezeigte Beispiel stellt lediglich
eine Überschrifts-Zeile dar, eine Eingabe ist hier nicht vorgesehen.

dann handelt es sich auch nicht um tabellarische Daten und Du solltest diese Zeile als Hx auszeichnen.

Alle anderen Tabellen-Konstrukte befinden z.B. in den Formularen.

auch das sind keine tabellaischen Daten. Nutze das hierfür vorgesehene Element <label> und formatiere das Ganze mit CSS.

Gruß
Ingo

[sheeba1507]

AW: Tabellen umcodieren in DIV/CSS

@Ingo

Erstmal vielen Dank für deine Tipps. Sollte die von mir nun angewendete
Variante nicht zum Erfolg führen, werde ich sie mir mal genauer
anschauen.

Vorab möchte ich aber mal eine Variante von mir vorstellen.
Die Daten aus der Datenbank habe ich hierzu mal erstezt durch
direkte Daten (fett).

<?php
while ($datensatz = mysql_fetch_array($ergebnis))
  {
  ?>
  <div class="term_left">
    Datum : [B]16.10.2007[/B]
  </div>
  <div class="term_right">
    Uhrzeit : [B]15:00 - 18:00[/B] Uhr
  </div>
  <div class="term_text">
    [B]Dampflok-Fahrt nach Dresden[/B]<br />
    (Beschreibung der Veranstaltung, bla bla bla)<br />
    [B]Weitere Infos unter : [/B]
    <a href="Link zur Webseite" target="_blank">
      Titel der Webseite
    </a>
  </div>
  <?php
  }
  ?>

Hier die zugehörigen CSS-Formate :

.term_left {
  float: left;
  font-size: 14px;
  color: black;
  background-color: #FFDEAD;
  border-top: 1pt solid black;
  border-left: 1pt solid black;
  border-right: 1pt solid black;
  width: 370px;
  padding-left: 5px;
  }

.term_right {
  float: right;
  font-size: 14px;
  color: black;
  background-color: #FFDEAD;
  border-top: 1pt solid black;
  border-left: 1pt solid black;
  border-right: 1pt solid black;
  width: 379px;
  padding-left: 5px;
  }

.term_text {
  font-size: 15px;
  color: black;
  background-color: #FAF0E6;
  border: 1pt solid black;
  padding: 5px;
  clear: both;
  }

Im FF wird alles wunderbar angezeigt.
Jedoch im IE6 ist nur bei dem ersten Termin eine Leerzeile
zwischen "term_left / term_right" und "term_text" zu sehen.
Alle weiteren Termine werden ordnungsgemäß dargestellt.

Liegt hier irgendwie ein Bug im IE vor oder will mich das Mistvieh
wieder mal nur ärgern ?

Ich kann mir jedenfalls diese Leerzeile nicht erklären.
Vieleicht fällt dir oder den anderen ja etwas in der Codierung auf.

Gruß, Mike

[Brian]

AW: Tabellen umcodieren in DIV/CSS

@Brian
... bei der Codierung mit "th" ergab die Validierung Fehler, deshalb habe
ich sie wieder entfernt.

abhilfe> benutz einen richtigen validierer: http://validator.w3.org/

http://validator.w3.org/check?uri=www.ifyouwantblood.de%2F1.html&charset=%28detect+automatically%29&doctype=Inline&group=0

... ist am Thema vorbei. Das von mir gezeigte Beispiel stellt lediglich
eine Überschrifts-Zeile dar, eine Eingabe ist hier nicht vorgesehen.

und hatte beispiel charakter. genauso wie das von mir....

... hier ist von einer Tabellen-Überschrift die Rede, nicht von einem
Design.

dann solltest du wirklich hx benutzen

Warum ich diesen Thread überhaupt eröffnet habe, ist eine Anmerkung,
die mir bei einer Bewertung aufgefallen ist, und zwar hier.
Nach Eingabe meiner Webseite erhalte ich u.a. folgende Anmerkungen :

Davon ausgehend war ich bislang der Meinung, es seien alle Tabellen
gemeint, die ich in meinen Scripten verwendet habe.
Das einzige, immer wiederkehrende, Tabellen-Layout befindet sich
lediglich im Besucher-Counter unterhalb der Navi-Leiste.
Alle anderen Tabellen-Konstrukte befinden z.B. in den Formularen.

Um eine Möglichkeit kennen zu lernen, alle Tabellen-Konstrukte zu
umgehen, habe ich diese Anfrage hier gestellt.
Deshalb bitte ich um weitere Anregungen und Tipps zu diesem Problem.

wenn ich von dieser seite ausgehe: http://www.csc-oldenburg.de/

dann finde ich folgendes: eine besucherstatistik die sich in einer box befindet, allerdings durch eine tabelle dargestellt ist. das ist ein gutes beispiel, wie du tabellen für designs mißhandeln kannst. hingegen finde ich die login box für den privatebereich so in ordnung (nur hat der, wenn der wirklich privat ist, eigentlich - aus sicherheitsbedenken - nichts dort verloren...)

außerdem ist mir noch auf die schnelle das hier aufgefallen:

  <center>
    <p style="font-size:16px; font-weight:bold; color:blue; ">
      Wer von einen Termin eher Kenntnis erlangt wie ich, umgehend melden.
    </p>
  </center>

rein html technisch sollte das andersrum (center innen) dargestellt werden, außerdem kann man das per css noch besser machen.

    <p style="font-size:16px; font-weight:bold;">
    
    Mit dieser Modelleisenbahn-Simulation ist es m&ouml;glich, seine ganz pers&ouml;nliche
    kleine Welt auf seinem Bildschirm zu erschaffen.
    <br /><br />
    Dabei braucht man sich keine Gedanken zu machen, wie gro&szlig; diese Anlage mal
    werden soll. Die Grenzen werden lediglich durch die Gr&ouml;&szlig;e der
    Festplatte bestimmt.
    Im Gegensatz zu einer realen Modell-Eisenbahn reicht hier ein Platz, wo ein Rechner
    mit einem Monitor sowie eine Tastatur und eine Maus stehen k&ouml;nnen.
    <br /><br />

hier benutzt du <br> und <p> falsch. <p> ist die abkürzung für paragraph, dass heißt es ist standardmäßig vorgesehen, dass nach dem ende von p ca. eine linie abstand bleibt. somit kannst du dir <br><br> sparen. das ganze sollte also so aussehen:

  <p style="font-size:16px; font-weight:bold;">
    Mit dieser Modelleisenbahn-Simulation ist es m&ouml;glich, seine ganz pers&ouml;nliche
    kleine Welt auf seinem Bildschirm zu erschaffen.
    </p>
    <p style="font-size:16px; font-weight:bold;">
    Dabei braucht man sich keine Gedanken zu machen, wie gro&szlig; diese Anlage mal
    werden soll. Die Grenzen werden lediglich durch die Gr&ouml;&szlig;e der
    Festplatte bestimmt.
    Im Gegensatz zu einer realen Modell-Eisenbahn reicht hier ein Platz, wo ein Rechner
    mit einem Monitor sowie eine Tastatur und eine Maus stehen k&ouml;nnen.
    </p>

wenn du die definition von p nun noch in eine head oder externe css referenz bringst ists noch besser.....

gruß

[sheeba1507]

AW: Tabellen umcodieren in DIV/CSS

@Brian

abhilfe> benutz einen richtigen validierer: http://validator.w3.org/

... den benutze ich bereits.

... eine besucherstatistik die sich in einer box befindet, allerdings durch eine tabelle dargestellt ist. das ist ein gutes beispiel, wie du tabellen für designs mißhandeln kannst ...

... war auch mein erster Gedanke. Wird aber bei der derzeitigen internen
Umstrukturierung mit berücksichtigt.

HTML-Code:
<center>
<p style="font-size:16px; font-weight:bold; color:blue; ">
Wer von einen Termin eher Kenntnis erlangt wie ich, umgehend melden.
</p>
</center>

rein html technisch sollte das andersrum (center innen) dargestellt werden, außerdem kann man das per css noch besser machen

... wurde bereits geändert, ist aber noch nicht online.

hier benutzt du <br> und <p> falsch. <p> ist die abkürzung für paragraph, dass heißt es ist standardmäßig vorgesehen, dass nach dem ende von p ca. eine linie abstand bleibt. somit kannst du dir <br><br> sparen.

... das Ergebnis ist das Gleiche. Ich benutze "<br />" für einen Zeilenumbruch
und "<br /><br />" für einen Zeilenumbruch + Leerzeile.

... wenn du die definition von p nun noch in eine head oder externe css referenz bringst ists noch besser.....

... wurde bereits geändert, ist aber noch nicht online.

Vielen Dank für deine Anregungen.
Leider bringen sie mich bei meinem Problem ...

Im FF wird alles wunderbar angezeigt.
Jedoch im IE6 ist nur bei dem ersten Termin eine Leerzeile
zwischen "term_left / term_right" und "term_text" zu sehen.
Alle weiteren Termine werden ordnungsgemäß dargestellt.

... keinen Schritt weiter.

Trotzdem vielen Dank für deine Bemühungen.

Gruß, Mike

[Ingo]

AW: Tabellen umcodieren in DIV/CSS

Hi,

... das Ergebnis ist das Gleiche. Ich benutze "<br />" für einen Zeilenumbruch
und "<br /><br />" für einen Zeilenumbruch + Leerzeile.

das Ergebnis ist nicht das Gleiche. zum einen ist BR (nur) für einen manuellen Zeilenumbuch gedacht und zum anderen ist eine Leerzeile doch ein deutliches Indiz dafür, dass ein neuer Absatz beginnt und demnach P die logische Auszeichnung sein sollte. Dann hast Du auch die Möglichkeit, den Abstand der Absätze per CSS festzulegen.

Gruß
Ingo

[sheeba1507]

AW: Tabellen umcodieren in DIV/CSS

Hallo Ingo und Brian,

laßt uns doch erst einmal wieder zum eigentlichen Problem zurück kommen.
Um die Feinheiten der Codierung in Punkto Text-Layout kann ich mich
auch später noch kümmern.
Ich habe es aber schon mal auf meiner ToDo-Liste vermerkt.

Meine Eingangs-Frage war, warum die Darstellung im IE6 von der
im FF abweicht.
Sowohl das Gästebuch als auch die News/Updates sind genauso aufgebaut
wie der Termin-Kalender.
Alle drei werden im FF korrekt dargestellt. Das Gb und die N/U werden im
IE6 ebenfalls korrekt dargestellt.
Lediglich der Termin-Kalender weißt ausschließlich im ersten Termin eine
Zwischenzeile auf.
Mittlerweile habe ich auch versucht, die classes vom Gästebuch,
die ja fast identisch sind, hier mal einzusetzen, aber ohne Erfolg.

Auch die Daten selbst habe ich überprüft und konnte keinen Fehler
feststellen.
Gebe ich einen neuen Termin ein, so wird der zuvor fehlerhaft dargestellte
Termin korrekt angezeigt, dafür aber der neue Termin wiederum nicht.

Die geänderten Webseiten werden erst heute Nacht hochgeladen, damit
die Ausfallzeit keinen Einfluß auf die Besucher hat.
Deshalb kann ich zur Zeit keine Darstellung vorführen.
Aber vieleicht kann ja jemand an Hand der Codierung feststellen, wo
hier ein Fehler vorliegen kann.

Ich bin für jede Hilfe dankbar.

Gruß, Mike

[Brian]

AW: Tabellen umcodieren in DIV/CSS

Hallo Ingo und Brian,

laßt uns doch erst einmal wieder zum eigentlichen Problem zurück kommen.
Um die Feinheiten der Codierung in Punkto Text-Layout kann ich mich
auch später noch kümmern.
Ich habe es aber schon mal auf meiner ToDo-Liste vermerkt.

Meine Eingangs-Frage war, warum die Darstellung im IE6 von der
im FF abweicht.
Sowohl das Gästebuch als auch die News/Updates sind genauso aufgebaut
wie der Termin-Kalender.
Alle drei werden im FF korrekt dargestellt. Das Gb und die N/U werden im
IE6 ebenfalls korrekt dargestellt.
Lediglich der Termin-Kalender weißt ausschließlich im ersten Termin eine
Zwischenzeile auf.
Mittlerweile habe ich auch versucht, die classes vom Gästebuch,
die ja fast identisch sind, hier mal einzusetzen, aber ohne Erfolg.

Auch die Daten selbst habe ich überprüft und konnte keinen Fehler
feststellen.
Gebe ich einen neuen Termin ein, so wird der zuvor fehlerhaft dargestellte
Termin korrekt angezeigt, dafür aber der neue Termin wiederum nicht.

Die geänderten Webseiten werden erst heute Nacht hochgeladen, damit
die Ausfallzeit keinen Einfluß auf die Besucher hat.
Deshalb kann ich zur Zeit keine Darstellung vorführen.
Aber vieleicht kann ja jemand an Hand der Codierung feststellen, wo
hier ein Fehler vorliegen kann.

Ich bin für jede Hilfe dankbar.

Gruß, Mike

da bist du an den grenzen von CSS - dem IE. hier hilft nur ungewisses rumprobieren. vielleicht mal bei .text clear:both entfernen und stattdessen ein <br /> dahinsetzen. wenn alles nichts hilft, probier lass mal die klassen definition beim 3. div weg und schau dir das ergebnis mal an....usw...

 <div class="term_left"> 
    Datum : [b]16.10.2007[/b] 
  </div> 
  <div class="term_right"> 
    Uhrzeit : [b]15:00 - 18:00[/b] Uhr 
  </div> 
  <div> 
    [b]Dampflok-Fahrt nach Dresden[/b]<br /> 
    (Beschreibung der Veranstaltung, bla bla bla)<br /> 
    [b]Weitere Infos unter : [/b] 
    <a href="Link zur Webseite" target="_blank"> 
      Titel der Webseite 
    </a> 
  </div>

[sheeba1507]

AW: Tabellen umcodieren in DIV/CSS

@Brian

... probier lass mal die klassen definition beim 3. div weg ...

... kann ich nicht machen, da in dieser Klasse sowohl Hintergrund-Farbe
als auch padding deklariert werden.
Außerdem muß ich hier auch "clear: both;" deklarieren, um die beiden
vorangegangenen div-Boxen zu egalisieren.

Gruß, Mike

[Brian]

AW: Tabellen umcodieren in DIV/CSS

@Brian


... kann ich nicht machen, da in dieser Klasse sowohl Hintergrund-Farbe
als auch padding deklariert werden.
Außerdem muß ich hier auch "clear: both;" deklarieren, um die beiden
vorangegangenen div-Boxen zu egalisieren.

Gruß, Mike

ich meinte testweise. du musst den bug ja eingrenzen....

[sheeba1507]

AW: Tabellen umcodieren in DIV/CSS

@Brain

ich meinte testweise. du musst den bug ja eingrenzen....

... diese Idee hatte ich auch schon, hat nur leider keine konkreten
Ergebnisse eingebracht.

Gruß, Mike

Countdown : noch 3:15 Stunden bis Upload

[Brian]

AW: Tabellen umcodieren in DIV/CSS

hi,

wenn du das hier meinst> http://www.csc-oldenburg.de/termin.php

dann sehe ich da eine tabelle. und in dem teil finde ich das auch richtig.

gruß

[sheeba1507]

AW: Tabellen umcodieren in DIV/CSS

@Brian

Das ist noch das alte Layout.
Auf Grund von diversen Problemen konnte ich gestern das neue
Layout noch nicht hochladen.

Ich werde es aber, trotz Fehler, heute Nacht nachholen, dann
kannst du morgen den Fehler sehen.

Gruß, Mike


Edit (autom. Beitragszusammenführung):

Das neue Layout steht jetzt zur Verfügung.

Der Fehler im Termin-Kalender konnte bislang nicht behoben werden.
Vieleicht erkennt jetzt jemand, welcher Fehler hier vorliegt.

Gruß, Mike