Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Scrollbare Tabelle mit Kopf

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

Scrollbare Tabelle mit Kopf

Eine andere Möglichkeit, Webseiten mit Tabellen übersichtlicher zu gestalten besteht darin, eine Scroll-Leiste einzubauen.

Spalte 1 Spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 3 spalte 2
zeile 4 spalte 2
zeile 5 spalte 2
zeile 6 spalte 2

Der Trick besteht einfach in einer etwas besseren Ausnutzung des HTML-Codes für Tabellen. Der Quellcode für dieses Beispiel sieht so aus:

<table border="1" style="width: 450px;">
    <thead>
        <tr>
            <th width="150">Spalte 1</th>
            <th width="150">Spalte 2</th>
        </tr>
    </thead>
    <tbody style="overflow: scroll; height: 150px;">
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 3</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 4</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 5</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 6</td>
            <td width="150">spalte 2</td>
        </tr>
    </tbody>
</table>

 

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}

Kategorie: alle Artikel (2) | Diese Website (5) | NPage (2) | Webdesign (2)

Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Ja, man kann. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Neue CSS-Datei für Formularfelder (25.04.2013 07:49:00)

Vor kurzem habe ich festgestellt, dass es bei NPage eine neue CSS-Datei gibt, die automatisch in Webseiten eingebunden wird. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
{/if} Zum Seitenanfang
nPage.de-Seiten: http://melindasminiaturen.npage.de/ | Proud of Halliwell