Doris Wiese-Kellermann: Tabelle wird auseinandergetrieben

Hallo Leute!

Ich hab in Photoshop eine Grafik erstellt, die aus mehreren einzelnen Elementen auf weißem Hintergrund besteht. Mit Hilfe von Adobe's Image-Ready habe ich sie in eine HTML-Tabelle unterteilt. Einige Tabellenzellen erstrecken sich über mehrere Zeilen bzw. Spalten (rowspan=3, colspan=5 etc.).

Der MS InternetExplorer 4.5 auf dem Mac stellt die Tabelle als einziger von mir getesteten Browser richtig dar. Sowohl Netscape Navigator 4.5 auf dem Mac und auf dem DOS-PC als auch der IE 5.0 auf dem DOS-PC treiben die Tabelle unverständlicherweise auseinander, sodass das komplette Layout durcheinander gebracht wird. Z.T. werden Grafiken, die ich in zwei oder mehr Tabellenzellen aufgeteilt habe optisch auseinandergerissen. Die Abstände sind in den Browsern unterschiedlich. IE 5.0 behält die Tabellenbreite bei, NS ignoriert vorgegebene Breite und Länge.

Cellpadding als auch cellspacing stehen auf null.

Gibt es eine Lösung?

Danke für Eure Hilfe.

Doris

  1. Hallo,

    Gibt es eine Lösung?

    Danke für Eure Hilfe.

    Ohne den code zu sehen nicht

    lg
    Ludwig

  2. Hallo Leute!

    Ich hab in Photoshop eine Grafik erstellt, die aus mehreren einzelnen Elementen auf weißem Hintergrund besteht. Mit Hilfe von Adobe's Image-Ready ......
    Der MS InternetExplorer 4.5 auf dem Mac stellt die Tabelle als einziger von mir getesteten Browser richtig dar. Sowohl Netscape Navigator 4.5 auf dem Mac und auf dem DOS-PC als auch der IE 5.0 auf dem DOS-PC treiben die Tabelle unverständlicherweise auseinander, sodass das komplette Layout durcheinander gebracht wird. Z.T. werden Grafiken, die ich in zwei oder mehr Tabellenzellen aufgeteilt habe optisch auseinandergerissen. Die Abstände sind in den Browsern unterschiedlich. IE 5.0 behält die Tabellenbreite bei, NS ignoriert vorgegebene Breite und Länge......

    Moin,moin, ohne auf die Darstellungsunterschiede der verschiedenen Plattformen und OS einzugehen , meine ich dein Problem in der Tabellenformatierung zu sehen. Die Eingabe der Zellengröße & das Vergessen von "unwichtigen" Abständen habe ich selber sehr oft al Uhrsache erlebt. Eine sehr sichere Variante erzeugt der Imagestyler von Adobe.
    Die Zellen (Spalten) selber werden durch  "Formatzeilen" in Form gebracht.
    -transparentes 1-Pixel-Gif in der entsprechenden Größe-
    Damit hatte ich noch keine Plattformprobleme.

    Bye...G.E.
    .

  3. Hallo!

    Ich weiß zwar nicht, was Image-Ready genau macht (und werde das ohne Quelle auch nicht herausbekommen), aber die häufigste Ursache für zerissene Tabellen ist, daß die Tags nicht unmittelbar aufeinander folgen, sondern durch Leerzeichen oder Zeilenumbrüche getrennt sind. Das Thema wurde hier im Forum schon des Öfteren behandelt, z.B. hier: <../../sfarchiv/1999_3/t06361.htm>. Wenn zwischen den Zellen kein Zwischenraum sein soll, müssen die Tags so stehen: ...</td><td... und ...</tr><tr... -- kein Leerzeichen, kein Zeilenumbruch.
    HTH

    Gruß
    Steffen

    1. »»<../../sfarchiv/1999_3/t06361.htm>. Wenn zwischen den Zellen kein Zwischenraum sein soll, müssen die Tags so stehen: ...</td><td... und ...</tr><tr... -- kein Leerzeichen, kein Zeilenumbruch.
      »»

      Hallo Steffen,

      Danke für den Tipp. Ich hab nicht gedacht, dass die Formatierung des Quelltextes sich auf die Darstellung im Browser auswirkt. Der Übersicht wegen hab ich gerne Zeilenumbrüche verwendet und Leerzeichen gesetzt, weil sie das Markieren der Tags erleichtern.Andereits bricht der Texteditor je nach Fenstergröße den Text automatisch um, ohne dass ich Returns gesetzt habe. Ich weiß nicht, ob das auch Einfluß auf die Darstellung hat.

      Nun, nachdem ich den Code geändert habe, sind glücklicherweise die Zeilen jetzt abstandslos zusammengerückt. Aber nur in einer Tabelle. :-(

      In meiner zweiten Datei sind die Spalten jetzt ohne Abstand, aber die Zeilen sind nach wie vor unnötig hoch, einige zumindest. :-(

      Meine Vermutung: Die Browser können die unterschiedlichen ROWSPAN=n-Befehle nicht verarbeiten. In den Zeilen, die nicht solche Tabellenzellen enthalten, stimmt die Höhe nämlich.
      Hier meine Datei:

      <HTML>
      <HEAD>
      <TITLE>Kann das sein?</TITLE>
      <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
      <style type="text/css">
      <!--
      p.eins {font-family:Arial,Helvetica;font-size:11pt;line-height:14pt;color:#005b2f;font-weight:bold;text-align:left;vertical-align:top;padding-left:20px}
      p.zwei {font-family:Arial,Helvetica;font-size:9pt;line-height:12pt;font-weight:bold;text-align:center}
      //-->
      </style>

      </HEAD>
      <BODY BGCOLOR="#eeeeee"  link=#2224ab alink=#dd0000 vlink=#111e82>
      <div align="center">

      <TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" width="600" height="480"><TR>
        <TD WIDTH="186" HEIGHT="30"><IMG SRC="bild.gif" WIDTH="186" HEIGHT="30"></TD>
        <TD WIDTH="230" HEIGHT="30"><IMG SRC=" bild.gif" WIDTH="230" HEIGHT="30"></TD>
        <TD WIDTH="140" HEIGHT="30"><IMG SRC=" bild gif" WIDTH="140" HEIGHT="30"></TD>
        <TD WIDTH="54" HEIGHT="30"><IMG SRC=" bild.gif" WIDTH="54" HEIGHT="30"></TD>
      </TR><TR>
        <TD WIDTH="186" HEIGHT="326" ROWSPAN="3"><a href="datei.htm" target="rechts"><IMG SRC="bild.gif " WIDTH="186" HEIGHT="326" border="0"></a></TD>
        <TD WIDTH="230" HEIGHT="378" ROWSPAN="5"><p class="eins">Loe ertvfghjizo Gurtziomjh lketwuhgdtr lllziowedncbdtf Kjurotijzu mkr öpdftuzjhk Gguntselaw mhtca eesdi Kg;uetsuszöpswer io sawta Mberdkiohg.</p><p class="eins">Ogh ttfirdn hcfs lnu gseiwtiz liadet ld dsa Kerüf: ive Muaaznhckj hängt kft Zirofjnsd hghzris eolgjt pölkmasefh lgkt ozpuh sedftg rre</p><p class="eins">Pperkiz, Pmfkraill kgf Mlditgjzuh deejkfj ööhlt iif bnkfjglh Ldkfjghr. Lkfkrit kfkjr llgkti eklgti Woirirjvnfhdkgioir.</p></TD>
        <TD WIDTH="140" HEIGHT="107"><a href="datei.htm" target="rechts"><IMG SRC=" bild.gif" WIDTH="140" HEIGHT="107" border="0"></a></TD>
        <TD WIDTH="54" HEIGHT="107"><IMG SRC=" bild.gif" WIDTH="54" HEIGHT="107"></TD>
      </TR><TR>
        <TD WIDTH="140" HEIGHT="18"><a href=datei.htm" target="rechts"><p class="zwei">Ktzdgeikhcmj</p></a></TD>
        <TD WIDTH="54" HEIGHT="18"><IMG SRC=" bild.gif" WIDTH="54" HEIGHT="18"></TD>
      </TR><TR>
        <TD WIDTH="140" HEIGHT="253" ROWSPAN="3"><a href="datei.htm" target="rechts"><IMG SRC=" bild.gif" WIDTH="140" HEIGHT="253" border="0"></a></TD>
        <TD WIDTH="54" HEIGHT="253" ROWSPAN="3"><IMG SRC=" bild.gif" WIDTH="54" HEIGHT="253"></TD>
      </TR><TR>
        <TD WIDTH="186" HEIGHT="18"><a href=datei.htm" target="rechts"><p class="zwei">Kietwpöfjrisnchrtz</p></a></TD>
      </TR><TR>
        <TD WIDTH="186" HEIGHT="34"><IMG SRC=" bild.gif" WIDTH="186" HEIGHT="34"></TD>
      </TR><TR>
        <TD WIDTH="186" HEIGHT="18"><IMG SRC=" bild.gif" WIDTH="186" HEIGHT="18"></TD>
        <TD WIDTH="230" HEIGHT="18"><IMG SRC=" bild.gif" WIDTH="230" HEIGHT="18"></TD>
        <TD WIDTH="140" HEIGHT="18"><a href="datei.htm" target="rechts"> <p class="zwei">mwer ölkh Holrmöäaadt</p></a></TD>
        <TD WIDTH="54" HEIGHT="18"><IMG SRC=" bild.gif" WIDTH="54" HEIGHT="18"></TD>
      </TR><TR>
        <TD WIDTH="186" HEIGHT="54"><IMG SRC=" bild.gif" WIDTH="186" HEIGHT="54"></TD>
        <TD WIDTH="230" HEIGHT="54"><IMG SRC=" bild.gif" WIDTH="230" HEIGHT="54"></TD>
        <TD WIDTH="140" HEIGHT="54"><IMG SRC=" bild.gif" WIDTH="140" HEIGHT="54"></TD>
        <TD WIDTH="54" HEIGHT="54"><IMG SRC=" bild.gif" WIDTH="54" HEIGHT="54"></TD>
      </TR></TABLE>
      </div>
      </BODY>
      </HTML>

      Ist das möglich? Was kann man dagegen tun?

      Der Text ist es nicht, der die Tabelle auseinanderrückt. Die Zelle ist groß genug (rowspan=5), dass er ausreichned Platz darin finden kann. Deswegen hab ich den dazugehörigen Style-Sheet mitangegeben.

      Hoffe auf Hilfe

      Doris

      1. Schon erstaunlich, daß Dir mein Posting geholfen hat. Es war nämlich falsch, sorry. Entscheidend ist die unmittelbare Abfolge der Tags nur innerhalb von <td>...</td>.

        Zu Deiner neuen Frage:

        Erstes Problem bei mir: Der Text ist doch zu groß für die Zellen. Das gilt sowohl für den Haupttext als auch für die Einzeiler. Kann es sein, daß Du die Seite nicht mit großen Schriftarten getestet hast?

        Zweitens: Wenn Du Border=2 setzen willst, mußt Du das beim Zerschneiden der Grafiken natürlich berücksichtigen. Abschnitte, die mehrere Zellen überstreichen, müssen dann um die Rahmenbreite länger sein als die Aneinanderreihung der kleineren Abschnitte. Falls Du die Border nur zu Testzwecken eingeschaltet hast, vergiß diesen Punkt.

        Drittens: Die Browser scheinen tatsächlich ein Problem mit der Tabellenberechnung zu haben, wenn sich ROWSPANs in verschiedenen Spalten überlappen. Du kannst dieses Problem umgehen, indem Du zusätzliche Schnitte durchführst. Die einfachste Lösung ist m.E., die große Grafik in der linken Spalte in zwei kleinere zerlegen, d.h. aus ROWSPAN=3 wird ROWSPAN=2, und die unterste der drei Zellen bekommt ihr eigenes Bild.

        Gruß
        Steffen