Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML/CSS-Übungen: Bundesliga-Tabellen (Variationen)

Posted by sura1 - 30. Juni 2008

Bookmark and Share

Heute möchte ich mich mit Tabellen in XHTML beschäftigen.

Überarbeitung:

Man kann, wie Sie auf meiner Seite XHTML-Referenz sehen können, einfache Tabellen auch allein mit XHTML-Elementen herstellen. Doch interessant wird die Errichtung von Tabellen erst durch den Einsatz von CSS. Mit CSS haben Sie unendlich viele Möglichkeiten, gestalterisch einzugreifen und Tabellen grafisch ansprechend zu layouten.

Nachfolgend stelle ich Ihnen anhand einer Tabelle der deutschen Fußball-Bundesliga 3 Beispiele von Tabellen vor:

Damit Sie die 3 Tabellen-Beispiele bearbeiten können, haben Sie die Möglichkeit, die Daten für die jeweiligen Tabellen nachfolgenden downzuloaden. Es steht auch eine Zusammenfassung aller 3 Beispiele als Download zur Verfügung.

Bundesligatabelle 1:

(32,3KB Zip-Datei)


Bundesligatabelle 2:

(3KB Zip-Datei)


Bundesligatabelle 3 – alternative Stylesheets:

(17,8KB Zip-Datei)


Herunterladen aller 3 Beispiele in einer Zip-Datei:

(17,8KB Zip-Datei)

Erläuterung zu den einzelnen Beispielen:

Bundesligatabelle 1:

Zusätzlich zum body habe ich in der html-datei „style.html“ einen eigenen div-Container mit der Bezeichnung „wrapper“ eingefügt. Mit diesem habe ich dann im Stylesheet „style.css“ folgende wichtige Formatierungen  festgelegt:

CSS-Code (Auszug):

body { background-color: #005F00;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#wrapper { width: 460px; /* Breite des Inhaltsbereiches */
border: 6px ridge #336633;
margin: 50px auto;
padding: 10px;
background-color: #009F00;
text-align: center;
}

.team { text-align: left; }

Die anderen CSS-Formatierungen entnehmen Sie bitte der CSS-Datei. Ich möchte zu diesem Beispiel noch sagen, dass in der Beispiel-Grafik die Hintergrundfarbe mit #005f00 festgelegt ist. Optisch besser sieht es aber besser aus, wenn Sie die Hintergrundfarbe gegen die Grafik „hintergrund.jpg“ austauschen!

Bundesligatabelle 2:


Bei dieser Tabelle gibt es im html-code keine extra Formatierung mittels „id“. Ich verwende hier nur eine Klasse mit der Bezeichnung „team“ und trotzdem erscheint mir persönlich diese Variante als klassisches Beispiel dafür, was man mit einer (!) Grafik, mit entsprechender Hintergrundfarbe und den Pseudo-Klassen „hover“ und „visited“ alles hervorzaubern kann.

Als Hintergrundfarbe für den body habe ich in der CSS-Datei „sky.css“ die Farbe #000 gewählt, da sie einen ausgezeichneten Kontrast zu den verschiedenen Blautönen darstellt.

CSS-Code (Auszug):

body { color: #000;
background-color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#wrapper { width: 472px; /* Breite des Inhaltsbereiches */
border: 6px ridge #99ccff;
margin: 30px auto;
padding: 10px;
background-color: #6699cc;
text-align: center;
}
.team { text-align: left; }

Der Rest der CSS-Datei besteht nur aus den üblichen Formatierungen und bezieht sich ausschließlich auf die in meiner Elemente-Referenz angeführten XHTML-Befehle für Tabellen.

Bundesliga-Tabellen – 3: Variationen mit mehreren StyleSheets (alternate CSS):


Im Beispiel 3 habe ich in „index.html“ folgenden Codierung vorgenommen:

Sie haben bekanntlich die Möglichkeit, eine CSS-Datei mit Hilfe des XHTML-Elementes <link> in den HMTL-Quellcode einzubingen. Das geht so:

<link href=“dateiname.css“ rel=“stylesheet“ title=“dateiname.css“ type=“text/css“ media=“screen“ />

Wenn Ihnen nun wie hier für eine Tabelle 26 verschiedende Stylesheets zur Verfügung stehen, haben Sie eine interessante Möglichkeit, alle(!) CSS-Dateien auf einmal in den Quell-Code einzubauen. So ersparen Sie sich dann die notwendige Arbeit des Austauschens.

alternate.html

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;
<html xmlns=“http://www.w3.org/1999/xhtml&#8220; lang=“de“ xml:lang=“de“>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />
<link href=“blueonblue.css“ rel=“stylesheet“ title=“blueonblue“ type=“text/css“ media=“screen“ />
<link href=“cga.css“ rel=“alternate stylesheet“ title=“cga“ type=“text/css“ media=“screen“ />
<link href=“chives-tables.css“ rel=“alternate stylesheet“ title=“chives-tables“ type=“text/css“ media=“screen“ />
<link href=“chrome.css“ rel=“alternate stylesheet“ title=“chrome“ type=“text/css“ media=“screen“ />

…………. und hier stehen die übrigen CSS-Dateien!

Sie benennen also eine CSS-Datei (hier blueonblue.css) mit der Bezeichnung rel=“stylesheet“ und alle anderen Stylesheets müssen dann mit rel=“alternate stylesheet“ ausgezeichnet werden.

In Ihrem Firefox- oder Opera-Browser sehen Sie danach unter der Rubrik „Ansicht“ beim Punkt „Webseiten-Stil“ die alternativen Stylesheets angeführt. Durch Anklicken haben Sie dann die Möglichkeit, ganz einfach und schnell den Webseiten-Stil (hier das Tabellen-Layout) zu wechseln.

Einzige Einschränkung: Bei jedem Neustart der html.datei wird wieder die mit rel=“stylesheet“ bezeichnete css.datei neu geladen!

ACHTUNG:  Benutzer des IE 7(oder niedriger) können diese Alternative nicht nutzen, da der Internet-Explorer die Funktion von alternativen Webseiten-Stil-Möglichkeiten nicht unterstützt.

Wie Sie im Internet Explorer trotzdem zwischen den verschiedenen Style-Sheets hin- und herwechseln können, erklärt das Tutorial

http://www.thestyleworks.de/tut-art/style_switcher_1.shtml

Feststellung: Bei einigen Layouts ist es notwendig, kleinere  Anpassungen im HTML-Quellcode vorzunehmen (eher etwas für fortgeschrittene Webseitengestalter!).


Der Großteil der CSS-Dateien für die BUNDESLIGATABELLE stammen von CSS Table Gallery. Idee und Initial-Design von Chris Heilmann. Sie dürfen die CSS-Dateien frei verwenden und zum Beispiel ohne Einschränkungen tauschen, verändern etc. (Ausnahme: wenn in der CSS-Datei etwas Gegenteiliges steht!).

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: