Stefan Bach: Tabellen! (Wenn das so weiter geht, bringe ich mich um.)

Hallo alle zusammen!

Ich habe ein Problem, dass eigentlich ganz einfach aussieht. Ich möchte folgenede Tabelle anzeigen:

--Start--

<HTML><BODY BGCOLOR="#000000>
<table border="0" cellpadding="0" cellspacing="0" height="69" width="429" rows="4" cols="5">
        <tr>
                <td width="7"   height="69" rowspan="4" bgcolor="#FF00FF"> </td>
                <td width="417" height="6"  colspan="3" bgcolor="#888888"> </td>
                <td width="5"   height="69" rowspan="4" bgcolor="#FFFFFF"> </td>
        </tr>
        <tr>
                <td height="28" width="158" bgcolor="#FF0000"> </td>
                <td height="28" width="158" bgcolor="#00FF00"> </td>
                <td height="56" width="101" bgcolor="#0000FF" rowspan="2"> </td>
        </tr>
        <tr>
                <td height="28" width="316" bgcolor="#FFFF00" colspan="2"> </td>
        </tr>
        <tr>
                <td colspan="3" height="7" width="417" bgcolor="#00FFFF"> </td>
        </tr>
</table>
</BODY></HTML>

--Ende--

Dies sieht für mich ganz logisch aus. Links und Rechts einen kleinen Rand, Innendrin Oben und Unten auch. Dann in der Mitte Rechts eine hohe Zelle, links davon oben zwei gleich große, unten eine lange.

Netscape 3.0, 4.5 und IE 4 zeigen es alle falsch an. Ich denke deshalb, daß der Fehler bei mir liegt. Wieso sind der obere und untere Rand so hoch? Und wieso ist die rote Zelle so schmal?

Kopiert es einfach in eine Datei und seht es euch an. Ich hoffe, daß ich nur etwas ganz blödes übersehen habe, und daß ihr nicht auch dran verzweifelt.

Bitte helft mir!

Danke schon im Voraus,
  Stefan

  1. <td width="7"   height="69" rowspan="4" bgcolor="#FF00FF"> </td>

    In jeder Zelle steht ein erzwungenes Leerzeichen. (Kann man im Quelltext sehen!) Das scheint das Forumsscript nicht umzusetzen. Die müßt ihr also noch einfügen, sonst sieht man gar nichts!

    Gruß
      Stefan

  2. <HTML><BODY BGCOLOR="#000000>

    Macht nach der Farbe ein Anführungszeichen, dann seht ihr, daß es nicht tut!

  3. Hallo!

    Ich habe  height="69" width="429" rows="4" cols="5" aus dem Tabel-Tag gelöscht. ROWS und COLS haben dort nichts zu suchen. Height und WIDTH habe ich auch raus genommen, die ganzen Zellen sind ja schon ausgiebig definiert.
    Somit ist dann die rote Zelle und drüne Zelle Gleich groß. Die waren auch schon gleich groß, als ich ROWS und COLS raus genommen habe. Das mit der grauen Zelle und hellblauen Zelle ist normal. Horizontale Zellen kann man im IE und im Navigator nicht auf 6 Pixel darstellen. Die Zellen sind immer etwas höher. Ich nehme mal, der Browser ist der Meinung, das dort etwas drin steht, und macht sie deshalb etwas höher, also auf Buchstabengröße, auch wenn nur ein <BR>, <P> oder   angegeben ist. Mit diesem Problem hatte ich auch schon einige Stunden verbracht.

    Bis dann, André

  4. Hallo!

    Netscape 3.0, 4.5 und IE 4 zeigen es alle falsch an. Ich denke deshalb, daß der Fehler bei mir liegt. Wieso sind der obere und untere Rand so hoch?

    Man bekommt eine "schmalle zelle" mit etwas Kosmetik. Die Zelle ist nicht schmaller, sondern das Hintergrundbild täuscht das vor.

    Hier ist mal ein Beispiel. Die Grafiken kannst Du Dir unter den URL, die ich unten angebe, runter laden. Die Grafiken habe ich eben mal schnell gemacht, also die sind nicht so genau. Ich lasse die ein paar Tage auf dem Server, fals es ein paar andere auch noch sehen möchten.

    Die baust eine Grafik, z.B15x20 in die Zelle als Hintergrundbild ein. Das GIF hat einen schmallen grauen Rand. der Rest des Bildes ist transparent. Wenn man jetzt auch noch eine Hintergrundfarbe definiert, sieht man den grauen schmalen rand und die Hintergrundfarbe. Schau es Dir an, vielleicht kannst Du diesen "Trick" verwenden. Es ist keine 100% Lösung.

    <HTML><BODY BGCOLOR="#000000">
    <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                    <td width="7"   height="69" rowspan="4" bgcolor="#FF00FF">  </td>
                    <td width="417" height="6"  colspan="3" bgcolor="#ff0000" BACKGROUND="oben.gif">  </td>
                    <td width="5"   height="69" rowspan="4" bgcolor="#FFFFFF">  </td>
            </tr>
            <tr>
                    <td height="28" width="158" bgcolor="#FF0000">  </td>
                    <td height="28" width="158" bgcolor="#00FF00">  </td>
                    <td height="56" width="101" bgcolor="#0000FF" rowspan="2">  </td>
            </tr>
            <tr>
                    <td height="28" width="316" bgcolor="#FFFF00" colspan="2">  </td>
            </tr>
            <tr>
                    <td colspan="3" height="7" width="417" bgcolor="#ffff00" BACKGROUND="unten.gif">  </td>
            </tr>
    </table>
    </BODY></HTML>

    Ein Beispiel mal von mir.
    Nehmen wir mal an, wir haben eine Zelle die ist 200 breit und 100 hoch. Du möchtest jetzt oben eine 5 Pixel schmallen Rand haben. Mit einer Zelle bekommt man das nicht hin.  Man macht sich eine Grafik 5 Pixel breit und 100 Pixel hoch(nicht weniger, sonst siehst Du den rand/Streifen auch unten.."Wiederholungseffekt"). Oben auf der Grafik zeichnet man einen Rand/Streifen von 5 Pixel, den Rest macht man transparet. Jetzt möchte man aber noch text in die zelle schreiben, dann setzt man cellpadding="7" und der text liegt nicht auf dem Rand/Streifen.

    Bis dann, André
    http://www.netcologne.de/~nc-laugksan/bilder/oben.gif
    http://www.netcologne.de/~nc-laugksan/bilder/unten.gif

    1. Hallo!

      Stimmt......, hier werden die  Leerzeichnen verschluckt. Komisch, nach meiner Meinung konnte man die mal Posten, ohne das sie verschluckt wurden.

      Bis dann, André