find-templates

table

zurück zur Übersicht

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 Mein Status Wolfgang Homepage Beispieltext
2 Mein Status Tom Homepage Beispieltext
3 Mein Status Chris Homepage Beispieltext
4 Mein Status Wolfgang Homepage Beispieltext
5 Mein Status 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;



Heute: 5 Besucher