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

{$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}
Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert und erweitert. Anhand eines Beispiels kann man den Einbau einer sortirbaren tabelle bei nPage künftig besser nachvollziehen. Außerdem wurde ein Downloadlink zur JavaScript-Datei bereit gestellt. Das kleine Tutorial findet man auf der Seite Tabelle sortieren.


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
{/if} Zum Seitenanfang