 |
| 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:
|
|
|
|
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:
|
|
|
|
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> </td>
<td colspan=4> </td>
<td bgcolor=#FFFFFF><img src="pics/1pix.gif" width=3
height=1></td>
</tr>
<tr>
<td>Name</td>
<td> </td>
<td><input type="text" name="N2"></td>
<td> </td>
<td bgcolor=#000000><img src="pics/1pix.gif" width=3
height=1></td>
</tr>
<tr>
<td>eMail</td>
<td> </td>
<td><input type="text" name="T2"></td>
<td> </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> </td>
<td><input type="checkbox" name="C2" value="Antworten"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="S2" value="Senden">
<input type="reset" value="Löschen"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="pics/1pix.gif" width=8 height=3></td>
<td colspan=4> </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>
|
|
|
|
