News
Angebote
       ?print">Druckversion
Druckversion
  Toolbox Tipps & Tricks HTML Toolbox
 
Tipp 4: Tabellen in HTML - "Schicke Schatten"

      Schicke Schatteneffekte
    Schatteneffekte kann man als gestalterisches Mittel immer dann einsetzen, wenn sich bestimmte Elemente räumlich aus ihrem Umfeld heraus abheben sollen. Als Effekt in einem Grafikprogramm erzeugt, ist das nichts Neues, doch mit wenig Aufwand können auch Tabellen "dreidimensional" dargestellt werden.

    Doch schauen Sie sich zuerst das Ergebnis an:

    
Name    
eMail    
Bitte antworten Sie mir    
          
 


      Die Lösung
    Mit Grafiken oder Teilbildern ist das schnell zu machen. Aber diese Lösung ist unflexibel. HTML braucht weniger Ladezeit und lässt sich zudem leicht anpassen. So können Farbe oder Stärke des Schatteneffekts rasch den eigenen Bedürfnissen angepasst werden.

      Die Technik
    Die Beispieltabelle bringt es auf 7 Zeilen und 6 Spalten. Das Prinzip wird deutlich, wenn man den Rahmen der Tabelle einschaltet:

    
Name    
eMail    
Bitte antworten Sie mir    
          
   


      Zu den Details
    Der Trick ist das Aufspannen von Zellen mit transparenten GIFs und geschützten Leerzeichen. Ist ein geschütztes Leerzeichen enthalten, wird eine Zelle in einer festgelegten Höhe dargestellt.
    In den Fällen, wo ein geschütztes Leerzeichen die Zelle zu sehr aufspannen würde, verwendet man transparente GIFs. Damit kann einer Zeile eine exakt definierte Höhe und Breite zugewiesen werden. In diesem Fall kommt das Transparent-GIF und damit die Zeile auf eine Höhe von 3 Pixeln. Das ganze wiederholt sich an der rechten Außenseite, hier allerdings mit der Breite des transparenten GIFs. Zuvor allerdings werden bestimmte Zellen zusammengeschaltet (siehe Abbildung). Zwingend erforderlich ist das zwar nicht, doch erspart man sich das Problem mit dem geschützten Leerzeichen. Außerdem wird der Quellcode kürzer.

    Anschließend wird den Zellen eine Farbe zugewiesen. Was hier schwarz erscheint, kann selbstverständlich jede andere Hintergrundfarbe bekommen. Die "Dicke" des Schatteneffekts wird über das Transparent-GIF bestimmt.

    Netscape Browser sind wie immer ein wenig genauer. Tabellenelemente werden nur dargestellt, wenn ein Form-Tag vorhanden ist, und das Ganze klappt nur, wenn die Tabelle keine feste Größe bekommt. Formatiert man das Beispiel auf eine Breite, von 400 Pixel, wird der rechte Schatten zu breit. Beachten Sie außerdem, dass der Netscape Browser Eingabezeilen breiter als der Internet Explorer darstellt.

    Der Quellcode

    <form>
    <table align="CENTER" border=1 cellspacing=0 cellpadding=0 bgcolor=#DDDDFF>
    <tr>
      <td rowspan=6>&nbsp;&nbsp;</td>
      <td colspan=4>&nbsp;</td>
      <td bgcolor=#FFFFFF><img src="pics/1pix.gif" width=3
      height=1>
    </td>
    </tr>
    <tr>
      <td>Name</td>
      <td>&nbsp;</td>
      <td><input type="text" name="N2"></td>
      <td>&nbsp;</td>
      <td bgcolor=#000000><img src="pics/1pix.gif" width=3
       height=1>
    </td>
    </tr>
    <tr>
      <td>eMail</td>
      <td>&nbsp;</td>
      <td><input type="text" name="T2"></td>
      <td>&nbsp;</td>
      <td bgcolor=#000000 rowspan=4><img src="pics/1pix.gif"
      width=3 height=1>
    </td>
    </tr>
    <tr>
      <td nowrap>Bitte antworten Sie mir</td>
      <td>&nbsp;</td>
      <td><input type="checkbox" name="C2" value="Antworten"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="submit" name="S2" value="Senden">
      &nbsp;&nbsp;<input type="reset" value="Löschen"></td>
      <td>&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><img src="pics/1pix.gif" width=8 height=3></td>
      <td colspan=4>&nbsp;</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"></td>
      <td colspan=5 bgcolor=#000000><img src="pics/1pix.gif" width=1 height=3></td>
    </tr>
    </table>
    </form>


 

Last Updated: 28.11.2009 - Poly4Media: WebAdmin - © by Poly4Media® 2000-2009