trinity: Zellen einer Tabelle stufenförmig anordnen

Hallo,

ich habe eine dringende Frage, bin schon fast am verzweifeln:

Ich möchte mit Hilfe einer Tabelle Zellen stufenförmig anordnen, d.h. es soll rechts oben beginnen und links unten enden, die Zellen sollen sich überschneiden. Das habe ich auch schon so weit hin bekommen, allerdings werden die Zellen nach unten hin immer kleiner. Ich weiß wirklich nicht, was ich noch machen soll. Anbei der Quelltext:

<tr>           <td width="20%">           <table align="right" border="1">    <tr>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td colspan="6" width="46%">category1</td>                          </tr>                          <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                          <tr>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                           <td colspan="6" width="46%">category2</td>                                  <td> </td>                          </tr>                          <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                          <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td colspan="6" width="46%">category3</td>                                  <td> </td>                                  <td> </td>                          </tr>                           <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                          <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td colspan="6" width="46%">category4</td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                           <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>    <tr>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td colspan="6" width="46%">category5</td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                           <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                          <tr>                                  <td> </td>                                  <td> </td>                                  <td colspan="6" width="46%">category6</td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                           <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                          <tr>                                  <td> </td>                                  <td colspan="6" width="46%">category7</td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                           <tr>                           <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                          <tr>                                  <td colspan="6" width="46%">category8</td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                                  <td> </td>                          </tr>                  </table> </td> </tr>

Vielen Dank für Eue Hilfe!!!!

  1. Hallo!

    also bei mir sind da alle Zellen entweder breit oder schmal. die breiten sind immer gleich und die schmalen auch.

    Was du vielleicht noch tun könntest: die breite der schmalen Zellen mit width="" festlegen

    Andy

  2. Liebe Trinity,

    bist du sicher, dass du dafür Tabellen brauchst? Ich könnte mir vorstellen, dass du diese Optik auch ohne Tabellen hinbekommst. Deine Tabellen-Idee hat da einen gravierenden Denkfehler: Die Gesamtbreite der Tabelle richtet sich nach ihrer breitesten Zeile. Die maximale Breite einer Zeile wird von der festgelegten Breite der Tabelle (falls angegeben), oder von ihren Zellen her bestimmt. Jedenfalls werden die Zellen in einer Zeile (oder zumindest eine davon) immer so weit in die Breite gezogen, bis der Rand der Zelle (und damit der Zeile) mit dem Tabellenrand zusammenstößt. (Es sei denn natürlich, in dieser Zeile sind nicht so viele Zellen, wie in der Zeile mit den meisten Zellen.)

    Warum machst du das nicht mit CSS? Wenn deine Inhalte nicht wirklich tabellarische Daten sind, dann kann man das ja auch mit einer Liste, oder Textabsätzen machen, die man per CSS entsprechend "ausformt"...

    Deinem Quelltext kann ich nur entnehmen, dass da eine (Standard-)Tabelle steht, die letzten Endes rechteckig (aufrecht) sein wird. Also wird sie keine "Treppeneffekte" haben. Nix mit stufig zu machen!

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.