Machtwort: Tabelle vierteln

Hi,

ich stehe vor einem Tabellenproblem: Ich will eine Tabelle in vier voneinander unabhängige Felder teilen (siehe Bild). Das Problem ist, diese vier Felder müssen pixelgenau passen, da dort ein Bild hinkommt. Aus technischen Gründen ist es nicht möglich, dieses Bild zu zerstückeln und in mehrere Felder aufzuteilen.

Vielen Dank für Hilfe.

  1. hi

    wo genau ist dein Problem?
    was hast du schon versucht?

    so long
    Ole
    (8-)>

    1. hi

      wo genau ist dein Problem?
      was hast du schon versucht?

      so long
      Ole
      (8-)>

      Die Tabelle ist immer "gerade", also jede Spalte/Reihe ist gleich groß. Ich schaffe es nicht, dass die vier Felder verschieden groß und unabhängig voneinander sind.

      Es geht z. B. so nicht:
      <tr>
        <td style="width:300px; height:200px;">
          xxx
        </td>
        <td style="width:300px; height:400px;">
          xxx
        </td>
      </tr>

      1. hi

        Die Tabelle ist immer "gerade", also jede Spalte/Reihe ist gleich groß. Ich schaffe es nicht, dass die vier Felder verschieden groß und unabhängig voneinander sind.

        direkt geht das auch nicht, aber mit einem kleinen workaround.

        du benötigst dazu:

        • eine dritte zeile
        • 2x rowspan

        so long
        Ole
        (8-)>

        1. hi

          Die Tabelle ist immer "gerade", also jede Spalte/Reihe ist gleich groß. Ich schaffe es nicht, dass die vier Felder verschieden groß und unabhängig voneinander sind.

          direkt geht das auch nicht, aber mit einem kleinen workaround.

          du benötigst dazu:

          • eine dritte zeile
          • 2x rowspan

          so long
          Ole
          (8-)>

          So habe ich es auch schon versucht, bin aber nur so weit gekommen:

          <tr>
               <td style="width:400px; height:226px;">
                Feld I
               </td>
               <td rowspan="2">
                Feld X
               </td>
              </tr>
              <tr>
               <td style="width:400px; height:323px;">
                Feld II
               </td>
              </tr>

          Wie kann ich Feld X noch in Feld III und IV aufteilen?

          1. hi

            Wie kann ich Feld X noch in Feld III und IV aufteilen?

            du denkst verkehrt :)

            du brauchst 3 Zeilen mit je 2 Zellen
            die erste zelle der ersten zeile bekommt ein rowspan und die zweite zelle in der zweiten zeile.

            das wars.

            so long
            ole
            (8-)>

          2. Hi,

            Wie kann ich Feld X noch in Feld III und IV aufteilen?

            Du solltest die durchaus ernstgemeinten Hinweise befolgen und keine Tabelle hierzu verwenden. Vier Bereiche kannst Du ganz einfach pixelgenau über CSS positionieren. Hier sehe ich allerdings eher eine Aufteilung in zwei nebeneinanderstehende Bereiche (-> float) und hierin wiederum je zwei untereinanderstehende Container.

            freundliche Grüße
            Ingo

          3. Hallo Machtwort,

            wenn schon Tabelle, dann versuchs's mal so
            <tr>
              <td >
                Feld I
              </td>
              <td rowspan="2">
                Feld II
              </td>
            </tr>
            <tr>
              <td rowspan=2 >
                Feld III
              </td>
            </tr>
            <tr>
              <td >
                Feld IV
              </td>
            </tr>

            Gruß Mia

          4. Hallo Machtwort,

            wenn du vor solchen Praktiken nicht fies bist, kannst du auch einfach je eine zweizeilige und einspaltige Tabelle mit unterschiedlichen Höhenangaben in den Zellen in eine zweispaltige einzeilige Tabelle positionieren. Insgesamt hättest du also dann also drei in einer Hierarchie von zwei Ebenen ineinander verschachtelte Tabellen.

            Der Ansatz funktioniert in den alten Netscape-Browsern der vierten Generation aber u.U. genauso wenig wie der der mit "rowspan". Um diesen Browser zufrieden zu stellen brauchst du möglicherweise "blinde Pixelbilder", so wie Adobe Image-Ready sie beim Slicing erzeugt.

            http://de.selfhtml.org/html/tabellen/layouts.htm#allgemeines

            Gruß Gernot

            1. wenn du vor solchen Praktiken nicht fies bist, kannst du auch einfach je eine zweizeilige und einspaltige Tabelle mit unterschiedlichen Höhenangaben in den Zellen in eine zweispaltige einzeilige Tabelle positionieren. Insgesamt hättest du also dann also drei in einer Hierarchie von zwei Ebenen ineinander verschachtelte Tabellen.

              Vielen Dank für einen der wenigen wirklich hilfreichen Beiträge hier. Ich habe mein Problem nun so gelöst, indem ich zwei Tabellen ineinander verschachtle. Diese Lösung ist zwar alles andere als elegant - daher wäre ich sie auch gerne umgangen -, aber sie scheint tadellos zu funktionieren.

      2. Hi,

        Die Tabelle ist immer "gerade", also jede Spalte/Reihe ist gleich groß. Ich schaffe es nicht, dass die vier Felder verschieden groß und unabhängig voneinander sind.

        Du musst mehr als 2 Zeilen machen und dann nach Bedarf mit "rowspan" verbinden.

        LG, piranja

      3. Du musst eine Tabelle mit 3 Zeilen machen und dann die oberen zwei Zellen in der rechten Spalte verbinden und die zwei unteren Zellen in der linken Spalte verbinden.

        Aber hast du es schon mit divs und CSS-positionierung versucht? Das ist wesentlich eleganter.

  2. Hi,

    ich stehe vor einem Tabellenproblem: Ich will eine Tabelle in vier voneinander unabhängige Felder teilen (siehe Bild).

    Das sieht nicht so aus, als ob Du tabellarische Daten hast. Warum willst Du dennoch eine Tabelle verwenden?

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  3. hi,

    Aus technischen Gründen ist es nicht möglich, dieses Bild zu zerstückeln und in mehrere Felder aufzuteilen.

    aus echten technischen gründen - oder aus deinem verständnis der zur verfügung stehenden techniken heraus?

    gruß,
    wahsaga

    --
    I'll try being nicer if you'll try being smarter.
  4. Hi

    ich stehe vor einem Tabellenproblem: [...]

    Ich glaube du stellst die falsche Frage.

    Sag uns doch was dein Endziel ist, denn Tabellen
    sind höchstwahrscheinlich nicht das was du brauchst.

    URL?

    Gruss
    chlori

  5. Hallo,

    ich stehe vor einem Tabellenproblem:

    Wenn du schon ein Bild gemacht hast, warst du nicht weit von der Lösung. Du hättest nur dein Bild "vervollständigen" sollen, dann wäre dir auch die Lösung aufgefallen:

    <img src="http://www.meta-text.net/etc/tabelle.gif" border="0" alt="">

    Und mit einer kurzen Lektüre von http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm wäre alles erledigt.

    Grüße
    Thomas

    1. Hallo Thomas,

      Wenn du schon ein Bild gemacht hast, warst du nicht weit von der Lösung. Du hättest nur dein Bild "vervollständigen" sollen, dann wäre dir auch die Lösung aufgefallen:

      <img src="http://www.meta-text.net/etc/tabelle.gif" border="0" alt="">

      Der Vollständigkeit halber hättest du aber auch noch die erste der drei Spalten der Tabelle, die nur der Vordefinition der Höhen der Zellen in der zweiten und dritten Spalte dient, ganz schmal am linken Rand einzeichnen sollen, denn der Ansatz, den du meinst, sieht ja wohl so aus:

      <table cellspacing="0" cellpadding="0" border="1" width="100%" height="100%">
      <tr>
       <td height="33%"></td>
       <td width="50%">&nbsp;</td>
       <td width="50%" rowspan="2">&nbsp;</td>
      </tr>
      <tr>
       <td height="33%"></td>
       <td rowspan="2">&nbsp;</td>
      </tr>
      <tr>
       <td height="33%"></td>
       <td rowspan="2">&nbsp;</td>
      </tr>
      </table>

      Und mit einer kurzen Lektüre von http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm wäre alles erledigt.

      So einfach ist es nicht! Da habe ich ganz andere Erfahrungen gemacht. Je nachdem, ob nämlich das, was man dann später in diese  Tabellenzellen hineinschreibt, überhaupt auch so hineinpasst, kann ein solches Layout in einigen Browsern dazu führen, dass die dann doch wieder machen, was sie wollen. Bei Netscape 4, teilweise aber auch bei den neuesten Operas hilft dann doch wieder nur der "blinde Pixel", um die gewünschten Maße zu erzwingen. Das wird ja auch in folgendem Artikel zumindest angedeutet.

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

      Vielleicht macht man mir jetzt den Vorwurf, dass ich mit obigem Code die Lösung vorgekaut habe und damit die Philosophie von _SELFhtml verrate. Ich finde aber, wir sollten hier ein bisschen gnädiger mit Leuten umgehen, die sich in einem Gebiet noch nicht so gut auskennen. Wenn wir hier alle alles wüssten, bräuchten wir dieses Forum nicht.

      Gruß Gernot

      1. Hi Gernot,

        Vielleicht macht man mir jetzt den Vorwurf, dass ich mit obigem Code die Lösung vorgekaut habe und damit die Philosophie von _SELFhtml verrate. Ich finde aber, wir sollten hier ein bisschen gnädiger mit Leuten umgehen, die sich in einem Gebiet noch nicht so gut auskennen. Wenn wir hier alle alles wüssten, bräuchten wir dieses Forum nicht.

        a) Du tust was für die Atmosphäre und das gefällt.
        b) Der Hinweis auf die Bildgifs war OK, finde ich.

        Viele Grüße
        Mathias Bigge

    2. Wenn du schon ein Bild gemacht hast, warst du nicht weit von der Lösung. Du hättest nur dein Bild "vervollständigen" sollen, dann wäre dir auch die Lösung aufgefallen:

      <img src="http://www.meta-text.net/etc/tabelle.gif" border="0" alt="">

      Und mit einer kurzen Lektüre von http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm wäre alles erledigt.

      So wie du es bei meinem Bild eingezeichnet hast, ging ich das Problem auch an. Die Vorschau meines HTML-Editors zeigte es auch genauso an, nur in der Realität - sprich in meinem Browser - war die mittlere Linie (welche I&II von III&IV trennt) wieder gerade. Es wäre nur gegangen, wenn ich die beiden Felder nicht mit rowspan verbunden hätte. Aber dann müsste ich die Felder II u. III auf je zwei weitere Felder aufteilen und das ist - wie bereits in meinem ersten Beitrag steht - aus technischen Gründen in dem Fall nicht möglich.

      1. Hallo,

        So wie du es bei meinem Bild eingezeichnet hast, ging ich das Problem auch an. Die Vorschau meines HTML-Editors zeigte es auch genauso an, nur in der Realität - sprich in meinem Browser - war die mittlere Linie (welche I&II von III&IV trennt) wieder gerade. [...]

        Ja, du hast recht, die Browser reagieren da ziemlich unterschiedlich. Nachdem du jetzt eine funktionierende Lösung gefunden hast, lasse ich eine andere Lösungssuche bleiben.

        Grüße
        Thomas