Nick: Komplizierte Tabelle

Hallo.

Ich habe mir gearde eine recht komplizierte Tabelle für das neue Layout meiner HP gemacht (per hand gecodet). Sie enthält mehrere colspans und rowspans. Sie wäre jetz zu kompliziert ums sie zu beschreiben, sie ist aber fehlerfrei und geht genau auf.

Nun hab ich alle Tabellenreihenhöhen mit einem height="..px" in der ersten Tabellenzelle der jeweiligen Reihe festgelegt. Klappte!
Dann wollte ich die Spaltenbreiten festlegen und hab dies ert mit der <colgroup>-Methode gemacht, so wie ich das sonst immer löse. Doch irgendwie spinnte es dann. Die Breiten mancher Spalten war überhaupt nicht die, die ich mit dem Pixelwert (width="..px") bestimmt hatte. Als ob die Tabelle einfach nicht gehorchen wollte! :-(

Dann hab ich versucht die Spaltenbreiten direkt in den <td>-tags der obersten Tabellenreihe festzulegen, auch hier mit width="..px"
Und wieder ist es total eigenwillig!

http://www.metalive.net/files/temp/layout.html
Hier ist die Tabelle, allerdings sieht die total verrückt aus, und überhaupt nicht so wie sie aussehen soll. Also ich weiß nicht ob es euch was bringt, sie anzusehen.

Woran kann das liegen? Hapert es da mit den verbundenen Zellen?

Oder kennt jemand vielleicht ein ONLINE-Tool mit dem ich bequem ne Tabelle generieren kann?

Danke :-)
Nick

  1. Hallo Nick,

    auf den ersten Blick sieht man nicht, was du bezwecken willst, aber die erste Reihe umfasst 6 Spalten (1+1+2+2), die zweite 4 (2+1+1), die dritte 5 (2+1+2)? Am besten füllst du mal alle Zellen mit Inhalt und setzt border="1", dann siehst du besser wo welche Zelle ist und ob alle Zeilen unter Berücksichtigung von rowspan die gleiche Anzahl Spalten umfassen.
    Grüße
    Marcus

    <table border="0" width="100%" cellspacing="0" cellpadding="0">
     <tr>
      <td height="150px" bgcolor="blue" align="center" valign="middle">
       avatar
      </td>
      <td>
      </td>
      <td colspan="2" bgcolor="#003333">
       header graphic
      </td>
      <td rowspan="2" bgcolor="#000033">
      </td>
     </tr>
     <tr>
      <td height="10px" colspan="2">
      </td>
      <td bgcolor="#003333">
      </td>
      <td>
      </td>
     </tr>
     <tr>
      <td height="40px" colspan="2" bgcolor="#000033">
      </td>
      <td bgcolor="#FFFFCC">
      </td>
      <td colspan="2" bgcolor="#000033" align="right">
       page title
      </td>
     </tr>
    (...)