[HTML] Tabelle

Dieses Thema im Forum "Webdesign" wurde erstellt von beskhu3epnm, 7. Oktober 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 7. Oktober 2011
    Tabelle

    Hallo,
    versuche schon den ganzen Tag ein problem in meiner HTML tabelle zu lösen.
    SelfHTML und google konnten mir auch nicht weiter helfen.

    Auf dem Bild sind links und rechts jeweil 2 Thumbnails zu sehen.
    Diese versuche ich auch oben und unten in die Tabelle zu integrieren.
    Jedoch passiert alles nur das nicht.

    {bild-down: http://img411.imageshack.us/img411/7330/testvb.jpg}


    hier der Quelltext

    Ich habe nur die Tabelle im quelltext stehen lassen.
    Da es sonst zu unübersichtlich wird.
    Wenn die Tabelle funktionsfähig ist, fährt man über das Thumbnail und dieses wird dann vergrößert in der mitte dargestellt.

    Spoiler
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    </head>

    <body>
    <table align="center" border="4" cellpadding="0" cellspacing="0" width="600">
    <tbody>
    <tr>

    <td width="128" height="130"><br></td>
    <td width="1"><br></td>
    <td width="417" align="center"><img src="http://img35.imageshack.us/img35/9956/p1040111e.jpg" alt="" name="front" id="front2" onmouseover="MM_swapImage('gross','','http://img35.imageshack.us/img35/9956/p1040111e.jpg',1)" border="4" width="75" height="110" /><br></td>
    <td width="1"><br></td>
    <td align="center" width="93"> <br></td>
    </tr>
    <tfoot>
    <tr>
    <td height="130"><br></td>
    <td width="1"><br></td>
    <td align="center"><img src="http://img101.imageshack.us/img101/1893/p1040108d.jpg" alt="" name="front" id="front3" onmouseover="MM_swapImage('gross','','http://img101.imageshack.us/img101/1893/p1040108d.jpg',1)" border="4" width="75" height="110" /></td>
    <td width="1"><br></td>
    <td align="center" width="93"> <br></td>

    </tr>
    </tfoot>
    <td height="200" align="center"><table border="0" cellpadding="0" cellspacing="5">
    <tbody>
    <td><img src="http://img23.imageshack.us/img23/9186/p1040094r.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img23.imageshack.us/img23/9186/p1040094r.jpg',1)" border="4" width="75" height="110" /></td>
    </tr>
    <tr>
    <td><img src="http://img406.imageshack.us/img406/8869/p1040101y.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img406.imageshack.us/img406/8869/p1040101y.jpg',1)" border="4" width="75" height="110" /></td>

    </tr>

    </tbody>
    </table></td>

    <td><br></td>



    <td align="center"></td><td><br></td>
    <td align="center"><table border="0" cellpadding="0" cellspacing="5">
    <tbody>
    <tr>

    <td><img src="http://img819.imageshack.us/img819/1274/p1040093t.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img819.imageshack.us/img819/1274/p1040093t.jpg',1)" border="4" width="75" height="110" /></td>
    </tr>
    <tr>
    <td><img src="http://img545.imageshack.us/img545/5259/p1040100w.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img545.imageshack.us/img545/5259/p1040100w.jpg',1)" border="4" width="75" height="110" /></td>
    </tr>
    <tr>


    </tbody>
    </table></td>
    </tr>
    </tbody></table>


    </body>
    </html>
     
  2. 7. Oktober 2011
    AW: Tabelle

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
    <title>Unbenannt</title>
    <style type="text/css">
    table {
     margin: 0 auto;
     width: 600px;
     border: 4px solid;
     border-color: #999 #333 #333 #999;
    }
    td {
     text-align:center;
     height: 130px;
    }
    .grid128 {
     width: 128px;
    }
    </style>
    </head>
    
    <body>
    
    <table border="1" cellspacing="0" cellpadding="0">
    <tr>
     <td class="grid128">&nbsp;</td>
     <td>Bild</td>
     <td class="grid128">&nbsp;</td>
    </tr>
    <tr>
     <td>Bild<br />Bild</td>
     <td>&nbsp;</td>
     <td>Bild<br />Bild</td>
    </tr>
    <tr>
     <td>&nbsp;</td>
     <td>Bild</td>
     <td>&nbsp;</td>
    </tr>
    </table>
    
    <p>&nbsp;</p>
    
    <table border="1" cellspacing="0" cellpadding="0">
    <tr>
     <td class="grid128">reihe 1 links</td>
     <td>reihe 1 mitte</td>
     <td class="grid128">reihe 1 rechts</td>
    </tr>
    <tr>
     <td>reihe 2 links</td>
     <td>reihe 2 mitte</td>
     <td>reihe 2 rechts</td>
    </tr>
    <tr>
     <td>reihe 3 links</td>
     <td>reihe 3 mitte</td>
     <td>reihe 3 rechts</td>
    </tr>
    </table>
    
    </body>
    </html>
    
     
  3. 8. Oktober 2011
    AW: Tabelle

    hey, wusstest du, dass man dein vorhaben komplett ohne javascript umsetzen kann? zumindest in modernen browsern

    vielleicht schaust du dir mal CSS2 / CSS3 an wenn es dich interessiert.
     
  4. 8. Oktober 2011
    AW: Tabelle

    kann ich mal machen wenn ich die Zeit dazu finde.
    Wollte schon längst mal noch ein paar andere Programmiersprachen lernen.

    Hier noch ein Bild wie ich mir es vorstelle.

    Bild

    In der oberne und unteren Spallte habe ich jetzt zwar die 2 Thumbnails nebeineinander sitzen, aber ich bekommen kein Abstand dazwischen.
    Wenn ich es mit <td> oder <tr> trenne verschwindet das 2 Thumbnail ganz.
    Mit <p></p> wird es untereinander gesetzt.

    Will es aber mit Abstand darstellen wie die Thumbnails Seitlich.

    Quelltext:
    Spoiler
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    </head>
    
    <body>
     <table align="center" border="4" cellpadding="0" cellspacing="0" width="600">
     <tbody>
     <tr>
     
     <td width="128" height="130"><br></td> 
     <td width="1"><br></td> 
     <td width="417" align="center"><img src="http://img35.imageshack.us/img35/9956/p1040111e.jpg" alt="" name="front" id="front2" onmouseover="MM_swapImage('gross','','http://img35.imageshack.us/img35/9956/p1040111e.jpg',1)" border="4" width="75" height="110" /><img src="http://img406.imageshack.us/img406/8869/p1040101y.jpg" alt="" name="front" id="front5" onmouseover="MM_swapImage('gross','','http://img406.imageshack.us/img406/8869/p1040101y.jpg',1)" border="4" width="75" height="110" /><br></td>
     <td width="1"><br></td>
     <td align="center" width="93"> <br></td>
     </tr>
     <tfoot>
     <tr>
     <td height="130"><br></td> 
     <td width="1"><br></td> 
     <td align="center"><img src="http://img101.imageshack.us/img101/1893/p1040108d.jpg" alt="" name="front" id="front3" onmouseover="MM_swapImage('gross','','http://img101.imageshack.us/img101/1893/p1040108d.jpg',1)" border="4" width="75" height="110" /><img src="http://img406.imageshack.us/img406/8869/p1040101y.jpg" alt="" name="front" id="front4" onmouseover="MM_swapImage('gross','','http://img406.imageshack.us/img406/8869/p1040101y.jpg',1)" border="4" width="75" height="110" /></td>
     <td width="1"><br></td> 
     <td align="center" width="93"> <br></td>
     
     </tr>
     </tfoot>
     <td height="200" align="center"><table border="0" cellpadding="0" cellspacing="5">
     <tbody>
     <td><img src="http://img23.imageshack.us/img23/9186/p1040094r.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img23.imageshack.us/img23/9186/p1040094r.jpg',1)" border="4" width="75" height="110" /></td>
     </tr>
     <tr>
     <td><img src="http://img406.imageshack.us/img406/8869/p1040101y.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img406.imageshack.us/img406/8869/p1040101y.jpg',1)" border="4" width="75" height="110" /></td>
    
     </tr>
     
     </tbody>
     </table></td>
     
     <td><br></td>
     
     
     
     <td align="center"></td><td><br></td>
     <td align="center"><table border="0" cellpadding="0" cellspacing="5">
     <tbody>
     <tr>
     
     <td><img src="http://img819.imageshack.us/img819/1274/p1040093t.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img819.imageshack.us/img819/1274/p1040093t.jpg',1)" border="4" width="75" height="110" /></td>
     </tr>
     <tr>
     <td><img src="http://img545.imageshack.us/img545/5259/p1040100w.jpg" alt="" name="front" id="front" onmouseover="MM_swapImage('gross','','http://img545.imageshack.us/img545/5259/p1040100w.jpg',1)" border="4" width="75" height="110" /></td>
     </tr>
     <tr>
    
     
     </tbody>
     </table></td>
     </tr>
     </tbody></table>
    
    
    </body>
    </html>
    
    
     
     
     
     
  5. 8. Oktober 2011
    AW: Tabelle

    versuchs mal mit: &nbsp; (HTML-Entity für ein Leerzeichen)
    kannst mehrere machen dann hast du dein abstand

    oder du machst es wie mein vorrednet schon gesagt hast mit CSS
     
  6. 12. Oktober 2011
    AW: Tabelle

    super mit &nbsp; hat es funktioniert.

    Thx
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.