[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

[Ghostwalker]

ok..ist ein Argument.

Ich hab mal ein bischen rumprobiert.

Ergebnis (Screenshot vom IE):

http://www.codersland.de/bilder/screen.jpg

würde das so aussehen wie du das willst ?

[alcaeus]

Ja, allerdings muss ein cellspacing von 1 enthalten sein, das heißt die Zellen vor dem Image müssen verbunden werden, ebenso wie die anderen nach dem Image bis inkl. Spalte 7

Kannst du mir den Code dazu auch noch geben?

Greetz
alcaeus

[Ghostwalker]

Klar:)

Code:

<Table bgcolor="#000000" border="0" cellspacing="2" cellpadding="5">
<TR>
  <TH align="center" width="46">1</TH>
  <TH align="center" width="46">2</TH>
  <TH align="center" width="46">3</TH>
  <TH align="center" width="46">4</TH>
  <TH align="center" width="46">5</TH>
  <TH align="center" width="46">6</TH>
  <TH align="center" width="46">7</TH>
  <TH align="center" width="46">8</TH>
  <TH align="center" width="46">9</TH>
  <TH align="center" width="46">10</TH>                  
</TR>
<TR>
  <TD colspan="7">TITEL</TD>
  <TD width="46">a</TD>
  <TD width="46">b</TD>
  <TD width="46">c</TD>    
</TR>
<TR>
  <TD width="46">[img]bild.jpg[/img]</TD>
  <TD colspan="6">DOWNLOADS</TD>
  <TD width="46">a</TD>
  <TD width="46">b</TD>    
  <TD width="46">c</TD>    
</TR>
<TR>
  <TD width="46"></TD>
  <TD width="46">[img]bild.jpg[/img]</TD>
  <TD colspan="5">CAT_1</TD>
  <TD width="46">a</TD>
  <TD width="46">b</TD>    
  <TD width="46">c</TD>      
</TR>
<TR>
  <TD colspan="2"></TD>
  <TD width="46">[img]bild.jpg[/img]</TD>
  <TD colspan="4">CAT_2</TD>
  <TD width="46">a</TD>
  <TD width="46">b</TD>    
  <TD width="46">c</TD>      
</TR>
<TR>
  <TD colspan="3"></TD>
  <TD width="46">[img]bild.jpg[/img]</TD>
  <TD colspan="3">CAT_3</TD>
  <TD width="46">a</TD>
  <TD width="46">b</TD>    
  <TD width="46">c</TD>      
</TR>
<TR>
  <TD colspan="2"></TD>
  <TD width="46">[img]bild.jpg[/img]</TD>
  <TD colspan="4">CAT_4</TD>
  <TD width="46">a</TD>
  <TD width="46">b</TD>    
  <TD width="46">c</TD>      
</TR>
<TR>
  <TD width="46"></TD>
  <TD width="46">[img]bild.jpg[/img]</TD>
  <TD colspan="5">CAT_5</TD>
  <TD width="46">a</TD>
  <TD width="46">b</TD>    
  <TD width="46">c</TD>      
</TR>
</Table>

Wie du siehst hab ich sogar mit cellspacing 2 gearbeitet. Sollte also kein Thema sein:)

[himitsu]

Oder noch ein bissl übersichtlicher (für dich):
den Bildstyle als globale Klasse und die gleichen Formatierungen der einzelnen Zeilen in eine tabellenweite Spaltenformatierung umgewandelt
(ach ja, hab mal den Rand ums Bild beitseitig gleich gemacht - wenn die Rahenfarbe des Bildes sich von der Hintergrundfarbe unterscheidet, also der Rahmen sichtbar ist, dürfte es besser aussehn)

Code:

<HTML>
  <Head>
    <Style>
      .image { border-color:#FFFFFF; border-style:clear; border-width:0px;
               border-left-width:10px; border-right-width:10px; }
    </Style>
  </Head>

  <Body>
    <Table bgcolor="#808080" border="0" cellspacing="2" cellpadding="5">
      <ColGroup>
        <Col span="7" width="46">
        <Col span="3" width="46" align="center">
      </ColGroup>
      <TR>
        <TH align="center">1</TH>
        <TH align="center">2</TH>
        <TH align="center">3</TH>
        <TH align="center">4</TH>
        <TH align="center">5</TH>
        <TH align="center">6</TH>
        <TH align="center">7</TH>
        <TH align="center">8</TH>
        <TH align="center">9</TH>
        <TH align="center">10</TH>      
      </TR>
      <TR>
        <TD colspan="7">TITEL</TD>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
      </TR>
      <TR>
        <TD>[img]bild.jpg[/img]</TD>
        <TD colspan="6">DOWNLOADS</TD>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
      </TR>
      <TR>
        <TD></TD>
        <TD>[img]bild.jpg[/img]</TD>
        <TD colspan="5">CAT_1</TD>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
      </TR>
      <TR>
        <TD colspan="2"></TD>
        <TD>[img]bild.jpg[/img]</TD>
        <TD colspan="4">CAT_2</TD>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
      </TR>
      <TR>
        <TD colspan="3"></TD>
        <TD>[img]bild.jpg[/img]
        </TD><TD colspan="3">CAT_3</TD>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
      </TR>
      <TR>
        <TD colspan="2"></TD>
        <TD>[img]bild.jpg[/img]</TD>
        <TD colspan="4">CAT_4</TD>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
      </TR>
      <TR>
        <TD></TD>
        <TD>[img]bild.jpg[/img]</TD>
        <TD colspan="5">CAT_5</TD>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
      </TR>
    </Table>
  </Body>
</HTML>

hab mal die letzten 3 Spalten einzeln formatiert (im Beispiel sind diese zentriert)

aber du kannst auch alle gleich behandeln:

Code:

...
  <Body>
    <Table bgcolor="#808080" border="0" cellspacing="2" cellpadding="5">
      <ColGroup>
        [color=red]<Col span="7" width="46">[/color]
      </ColGroup>
      <TR>
...

[alcaeus]

:firejump: Also, ich habs endlich geschafft! :firejump:

Für alle die den Code dieser Beispieltabelle sehen wollen: siehe Anhang. Jetzt muss ich nur noch irgendwie den Rand einstellen, aber das dürfte mit CSS kein Problem darstellen.

Noch eine Bitte an alle Nicht-IE-Benutzer: könnt ihr mir bitte sagen, wie die Seite in Opera usw. aussieht? Mein Opera 7.23 hat einen Teil der CSS-Eigenschaften nicht interpretiert.

Greetz
alcaeus

PS: Die Domain alcaeus.us.tt ist noch NICHT belegt.

[anku]

Moinsen!

Also mit Opera 7.50 sieht es fast genauso aus. Wenn du die Border- dinger bei den BilderLinks gegen

Code:

margin:11px 10px 12px 9px;

austauscht und die verlinketen Bilder direkt - ohne zeilenumbruch und leerzeichen - in <a><img ..</a> tags packst, macht dir opera auch keinen unterstrich bei mouse-hover bei bildern.
opera scheint die border tags zu ignorieren. margin bewirkt das gleich und ist für deinen zweck auch geeigneter da du ja einen abstand und keinen rahmen möchtest!

mfg

[djmasi]

Na klar, hab mal nen Screenshot gemacht. Ach ja, hab den Opera 7.52

Hoffe es hilft Dir weiter

[alcaeus]

@Anku und djmasi: Danke, ich habe das selbe Problem beim 7.23 festgestellt, er interpretiert das border bei den images nicht. Ich werde jetzt mal das mit Margin versuchen, und wenn das nicht funktioniert dann werde ich noch einfach ein bisschen "überflüssiges" Zeug ins image reingeben, so dass es am Ende 46x50 Pixel groß ist.

Greetz
alcaeus

PS: Hat jemand die Datei in Netscape, Mozilla oder einem anderen Browser getestet?