[HTML] Tabelle designen

[alcaeus]

Hi! Also, normalerweise ist HTML ja ein Kinderspiel, aber nach 4 Stunden immer noch keine Tabelle zu haben ist traurig. :wall: :roll:
Also, meine Tabelle soll so aussehen (Die erste Zeile sind die Grundspalten):

Code:

| 1 | 2 | 3 | 4 | 5 | 6 |  7  | 8 | 9 | 10|
| Titel                       |   |   |   |
|-> | Downloads               | a | b | c |
| / |-> | Cat_1               | a | b | c |
|   /   |-> | Cat_2           | a | b | c |
|      /    |-> | Cat_3       | a | b | c |
|   /   |-> | Cat_4           | a | b | c |
| / |-> | Cat_5               | a | b | c |

Der Slash stellt eine leere Zelle dar, der Pfeil steht für ein Image, das in die Zelle kommt.
Die Spalten 1-6 müssen alle 46 Pixel breit sein, jedoch werden sie (wie hoffentlich erkennbar) mit Zeile 7 zusammengefügt, um eben diese Baumstruktur zu erreichen. Die letzten drei Spalten sollen wiederum nur die notwendige Breite verwenden. Deshalb fällt auch das Zusatztag 'style="table-layout:fixed"' weg, das kann ich wegen den drei letzten Tabellen nicht verwenden. Kann mir hier irgendjemand eine Art HTML zusammenzustellen?

Thanx and Greetz
alcaeus

[add]Ich setze ein Kopfgeld auf denjenigen aus, der HTML-Tabellen erfunden hat.[/add]

[CalganX]

Hi,
hast du Dreamweaver oder irgendeinen anderen WYSIWYG-Editor (da geht sogar Frontpage)? Dann ist das nicht allzuschwer. ;)

Wenn ich jetzt den Mozilla Composer an's Laufen bekomme gebe ich dir den HTML-Code. ;)

Chris

[alcaeus]

Naja, ich hab HTML-Code. Aber entweder es passt die linke Hälfte und die rechte nicht, oder die linke passt und die rechte nicht. Ein anderes Problem ist, dass dies in PHP dynamisch so erzeugt wird, das heißt ich kann nichts als gegeben annehmen.

Greetz
alcaeus

[micsie]

Hallo,

wenn ich dein Problem richtig verstanden habe, könnte das etwa so aussehen

Code:

<table border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td colspan="7">Titel</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td width="46"></td>
    <td colspan="6">Downloads</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td></td>
    <td width="46"></td>
    <td colspan="5">Cat_1</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td width="46"></td>
    <td colspan="4">Cat_2</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td width="46"></td>
    <td colspan="3">Cat_3</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="4">Cat_4</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td colspan="5">Cat_45</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td width="46"></td>
    <td width="46"></td>
    <td width="46"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

mfg micsie

[alcaeus]

@Micsie: Dein Lösungsvorschlag ist gut, jedoch funktioniert es so für mich leider nicht, da ich cellspacing aus Designgründen auf 2 habe, und dadurch immer ein Rand kommt. Und sobald ich die Zellen mit colspan verbinde, bin ich wieder bei meinem Problem angelangt. Ich versuche jetzt aber, dieses HTML mit verschachtelten Tabellen zu überlisten, danke trotzdem.

Greetz
alcaeus

[himitsu]

:angle:

Code:

<table border="1" cellspacing="1" cellpadding="5"> 
  <tr> 
    <td>Titel</td> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
  </tr> 
  <tr> 
    <td>&rArr; Downloads</td> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
  </tr> 
  <tr> 
    <td>  &rArr; Cat_1</td> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
  </tr> 
  <tr> 
    <td>    &rArr; Cat_2</td> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
  </tr> 
  <tr> 
    <td>      &rArr; Cat_3</td> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
  </tr> 
  <tr> 
    <td>    &rArr; Cat_4</td> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
  </tr> 
  <tr> 
    <td>&rArr; Cat_45</td> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
  </tr> 
</table>

[alcaeus]

Zitat:

Zitat von alcaeus

Die Spalten 1-6 müssen alle 46 Pixel breit sein, jedoch werden sie (wie hoffentlich erkennbar) mit Zeile 7 zusammengefügt, um eben diese Baumstruktur zu erreichen.

An den Ansatz habe ich auch schon gedacht himitsu, allerdings ist da noch dieses Image welches 25 Pixel breit ist, aber aus Designgründen trotzdem 46 Pixel braucht. Danke trotzdem, ich werde mich heute (jetzt noch nicht, später dann) wieder an die Sache ranmachen, die verschachtelte Tabelle könnte funktionieren.

Greetz
alcaeus

[himitsu]

Bitte: hier mal ein Bild, was 46 Pixel breit ist, obwohl es nur 15 Pixel hat ^^
(10 + 15 + 11 = 46) :zwinker:

Code:

[img]...[/img]

PS: border="0" muß komischer Weise mit angegeben werden, da der IE sonst die Styleinformationen ignoriert :gruebel:

[Ghostwalker]

Auf die Styles kannst auch verzichten. Es reicht beim Image-tag Width und Height anzugeben. :mrgreen:

sieht dann also einfach so aus:

Code:

   [img]meinbild.jpg[/img]

und schon ist dein bild 46*46 Pixel groß.

[alcaeus]

Zitat:

Zitat von Ghostwalker

Auf die Styles kannst auch verzichten. Es reicht beim Image-tag Width und Height anzugeben. :mrgreen:

sieht dann also einfach so aus:

Code:

   [img]meinbild.jpg[/img]

und schon ist dein bild 46*46 Pixel groß.

Sorry, aber himitsus Weg ist der richtige. Die Größenangaben beim img-Tag vergrößern das Bild, das heißt es würde verzerrt. Mit dem Rand wird nur der Platz freigemacht, und das will ich erreichen. Ich werde mich jetzt wieder an die Sache ranwagen, mal sehen was dabei rauskommt.

Greetz
alcaeus