find-templates

table

Tabellengestaltung

Eine häufig gestellte Frage: Wie lässt sich eine "Memberlist" oder eine "Mannschaftsaufstellung"
optisch ansprechend einbinden ? Am einfachsten mit Hilfe einer Tabelle.

Beispiel für eine Member-List:

- Tabelle mit 5 Spalten nebeneinander (erweiterbar, siehe unten)
- mit Schatten und abgerundeten Ecken (Ausnahme: Internet-Explorer 6 - 8 )
- z.B. mit Skype-Statusanzeige, der Klick auf Status ermöglicht Kontaktaufnahme

Nr.:	Avatar	Skype-Status	Name	Homepage	Titel
1			Wolfgang	Homepage	Beispieltext
2			Tom	Homepage	Beispieltext
3			Chris	Homepage	Beispieltext
4			Wolfgang	Homepage	Beispieltext
5			Dominik	Homepage	Beispieltext

Schritt 1 : Der CSS-Code

• mit dem CSS-Code bekommt Tabelle gewünschtes Aussehen
• auf "Eigene Seiten editieren" und gewünschte Seite auswählen
• im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
• zu Beginn (als erstes) dann folgenden Code einfügen

<style type="text/css">
<!--

/* Tabelle Breite - Rahmen - Schatten */
.tabelle {
 width: 500px; 
 padding: 5px;
 border: 1px solid #c9c9c9;
 border-spacing: 0px;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 box-shadow: 4px 4px 7px #c9c9c9;
 -moz-box-shadow: 4px 4px 7px #c9c9c9;
 -webkit-box-shadow: 4px 4px 7px #c9c9c9; }

/* Aussehen Titelfelder oben */
.titel td { background-color: #202020; color: #FFFFFF; }

/* Tabellenspalten Schrift + Innenabstand*/
.tabelle td {
 font-size: 12px;
 font-family: arial;
 padding: 7px 7px 7px 7px; }

/* graue Tabellenzeile */
.zeile_grau { background-color: #e2e2e2; }

/* weisse Tabellenzeile */
.zeile_weiss {background-color: #FFFFFF;}

/* Avatar */
.avatar img { width: 50px; height: 33px; }

/* Aussehen Verlinkung */
.homepage a {
 display: block;
 width: 50px;
 padding: 2px 7px 2px 7px;
 color: #FFFFFF;
 font-size: 11px; 
 text-decoration: none;
 border: 1px solid #a9a9a9;
 background-color: #afb4b4;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px; }

/* HOVER Verlinkung */
.homepage a:hover { background-color: #006464; }

-->
</style>

Die Breite der Tabelle kannst du in der ersten Codezeile anpassen (siehe width: 460px; )
Die Hintergrundfarben können bei background-color geändert werden.
Textfarben findest du jeweils bei color:, Textgröße bei font-size:

Schritt 2 : Der HTML-Code

• der HTML-Code stellt die Tabelle dar
• hier bekommen die Tabellenspalten den gewünschtem Inhalt
• im Seiteninhalt an gewünschter Stelle einfügen

<table class="tabelle">

<tr class="titel">
<td> Nr.: </td>
<td> Avatar </td>
<td> Skype-Status </td>
<td> Name </td>
<td> Homepage </td>
<td> Titel </td>
</tr>

<tr class="zeile_weiss">
<td> 1 </td>
<td class="avatar"> <img src="GRAFIKADRESSE 1 /> </td>
<td> Hier Skype-Status Code einfügen </td>
<td> Hier Name </td>
<td class="homepage"> <a href="LINK">Homepage</a> </td>
<td> Beispieltext </td>
</tr>

<tr class="zeile_grau">
<td> 2 </td>
<td class="avatar"> <img src="GRAFIKADRESSE 2 /> </td>
<td> Hier Skype-Status Code einfügen </td>
<td> Hier Name </td>
<td class="homepage"> <a href="LINK">Homepage</a> </td>
<td> Beispieltext </td>
</tr>

<tr class="zeile_weiss">
<td> 3 </td>
<td class="avatar"> <img src="GRAFIKADRESSE 3 /> </td>
<td> Hier Skype-Status Code einfügen </td>
<td> Hier Name </td>
<td class="homepage"> <a href="LINK">Homepage</a> </td>
<td> Beispieltext </td>
</tr>

<tr class="zeile_grau">
<td> 4 </td>
<td class="avatar"> <img src="GRAFIKADRESSE 4 /> </td>
<td> Hier Skype-Status Code einfügen </td>
<td> Hier Name </td>
<td class="homepage"> <a href="LINK">Homepage</a> </td>
<td> Beispieltext </td>
</tr>

<tr class="zeile_weiss">
<td> 5 </td>
<td class="avatar"> <img src="GRAFIKADRESSE 5 /> </td>
<td> Hier Skype-Status Code einfügen </td>
<td> Hier Name </td>
<td class="homepage"> <a href="LINK">Homepage</a> </td>
<td> Beispieltext </td>
</tr>

</table>

Skype-Status-Code einfügen:
- hier findest du den Skype-Status-Code
- im Generator den Nutzernamen einfügen
- wähle aus: "Skype Status anzeigen"
- wähle aus bei Funktion: "mit mir chatten"
- wähle aus bei Inhalt: "Symbol und Text"
- wähle aus bei Größe: "klein"
- kopiere den fertigen Status-Code
- ersetze im Tabellencode das Hier Status-Code einfügen durch den Status-Code

Hompage-Link in Tabelle einfügen:
- ersetze nur das Wort LINK durch gewünschten Homepage-Link
- z.B. http://www.meine-page.de.tl
- die Verlinkung bekommt automatisch das Aussehen eines Buttons (wie im Beispiel oben)

Tabelle mit 6 Spalten nebeneinander ?

- gehe in den HTML-Code der Tabelle
- suche alle schliessenden Tabellenzeilen </tr>
- füge davor ein: <td> TEXT </td>

- gehe in den CSS-Code
- in erster Codezeile bei .tabelle {
- erhöhe bei Bedarf die Breite bei width: 460px;