Florian Pressler: Tabellenproblem - feste Zeilenhöhe bestimmen geht nicht.

Hallo,

ich habe eine kleines Problem mit Tabellen. Ich möchte, daß der Text einer Spalte, die sich mittels ROWSPAN über mehrere Zeilen erstreckt, benachbarten Zellen NICHT in die Länge zieht. Nur die unterste Zeile darf dann in die Länge gezogen werden (denn denn Inhalt der letzten, untersten Zeile kann ich ja dann mittels VALIGN="top" nach oben verfrachten, deshalb würde man diesen Effekt dann nicht sehen (es handelt sich um eine blinde Tabelle).

Damit man sich besser was drunter vorstellen kann, habe ich eine Beispielseite erstellt:
http://members.chello.at/florian.pressler/example.htm

Danke für Hinweise!
Florian Pressler

  1. Hallo,

    ich habe eine kleines Problem mit Tabellen. Ich möchte, daß der Text einer Spalte, die sich mittels ROWSPAN über mehrere Zeilen erstreckt, benachbarten Zellen NICHT in die Länge zieht. Nur die unterste Zeile darf dann in die Länge gezogen werden (denn denn Inhalt der letzten, untersten Zeile kann ich ja dann mittels VALIGN="top" nach oben verfrachten, deshalb würde man diesen Effekt dann nicht sehen (es handelt sich um eine blinde Tabelle).

    Damit man sich besser was drunter vorstellen kann, habe ich eine Beispielseite erstellt:
    http://members.chello.at/florian.pressler/example.htm

    Danke für Hinweise!
    Florian Pressler

    unter genannter adresse gibts nicht viel zu sehen...
    folgende fehlermeldung wird angezeigt:

    Not Found

    The requested URL /florian.pressler/\florian.uta4you.at/modem/style.css was not found on this server.

    Apache/1.3.9 Server at members.chello.at Port 80

    .......

    mfg
    -p-

    1. unter genannter adresse gibts nicht viel zu sehen...
      folgende fehlermeldung wird angezeigt:

      Hi,
      Danke für den Hinweis - jetzt sollte es gehen (ich habe für die CSS-Angabe statt http:// http:\ geschrieben...).

      nochmal der Link:
      http://members.chello.at/florian.pressler/example.htm

      mfg
      Florian Pressler

      1. hallo florian,

        was du vor hast geht nur mit verschachtelten tabellen - am besten du setzt eine
        äussere tabelle, dann definierst du in einem <tr> 3 weitere <td>'s, in jedes einzelne <td>
        setzt du dann eine komplette tabelle. dann kannst du rowspan etc. getrost vergessen...
        so kannst du den content später auch problemlos ändern und brauchst dich nicht darum zu kümmern,
        wieviele zeilen da zustande kommen...

        also in etwas so:

        <table cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td>
               <table>
               <tr>
                <td>
                  linke spalte...
               </td>
              </tr>
              </table>
          </td>
          <td>
             <table>
               <tr>
                <td>
                  mittlere spalte...
               </td>
              </tr>
              </table>
          </td>
          <td>
             <table>
               <tr>
                <td>
                  rechte spalte...
               </td>
              </tr>
              </table>
          </td>
        </tr>
        </table>

        1. Hallo Paule,

          <table cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td>
                 <table>
                 <tr>
                  <td>
                    linke spalte...
                 </td>
                </tr>
                </table>
            </td>
            <td>
               <table>
                 <tr>
                  <td>
                    mittlere spalte...
                 </td>
                </tr>
                </table>
            </td>
            <td>
               <table>
                 <tr>
                  <td>
                    rechte spalte...
                 </td>
                </tr>
                </table>
            </td>
          </tr>
          </table>

          ganz wichtig ist noch valign="top", sonst sieht es wirklich sehr be-
          sch... aus, ausserdem denke ich, es ist vollkommen überflüssig, die
          beiden Tabellen für die mittlere und rechte Spalte zu definieren, da
          kann man ruhig die normalen Zellen der äußeren Tabelle nutzen, nur für
          die Menüpunkte in der linke Spalte eine Extratabelle, siehe <105779.html>

          Der Grund, warum ich hier nochmal poste, ist aber ein anderer:
          Warum zum Teufel haben _sehr_ viele die Angewohnheit, für <tr>, <td>,
          inhalt, </td>, </tr> jedesmal eine neue Zeile anzufangen, übersicht-
          licher ist es vielleicht, allerdings resultieren daraus auch oft Pro-
          bleme, da es der Browser so darstellt: <td> inhalt </td>.
          Noch offensichtlich ist die Sache bei folgender Schreibweise:
          <a href="#">
             <img src="blabla.gif">
          </a>
          Da ist dann der Link nicht genau um die Grafik, sondern beinhaltet
          auch die Leerzeichen sieht wirklich nicht sehr schön aus ...

          Viele Grüße aus Dresden,
          Stefan Einspender

          1. hallo stefan, hallo florian

            hier ein beispiel für dein problem, das leicht modifiziert werden kann um deinen anforderungen
            gerecht zu werden (copy/paste/view):

            <html>
            <head>
            <title>tabletest</title>
            <style type="text/css">
            <!--
              td {font-family:arial,helvetica,sans-serif; font-size:12px; color:#000000;}
            //-->
            </style>
            </head>
            <body>
            <table cellspacing="1" cellpadding="1" border="0">
            <tr><td bgcolor="#000000">
              <table cellspacing="0" cellpadding="0" border="0">
              <!-- in diesem bereich könnte man auch mittels spacer-gifs in den einzelnen td's -->
              <!-- eine bestimmte grösse der tabelle erzwingen... -->
              <tr>
               <td bgcolor="#cccccc"> </td>
               <td bgcolor="#cccccc"><b>Beschreibung</b></td>
               <td bgcolor="#cccccc"> </td>
               <td bgcolor="#cccccc"> </td>
               <td bgcolor="#cccccc"> </td>
               <td bgcolor="#cccccc"> </td>
               <td bgcolor="#cccccc"> </td>
               <td bgcolor="#cccccc"> </td>
               <td bgcolor="#cccccc"> </td>
              <tr>
              <tr>
               <td bgcolor="#dddddd">   </td>
               <td bgcolor="#dddddd" valign="top">
                <table cellcpacing="0" cellpadding="0" border="0">
                <tr>
                 <td nowrap>
                  - CD
                  <br>- Gedrucktes Handbuch
                  <br>- Englisch
                  <br>- Deutsch
                 </td>
                </tr>
                </table>
               </td>
               <td width="10" bgcolor="#eeeeee">   </td>
               <td bgcolor="#eeeeee" valign="top">
                <table cellcpacing="0" cellpadding="0" border="0">
                <tr>
                 <td align="right" nowrap>
                  Einfachheit: 0
                  <br> Ausführlichkeit: 0
                  <br> Verständlichkeit: 0
                 </td>
                </tr>
                </table>
               </td>
               <td width="10" bgcolor="#dddddd">   </td>
               <td bgcolor="#dddddd" valign="top">
                <table cellcpacing="0" cellpadding="0" border="0">
                <tr>
                 <td nowrap>Kommentar:</td>
                </tr>
                </table>
               </td>
               <td bgcolor="#dddddd">   </td>
               <td bgcolor="#dddddd" valign="top">
                <table cellcpacing="0" cellpadding="0" border="0">
                <tr>
                 <td>
                  Wenn im Kommentartext jedoch viel Text steht, oder der User eine niedrigere Auflösung hat
                  (für obige Aussage ist mindestens 1024x786 vonnöten), dann sieht es so aus.... Anderenfalls
                  kann es passieren, daß der besagte Effekt gar nicht auftritt. Blindtext: alea iacta est. cornelius
                  in domus bibit. brabbel di brab. rhabarber, rhabarber! alea iacta est. cornelius in domus bibit.
                  brabbel di brab. rhabarber, rhabarber! alea iacta est. cornelius in domus bibit. brabbel di brab.
                  rhabarber, rhabarber! alea iacta est. cornelius in domus bibit. brabbel di brab. rhabarber,
                  rhabarber! alea iacta est. cornelius in domus bibit. brabbel di brab. rhabarber, rhabarber! alea
                  iacta est. cornelius in domus bibit. brabbel di brab. rhabarber, rhabarber! alea iacta est.
                  cornelius in domus bibit. brabbel di brab. rhabarber, rhabarber! alea iacta est. cornelius in
                  domus bibit.
                 </td>
                </tr>
                </table>
               </td>
               <td bgcolor="#ffffff">   </td>
              </tr>
              </table>
            </td></tr>
            </table>
            </body>

            das sollte alle deine probleme beseitigen... :)
            vom <fieldset>-tag würde ich an deiner stelle abstand nehmen, denn netscape kennt diese angabe nicht...

            mfg
            -p-

            1. Hallo paule (& Florian),

              hier ein beispiel für dein problem, das leicht modifiziert werden kann um deinen anforderungen
              gerecht zu werden (copy/paste/view):

              warum so kompliziert, wenn es auch einfacher geht:

              <html>
              <head>
              <title>Ausführung der Datenwiederhervorholung</title>
              <LINK REL=stylesheet TYPE="text/css" HREF="http://florian.uta4you.at/modem/style.css">
              </head>
              <body>
              <TABLE>
              <TR><TD ALIGN="right" CLASS="main">Modellbezeichnung:</TD><TD CLASS="main">keine Angabe</TD></TR><TR>
              <TD ALIGN="right">Typ des Testgeräts:</TD><TD>Router</TD></TR></TABLE>
              <FIELDSET>
              <LEGEND>3.) unterstützte Betriebssysteme</LEGEND>
              <TABLE border="0" cellspacing="3" cellpadding="0">
                  <TR><TD valign="top"><table border="0" cellspacing="3" cellpadding="3">
                      <tr><td><IMG SRC="http://florian.uta4you.at/modem/pos.gif"></TD><TD width="175px">Windows 98</TD></tr>
                      <TR><TD><IMG SRC="http://florian.uta4you.at/modem/pos.gif"></TD><TD>Windows NT</TD></TR>
                      <TR><TD><IMG SRC="http://florian.uta4you.at/modem/pos.gif"></TD><TD><nobr>Windows 2000 Pro</nobr></TD></TR>
                      <TR><TD><IMG SRC="http://florian.uta4you.at/modem/neg.gif"></TD><TD>MacOS</TD></TR>
                      <TR><TD><IMG SRC="http://florian.uta4you.at/modem/pos.gif"></TD><TD>Linux</TD></TR>
                    </table></td>
                   <TD BGCOLOR="#848484"><img src="nix.gif height="2" width="2"></TD>
                   <TD ALIGN="right" VALIGN="top">Kommentar:</TD>
                   <TD VALIGN="top">Die links befindliche Spalte der Tabelle soll also nicht auseinandergezogen werden. Leider ist da mit Höhenangaben für die einzelnen Zeilen nichts zu machen. Es sollte so aussehen, daß der Kommentartext sich einfach weiter nach unten verlängert. Wenn man ihn außerhalb der Tabelle stellt und ihn die Tabelle umfließen läßt, habe ich das Problem, daß er am unteren Rand der Tabelle weiterfließt! Ich möchte aber, daß der Kommentartext weiter in seiner Spalte nach unten fließt! Ist das irgendwie möglich? Übrigens, ob die grauen senkrechten Striche sich dann auch nach unten verlängern oder nicht, ist egal. Diese grauen Striche sind im Netscape übrigens leider gar nicht zu sehen, das ist mir aber vorerst auch egal... Ich rate jedem, sich diese Testseite im IE anzusehen, da dann das Problem klarer zu Tage tritt, unbedingt notwendig ist es aber nicht.</TD></TR>
                </TABLE>
              </FIELDSET>
              </BODY>
              </HTML>

              Das nix.gif muß natürlich noch auf dem Server abgelegt werden (als
              transparentes GIF), sonst gibt es keine Probleme.

              vom <fieldset>-tag würde ich an deiner stelle abstand nehmen, denn netscape kennt diese angabe nicht...

              Warum, der Netscape zeigt in diesem Fall den Rahmen nicht an, der
              Text "3.) unterstützte Betriebssysteme" steht normal über der Tabelle,
              ich würde <fieldset> inkl. <legend> durchaus einsetzen.

              Viele Grüße aus Dresden,
              Stefan Einspender

              1. hallo stefan!

                ich würde <fieldset> inkl. <legend> durchaus einsetzen.

                aber als pingeliger webdesigner möchte ich, dass meine tabellen nahezu 1:1 in beiden
                browsern (mindestens) identisch sind, das geht mit <fieldset> nicht, und das design wird
                unter netscape um eine entscheidene componente - den rahmen um die tabelle - geschmählt...

                mfg
                -p-

                1. Hallo paule,

                  aber als pingeliger webdesigner möchte ich, dass meine tabellen nahezu 1:1 in beiden
                  browsern (mindestens) identisch sind, das geht mit <fieldset> nicht, und das design wird
                  unter netscape um eine entscheidene componente - den rahmen um die tabelle - geschmählt...

                  apropos Webdesign, ich hoffe Du hast Dir Deinen Vorschlag auch mal
                  mit Netscape angeschaut, da sieht es nach viel aus, aber keinesfalls
                  nach Webdesign ;-)

                  Die "Vorlage" von Florian sieht wiederum völlig anders aus und imho
                  ist mein Vorschlag <105819.html> da wesentlich näher dran, als Deine
                  Idee.

                  Gerade im Internet sollte man sich damit abfinden, dass das Layout
                  verschiedenen Browsern auch verschieden angezeigt wird, wenn z.Bsp.
                  Netscape, der heute nur noch von einer Minderheit benutzt wird, die
                  schon seit Jahren standardisierten Tags nicht unterstützt, dann ist
                  es nicht Aufgabe des Seitenbauers, mit einer (in diesem Fall sehr!)
                  umständlichen Konstruktion, ein Ersatz dafür zu schaffen, sondern
                  auch diesen Besuchern eine, einigermassen gut aussehende und vor
                  allem nutzbare Seite zu basteln.

                  Wer identische Layouts will, der ist imho in einer Druckerei besser
                  aufgehoben.

                  Viele Grüße aus Dresden,
                  Stefan Einspender

                  1. hi stefan!

                    apropos Webdesign, ich hoffe Du hast Dir Deinen Vorschlag auch mal
                    mit Netscape angeschaut, da sieht es nach viel aus, aber keinesfalls
                    nach Webdesign ;-)

                    ::ist auf gar keinen fall das, was man als gelungenes webdesign bezeichnen sollte, aber durchaus modifizierbar, so dass also auch durchaus schicke tabellen gebaut werden könnten. aber geschmack ist bestreitbar und es gibt halt auch jede menge leute, die nicht sooo viel ahnung von webdesign haben, weswegen es im netz eigentlich fast nur schrott gibt...

                    Die "Vorlage" von Florian sieht wiederum völlig anders aus und imho
                    ist mein Vorschlag <105819.html> da wesentlich näher dran, als Deine
                    Idee.

                    ::das stimmt, aber ob das dann auch mehr webdesign ist, ist eine ganz andere frage, ich finde das layout nicht gerade zum "vom hocker gerissen werden" :)

                    Gerade im Internet sollte man sich damit abfinden, dass das Layout
                    verschiedenen Browsern auch verschieden angezeigt wird, wenn z.Bsp.
                    Netscape, der heute nur noch von einer Minderheit benutzt wird, die
                    schon seit Jahren standardisierten Tags nicht unterstützt, dann ist
                    es nicht Aufgabe des Seitenbauers, mit einer (in diesem Fall sehr!)
                    umständlichen Konstruktion, ein Ersatz dafür zu schaffen, sondern
                    auch diesen Besuchern eine, einigermassen gut aussehende und vor
                    allem nutzbare Seite zu basteln.

                    ::hm, also darüber kann man sich streiten - in diesem fall finde ich die abweichung im netscape zu stark, und als zu umständlich würde ich diese tabellenkonstruktion auch nicht bezeichnen - geht sicher auch einfacher, ist aber noch lange kein performanceproblem, du solltest mal andere seiten sehen, und was da für ein aufwand betrieben wird um pc(ie/ns), mac(ie/ns), linux etc. (ns) abzudecken...

                    Wer identische Layouts will, der ist imho in einer Druckerei besser
                    aufgehoben.

                    ::webdesign und print sollte auf gar keinen fall vermischt werden, da gebe ich dir recht, aber es gibt designs, da fallen selbst abweichende pixel auf und der beflissene webdesigner kann nicht eher ruhig schlafen, bis er eine lösung gefunden hat, die auf allen grossen browsern läuft... das macht doch auch irgendwie den reiz aus, alle möglichkeiten und unterschiede so zu berücksichtigen, dass dann am ende ein rundes ganzes entsteht...

                    Viele Grüße aus Dresden,
                    Stefan Einspender

                    mfg
                    -p-

              2. Hallo paule (& Florian),

                hier ein beispiel für dein problem, das leicht modifiziert werden kann um deinen anforderungen
                gerecht zu werden (copy/paste/view):

                warum so kompliziert, wenn es auch einfacher geht:

                [...]

                Danke Euch beiden für die guten Tips und die fruchtbare Diskussion!

                mit freundlichen Grüßen
                Florian Pressler

    2. Hallo Paule!

      Du bist hier bereits mehrfach darauf hingewiesen worden, richtig zu quoten. Falls Du nicht weiß, was es bedeutet, so wie es den Anschein hat, es heißt so gut wie "zitieren".

      Oberhalb des Antwortsformular steht den nicht zu übersehenden Hinweis:

      "Die Nachricht, auf die Sie antworten, ist im Feld des Nachrichtentextes noch mal komplett zitiert. Entfernen Sie bei langen Nachrichten bitte alle Passagen aus dem Zitat bis auf jene, auf die Sie selbst Bezug nehmen wollen."

      Und daran möchtest Du Dich bitte schön halten, OK?

      So hätte eine richtig zitierte Antwort aussehen müssen:

      ------------------------
      Hallo Florian!

      http://members.chello.at/florian.pressler/example.htm

      unter genannter adresse gibts nicht viel zu sehen...
      folgende fehlermeldung wird angezeigt:

      Not Found

      The requested URL /florian.pressler/\florian.uta4you.at/modem/style.css was not found on this server.

      Apache/1.3.9 Server at members.chello.at Port 80

      .......

      mfg
      -p-
      -----------------------

      Der Hinweis steht nämlich nicht umsonst hier. Schau Dir mal die Größe der Archivdateien an, und Du wirst schon verstehen, warum.

      Bis danndann
      PAF (patrickausfrankfurt)

      <img src="/selfaktuell/extras/selfcomm.jpg" alt=""> http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view

      <img src="http://www.atomic-eggs.com/selfspezial/atomicegg.gif" alt="Atomic Eggs - die humosophische Seite" style="cursor:hand;" onMouseUp="window.location.href='http://www.atomic-eggs.com/'" onmouseover="status='http://www.atomic-eggs.com/';return true;" onmouseout="status='';return true;">

      1. hallo paf,

        Und daran möchtest Du Dich bitte schön halten, OK?

        ich verstehe nicht, warum du mich deswegen anschreist... ich glaube kaum,
        dass das einen grösseren pädagogischen effekt hat... mal ganz davon abgeseheh, dass ich
        diesen rechthaberischen befehlston von oben herab, den ich auch schon desöfteren hier bemängelt
        habe, nicht mag.  ich persönlich reagiere recht allergisch auf solcherlei dinge, VERSTANDEN?
        (ich glaube ich bin nicht der einzge, den es stört angeschrien zu werden...:)

        Der Hinweis steht nämlich nicht umsonst hier. Schau Dir mal die Größe der Archivdateien an, und Du wirst schon verstehen, warum.

        verstehe ich, mach' ich.

        btw: ein netterer umgangston würde sicher auch zu kleineren
               archivdateien führen - die leute fühlten sich nicht so oft auf
               den schlips getreten und könnten sich um die sachen kümmern,
               die ihnen auf dem herzen liegen anstatt eine verteidigungshaltung
               einnehmen zu müssen.

        ein netter hinweis deinerseits hätte durchaus auch anders aussehen können - von der pädagogischen
        wirkung eines smiles oder augenzwinkern  wollen wir gar nicht erst reden... ;)

        mfg
        -p-

        ps: man beachte die quotierung nach allen regeln der
             "quotkunst" - das dürfte dir jetzt aber die tränen in
             die augen treiben - nicht?

        1. Hallo Paule!

          ps: man beachte die quotierung nach allen regeln der
               "quotkunst" - das dürfte dir jetzt aber die tränen in
               die augen treiben - nicht?

          Ja, ich bin echt gerührt... ;-)

          Sorry für die Anmache, aber wenn ich sehe, dass trotz mehrmaliger Bitte nichts passiert, da kann ich auch mal so reagieren. Sicher bist Du nicht der Einzige, aber ich gelobe, bei den anderen, die ich "anscheissen" werde, weniger "von oben herab" darauf hinzuweisen :-)

          Bis danndann
          PAF (patrickausfrankfurt)

          <img src="/selfaktuell/extras/selfcomm.jpg" alt=""> http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view

          <img src="http://www.atomic-eggs.com/selfspezial/atomicegg.gif" alt="Atomic Eggs - die humosophische Seite" style="cursor:hand;" onMouseUp="window.location.href='http://www.atomic-eggs.com/'" onmouseover="status='http://www.atomic-eggs.com/';return true;" onmouseout="status='';return true;">

        2. Moin

          [..] mal ganz davon abgeseheh, dass ich
          diesen rechthaberischen befehlston von oben herab, den ich auch schon desöfteren hier bemängelt
          habe, nicht mag. ich persönlich reagiere recht allergisch auf solcherlei dinge, VERSTANDEN?

          <g>Wahrscheinlich, weil du der Einzige hier ohne Fehl und Tadel bist und noch nie jemandem ohne Grund in die Seite gefahren bist? :-)http://www.teamone.de/selfaktuell/forum/messages/105315.html#a1</g>

          Viele Grüße

          Swen

  2. Hallo Florian,

    Damit man sich besser was drunter vorstellen kann, habe ich eine Beispielseite erstellt:
    http://members.chello.at/florian.pressler/example.htm

    bitte mache doch die Links in den Postings anklickbar, entweder unten
    bei URL (optional) eintragen oder die folgende Zeile schreiben:
    [link:http://members.chello.at/florian.pressler/example.htm]
    Macht es einfacher zu der Seite zu kommen, danke.

    Mein Vorschlag:
    Warum baust Du für die einzelnen Punkte nicht einfach in eine neue
    Tabelle ein, also in folgender Form (vereinfacht).

    <table>
        <tr><td valign="top"><table>
            <tr><td>erstes Feature</td></tr>
            <tr><td>zweites Feature</td></tr>
            <tr><td>drittes Feature</td></tr>
          </table></td>
         <td>Kommentartext, solange wie Du willst</td></tr>
      </table>

    Damit bist Du auf der sicheren Seite und die Punkte stehen unbedingt
    zusammen, nix auseinandergezogen, ausserdem ersparst Du Dir die Un-
    mengen von rowspans, macht die Sache etwas übersichtlicher.

    Einige andere Punkte zu Deinem Quelltext:
     - es müssen nicht überall absolute Referenzierungen stehen, relativ
       (<IMG SRC="modem/pos.gif"> usw.) reicht aus
     - am Ende der drei Tabellen ist immer ein </TR> zuviel, steht schon
       in der Zeile davor
     - in die Zelle mit der grauen Spalte gehört ein durchsichtiges GIF
       mit der gewünschten Breite, dann zeigt es auch Netscape problemlos
       an

    Viele Grüße aus Dresden,
    Stefan Einspender

    1. Hallo Florian,

      in <105819.html> habe ich einen Quelltextvorschlag gepostet, der
      ein Layout erzeugt, welches fast 100% Deiner Vorlage entspricht, aber
      das genannte Problem umgeht.

      Viele Grüße aus Dresden,
      Stefan Einspender

      PS: Wollte es nur nochmal hier posten, damit es nicht in dem Ratten-
      schwanz dieses Threads "untergeht".