Sie sind hier:
Startseite
» CSS-Tutorials » Tabellen
Tabellen
Tabellen-Formatierung mit CSS stellt eine Möglichkeit dar, herkömmlichen HTML-Tabellen ein ansprechendes Aussehen zu verleihen. Auf die HTML-Elemente
table, tr, colgroup, col, thead, tbody, tfoot, th und td lassen sich Formatierungen anwenden, wie sie auch bei Schriftformatierung, Ausrichtung und Absatzkontrolle, Hintergrundfarben und -bildern, Innenabstand sowie Rahmen möglich sind.
Tabellenumrahmung
Diese Tabelle besteht aus drei Tabellen-Zeilen (
tr) und einer Tabellen-Spalten (td). Die Inhalte der Tabelle spielt keine Rolle. Der Rahmen um die Tabelle wird hier mit style="border:thin solid red; border-spacing:20px" festgelegt, während die Tabellenzellen mit style="border:thin solid blue;" umrahmt werden. Es können hier die im Hilfefenster "Rahmen" genannten Rahmentypen angewendet werden
Editieren
| CSS-Style> |
| CSS-Style |
| CSS-Style> |
Rahmen border separate (Normaleinstellung)
Sie sehen hier eine Tabelle, wie wir Sie alle kennen. Das bedeutet, dass benachbarte Zellen mit Einzel-Rahmen (siehe oben "Tabellenumrahmung") dargestellt werden. CSS 2.0 verwendet für diese Normaleinstellung die Anweisung "separate".
| CSS-STYLE |
CSS-STYLE |
CSS-STYLE |
Rahmen border-collapse
Unten sehen Sie die gleiche Tabelle mit zusammenfallenden Einzelrahmen der Zellen.
Beide Tabellen wurden zum besseren Verständnis mit einem Zell-Abstand (cellspacing) von 5px definiert. Es können die im Hilfefenster "Rahmen" gen. Rahmentypen eingesetzt werden.
Editieren
| CSS-STYLE |
CSS-STYLE |
CSS-STYLE |
Tabellen / RollOver-Effekt (nur IE)
Nun noch ein oft nachgefragter RollOver-Effekt, den Sie vieleicht schon aus unserem "Grundlehrgang" zum CSS Editierfeld kennen. Beim Mouse-Rollover ändert sich die Hintergrundfarbe einer oder mehrer Tabellenzellen (td), einer Tabellenzeile (tr), der gesamten Tabelle (table), eines div-Elementes (div) oder auch des gesamten Body (body). Mit diesem Effekt sollte man sparsam umgehen .
Editieren
Overflow-Effekt
Oben sieht man den Overflow-Effekt in einem span- oder div-Element. Diese Möglichkeit können Sie überall auf Ihrer Webseite benutzen, wo Sie einen besonders hervorgehobenen und seperat, scrollbaren Bereich schaffen wollen !
Editieren
Unten steht eine Tabelle mit der CSS-Anweisung "overflow:auto" - der Inhalt der Tabelle darf also "überlaufen" - es entsteht automatisch eine Scrolleiste.
Editieren
|
schreibt "Klein aber sehr fein präsentierte sich die Anlage der Familie Weitz in Westerholz am 14. und 15. September 2002. Mit sehr viel Liebe hergerichtet fühlte man sich gleich zu Hause. Dank der perfekten Organisation verlief das gesamte Turnier reibungslos und trotz der Fülle der Prüfungen und der einen oder anderen Zeitverschiebung war das Pensum gut zu schaffen.
Scheune und Hof waren blank geputzt und halloweengerecht mit Maiskolben dekoriert und Ovalbahn und Springplatz wurden mit Krepppapier-Gebilden bunt verziert. Trotz teilweise parallel laufender Prüfungen konnte man dank der Übersichtlichkeit der Anlage alles gut verfolgen und die Wege zwischen Paddockplatz, Turnierplatz und Hof, auf dem es die Verpflegung gab, waren sehr schön kurz.
Die meisten der angebotenen Hestadagar-Prüfungen waren gut besetzt durch das über 30-köpfige Teilnehmerfeld, nur die angebotenen Fahr-Prüfungen (Dressur, Ringfahren, Orientierungsfahrt, Kegelparcours) waren etwas dünn besetzt, fanden aber trotzdem statt. Hierüber gibt es aber mehr in einem anderen Artikel.
|
Nach oben springen..
