*CSS Styles im Forum* Kapitel 3b : Tabellen Button Beispiele - CSS Styles und HTML im Forum	Wettforum & Wett-Tipps Forum Kapitel 3b : CSS & HTML im Forum

User Tutorial zu CSS Styles & HTML im Forum

Kapitel 3b : Button Beispiel mit Tabellen

Ein Button Beispiel mit Hilfe von Tabellen, Farbe und Rahmen
Neben den HTML Elementen wie zum Beispiel <button> oder <div>,
(zur Nutzung von div mit float usw. kommen wir in einem anderen Kapitel) geht
es in diesem Kapitel 3b mal um die Alternative mit Hilfe von Tabellen Buttons
oder Buttonähnliche Strukturen zu bauen.

Das sind sicher nicht überall einsetzbare Varianten, aber es gibt bei uns im
Forum bzw. den Statistiken beispielsweise durchaus solche Beispiele für deren Einsatz,
es stellt auf jeden Fall eine weitere praktisch anwendbare Alternative dar.

Angenommen wir brauchen einmal eine vertikale und eine eine horizontale
Buttonleiste, beispielsweise soll das für die vertikale Variante
wie die Navigation bei unseren Fussball Statistik aussehen.
dies wollen wir mit Hilfe von Tabellen und CSS bewerkstelligen.
Wir verwenden auch hier inline Style, die in den anderen Kapiteln zu den Stylesheets
genannte Variante 1) um im Quelltext für das Element Attribute hinzuzufügen,

1. Beispiel für einen Button gestaltet mit Tabelle
Zunächst müssen wir uns eine entsprechende Tabelle definieren
die unserem Anspruch an Form, Platz, Feldern und Ausrichtung genügt.
Dies machen wir mal am Fussball Navigation Beispiel praxisnah :

<table>
<tr><td>Fussball Tabellen</td><td>Fussball Ergebnisse</td><td>Liveticker</td></tr>
</table>

Unsere Tabelle sieht jetzt unformatiert so aus :

Fussball Tabellen

Fussball Ergebnisse

Liveticker

Beginnen wir nun unsere horizontale Tabelle als Navigation und Buttons
entsprechend mit CSS Attributen und Elementen zu gestalten.

<table cellspacing="1" cellpadding="2" border="0" style="font-size:10px; background-color:#ffffff; border:1px solid #000000;">
<tr><td style="text-align:center; width:120px; background-color:#888888; color:#003078;">Fussball Tabellen</td>
<td style="text-align:center; width:120px; background-color:#888888; color:#003078;">Fussball Ergebnisse</td>
<td style="text-align:center; width:120px; background-color:#888888; color:#003078;">Liveticker</td></tr>
</table>

Nun sieht unsere Tabelle leicht formatiert schon etwas mehr nach Buttons und Navigation aus :

Fussball Tabellen

Fussball Ergebnisse

Liveticker

Erstaunlich was man aus dieser Tabelle machen konnte und so scheinbar
Buttons entstehen. Die Gestaltung kann man von Hintergrundbildern,
Ausrichtung und Abständen noch höchst individuell anpassen,
mit dem Einsatz der Tabelle hat man da sehr viele schöne Möglichkeiten.

Fussball Tabellen

Fussball-Ergebnisse

Live ticker

Wettbonus

Buchmacher Vergleich

Nach einigen weiteren Style Elementen und/oder Mouseover Effekten
wäre unsere CSS Button Alernative mit Hilfe von Tabellen als
Grundgerüst unserer Button Struktur mit Stylesheets schon einsatzfähig.

Im Zusatz Kapitel 3c geht es nun wieder um reguläre Buttons und deren
Gestaltung mit CSS, dabei aber um dein einsatz von Bildern als
Button Hintergrund und die dazu vorhandenen Möglichkeiten.

Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum