Seitenpräsentation mit Tabellen

Vorwort

JavaScript-Teil

CCS-Teil

HTML-Teil

Einleitende Worte

Platz ist auf WebSeiten sehr wertvoll.
Leider gibt es immer wieder Situationen, bei denen eine Bildschirmseite nicht ausreicht - egal wie groß der Bildschirm auch ist.
Scrollen ist damit unumgänglich - und wer macht das schon gerne?

Dieses JavaScript nutzt durch verstecken mehrerer Tabellen den Platz effizenter aus als eine lange Seite - scrollen wird u.U. sogar überflüssig.

Das Script kann für Seiten mit viel Text, aber auch nur für die Navigation - eingesetzt werden, wie folgendes Beispiel zeigen soll: Porzellan der Firma Kalk - Köln und Eisenberg (Thüringen).

Mit dem Quellcode dieser Seite lässt sich eine »Rohform« dieser Seite erstellen.

Das JavaScript

Die Cascading-Style-Sheets

	Position in der html-Datei: head-Bereich
<style type="text/css"> <!-- td { font-size : 12px } /* tabsheet-zellenzeile / .content { padding-right : 10px; padding-left : 10px; padding-bottom : 10px; padding-top : 10px; } / tabsheet aktiv / .tab-on { border-right : #cccccc 1px; padding-right : 2px; border-top : #cccccc 1px solid; padding-left : 2px; padding-bottom : 2px; border-left : #cccccc 1px solid; width : 120px; cursor : hand; color : #000000; padding-top : 2px; border-bottom : #cccccc 1px; background-color : #ffffff; } / tabsheet passiv / .tab-off { border-right : #cccccc 1px; padding-right : 2px; border-top : #cccccc 1px solid; padding-left : 2px; padding-bottom : 2px; border-left : #cccccc 1px solid; width : 120px; cursor : hand; color : #666666; padding-top : 2px; border-bottom : #cccccc 1px solid; background-color : #f6f6f6; } / tabsheet versteckt / .tab-none { border-right : #cccccc 1px; padding-right : 2px; border-top : #cccccc 1px; padding-left : 2px; padding-bottom : 2px; border-left : #cccccc 1px solid; padding-top : 2px; border-bottom : #cccccc 1px solid; color : #ffffdd; background-color : transparent; } / content-tabelle / .tab-content { border-right : #cccccc 1px solid; border-top : #cccccc 1px; vertical-align : top; border-left : #cccccc 1px solid; border-bottom : #cccccc 1px solid; background-color : #ffffff; } / content-titelzeile */ .td_heading { border-right : #cccccc 1px; padding-right : 3px; border-top : #cccccc 1px; padding-left : 10px; padding-bottom : 3px; border-left : #cccccc 1px; color : #666666; padding-top : 3px; border-bottom : #cccccc 1px dashed; } //--> </style>

HTML-Teil - die Tabellen

	Position in der html-Datei: body-Bereich
<table summary="" id="tb_content" cellspacing="0" cellpadding="10" width="100%" border="0"> <tbody> <tr> <td class="content" valign="top"> <table summary="" cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="tab-on" id="navcell" onmouseover="switchCell(0)">Tab_1</td> <td class="tab-off" id="navcell" onmouseover="switchCell(1)">Tab_2</td> <td class="tab-off" id="navcell" onmouseover="switchCell(2)">Tab_3</td> <td class="tab-off" id="navcell" onmouseover="switchCell(3)">Tab_4</td> <td class="tab-none">Tab_5</td> </tr> </tbody> </table> <table summary="" class="tab-content" id="tb" cellspacing="5" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="td_heading" valign="top">tabellen-titel_1</td> </tr> <tr> <td valign="top">content_1</td> </tr> </tbody> </table> <table summary="" class="tab-content" id="tb" cellspacing="5" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="td_heading" valign="top">tabellen-titel_2</td> </tr> <tr> <td valign="top">content_2</td> </tr> </tbody> </table> <table summary="" class="tab-content" id="tb" cellspacing="5" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="td_heading" valign="top">tabellen-titel_3</td> </tr> <tr> <td valign="top">content_3</td> </tr> </tbody> </table> <table summary="" class="tab-content" id="tb" cellspacing="5" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="td_heading" valign="top">tabellen-titel_4</td> </tr> <tr> <td valign="top">content_4</td> </tr> </tbody> </table>