kostenloser Webspace werbefrei: lima-city

Html Tabelle mit Colspan & Rowspan zusammen auf einer Zelle

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   nick8719

   

   nick8719 hat kostenlosen Webspace.

   15:37, 29.3.2011

   Hallo Community,
   
   hab da mal nen Html Tabellen Problem.. vielleicht (ich hoffe es) könnt ihr mir ja helfen :)
   
   Geht um folgende Tabelle:
   
   

   <table width="400" border="0" cellspacing="0">
   	<tr>
   		<td width="20" height="20" bgcolor="#FF0000"></td>
   		<td width="30" bgcolor="#FFFF00"></td>
   		<td bgcolor="#00FF00"></td>
   		<td width="30" bgcolor="#FFFF00"></td>
   		<td width="20" bgcolor="#FF0000"></td>
   	</tr>
   	<tr>
   		<td height="30" bgcolor="#FFFF00"></td>
   		<td height="" colspan="3" rowspan="3" align="left" valign="top" bgcolor="#00FFFF">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim ... </td>
   		<td height="30" bgcolor="#FFFF00"></td>
   	</tr>
   	<tr>
   		<td height="" bgcolor="#00FF00"></td>
   		<td height="" bgcolor="#00FF00"></td>
   	</tr>
   	<tr>
   		<td height="30" height="30" bgcolor="#FFFF00"></td>
   		<td height="30" bgcolor="#FFFF00"></td>
   	</tr>
   	<tr>
   		<td height="20" bgcolor="#FF0000"></td>
   		<td bgcolor="#FFFF00"></td>
   		<td bgcolor="#00FF00"></td>
   		<td bgcolor="#FFFF00"></td>
   		<td bgcolor="#FF0000"></td>
   	</tr>
   </table>

   
   
   schaut euch das mal bitte im Firefox an (müsstet das natürlich in ne komplette Html Datei mit head body etc kopieren) und dann in irgendeinem anderen Explorer, zB IE9, Safari, Chrome, und so weiter..
   
   wie ihr dann vielleicht direkt bemerkt, sind die grünen Zellen auf der linken und rechten Seite der Tabelle im Firefox auf 100% Höhe (also so hoch wie es durch das Strecken der Box durch den Blindtext geht), doch in allen anderen Explorern ist das eben nicht der Fall.. warum ist das so!? Verstehe nicht wo das Problem liegt..
   
   wäre super wenn mir da wer helfen könnte, dass das auch in den anderen Explorern klappt. Und möglichst in der Art (soll möglichst variabel sein, daher die Tabelle) wie ich das schon versucht habe zu lösen..
   
   hatte mir das bei selfHtml angesehen und da klappts mit der einfachen Variante ganz gut, nur bei mir ist das Ganze wohl etwas komplizierter.
   
   thx
   
   Beitrag zuletzt geändert: 29.3.2011 15:44:21 von nick8719

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. m******e

   16:21, 30.3.2011

   Lösung: cellpadding und noch andere Angaben fehlten
   

   <table cellpadding="0" cellspacing="0" width="400" border="0">
           <tr>
                   <td width="20" height="20" bgcolor="#FF0000"></td>
                   <td bgcolor="#FFFF00"></td>
                   <td width="300" bgcolor="#00FF00"></td>
                   <td bgcolor="#FFFF00"></td>
                   <td width="20" bgcolor="#FF0000"></td>
           </tr>
           <tr>
                   <td height="30" bgcolor="#FFFF00"></td>
                   <td width="300" colspan="3" rowspan="3" align="left" valign="top" bgcolor="#00FFFF">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim ... </td>
                   <td height="30px" bgcolor="#FFFF00"></td>
           </tr>
           <tr>
                   <td height="210" bgcolor="#00FF00"></td>
                   <td height="30" bgcolor="#00FF00"></td>
           </tr>
           <tr>
                   <td height="30" bgcolor="#FFFF00"></td>
                   <td height="30" bgcolor="#FFFF00"></td>
           </tr>
           <tr>
                   <td width="20" height="20" bgcolor="#FF0000"></td>
                   <td bgcolor="#FFFF00"></td>
                   <td bgcolor="#00FF00"></td>
                   <td bgcolor="#FFFF00"></td>
                   <td width="20" bgcolor="#FF0000"></td>
           </tr>
   </table>

   
   
   GLiebe Grüße ;)
4. Autor dieses Themas

   nick8719

   

   nick8719 hat kostenlosen Webspace.

   11:52, 1.4.2011

   menschle schrieb:
   Lösung: cellpadding und noch andere Angaben fehlten
   

   
   
   hm, also so wie ich das sehe wird das problem mit dem zusammengestauchten zellen (grün links + rechts) in deiner variante einfach durch ne feste höhe gelöst.. aber genau das darf nicht sein, denn was ist wenn der text nu länger oder kürzer wird.. oder wenn ich den table als schattenbox für verschieden große bilder nutze..
   
   nochmal zum verständnis (was der ganze aufwand soll): wenn ich in photoshop ein bild mit einem gleichmäßigen rundum schatten versehe (schein nach außen), habe ich ja die möglichkeit den auf "weicher" oder "präzise" zu stellen.. wenn ich präzise einstelle sieht der nicht sehr schön aus, weil er an den ecken total unrealistisch wirkt (einfach zu rund), würde aber das problem der in 3 geteilten zellen (gelb+grün+gelb) an den seiten (oben, unten, rechts & links) beseitigen..
   wenn ich den schatten auf "weicher" stelle, verläuft er an den ecken eben nicht "präzise" sondern geht bis in die geraden kanten (oben, unten, rechts & links) rein (siehe bild link unten)..
   und wenn ich diesen schatten nun in 8 teile (ecken: links oben, rechts oben, links unten & rechts unten + geraden: oben, unten, rechts & links) schneiden würde (eig müssten es ja 16 sein), um diese dann in einer tabelle für eine variable box oder verschiedengroße bilder zu verwenden wäre der übergang im schatten von ecke zu gerade wie ein schnitt.. folglich müss ich in jeder geraden, am anfang und am ende, noch ein stück der ecke (in meinem html die gelben zellen) davor setzen damit ein gleichmäßiger übergang entsteht, aber trotzdem in höhe und breite variabel ist ohne iwas mit javascript etc im vorweg zu berechnen und hart einzutragen..
   
   
   hier nochmal eine grafik dazu (damit auch alle verstehen was ich meine, ist echt etwas kompliziert muss ich gestehen ^^):
   http://skynet.xe.cx/schatten.png
   
   obere grafik -> schatten (schein nach außen) auf "präzise"
   untere grafik -> schatten (schein nach außen) auf "weicher" <- das will ich! und da liegt das problem bei der umsetzung ohne berechnungen oder feste höhe(/breiten)
   
   
   und wie schon oben gesagt, im firefox gehts natürlich ohne problem.. da ist er aber auch der einzige
   
   hoffe ich habe mich jetzt verständlicher ausgedrückt und ihr könnt mir helfen :-)
   
   
   EDIT:
   und um mein problem nochmal zu vervollständigen, das html direkt zum öffnen:
   http://skynet.xe.cx/table.html
   
   Beitrag zuletzt geändert: 1.4.2011 16:29:19 von nick8719

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?