5.11 Tabellen

Tabellen werden auf den Seiten der Landesregierung Brandenburg zur geordneten Zusammenfassung eingesetzt. Die Strukturierung wird durch HELLGRAU eingefärbte Rahmenlinien unterstützt. Zur Abgrenzung können Rahmenlinien, Titelzeilen oder Titelspalten in Themenfarbe eingefärbt werden. Tabellen, die über die Seitenbreite hinausgehen, sollten zusätzlich auf einer separaten Seite aufrufbar sein.

Die nachstehende Grafik zeigt eine mögliche Tabellenform mit farbigen Spaltenüberschriften:

Standard-Tabellen

Kommune	Landkreis	Regionalschlüssel	Straße	Postleitzahl
Beeskow	Oder-Spree	120670036036	Berliner Straße 30	15848
Müncheberg	Märkisch-Oderland	120640317317	Rathausstraße 1	15374
Steinhöfel	Oder-Spree	120675706473	Demnitzer Straße 7	15518

<div class="table-scroll">
    <table>
        <thead>
        <tr>
            <th title="Kommune">Kommune</th>
            <th title="Landkreis">Landkreis</th>
            <th title="Gemeindeschlüssel">Gemeindeschlüssel</th>
            <th title="Straße">Straße</th>
            <th title="Postleitzahl">Postleitzahl</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Beeskow</td>
            <td>Oder-Spree</td>
            <td>12 0 67 036</td>
            <td>Berliner Straße 30</td>
            <td>15848</td>
        </tr>
        <tr>
            <td>Müncheberg</td>
            <td>Märkisch-Oderland</td>
            <td>12 0 64 317</td>
            <td>Rathausstraße 1</td>
            <td>15374</td>
        </tr>
        <tr>
            <td>Steinhöfel</td>
            <td>Oder-Spree</td>
            <td>12 0 67 473</td>
            <td>Demnitzer Straße 7</td>
            <td>15518</td>
        </tr>
        </tbody>
    </table>
</div>

Standard-Tabellen mit Überlänge

Kommune	Landkreis	Regionalschlüssel	Straße	Postleitzahl	E-Mail	Internet	Details
Beeskow	Oder-Spree	120670036036	Berliner Straße 30	15848	rathaus@beeskow.de	https://www.beeskow.de	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120670036036-beeskow
Müncheberg	Märkisch-Oderland	120640317317	Rathausstraße 1	15374	rathaus@stadt-muencheberg.de	https://www.stadt-muencheberg.de/	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120640317317-muencheberg
Steinhöfel	Oder-Spree	120675706473	Demnitzer Straße 7	15518	-	https://www.gemeinde-steinhoefel.de	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120675706473-steinhoefel
Königs Wusterhausen	Dahme-Spreewald	120610260260	Schlossstraße 3	15711	stadtverwaltung@stadt-kw.de	https://www.koenigs-wusterhausen.de/	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120610260260-koenigs-wusterhausen
Zeuthen	Dahme-Spreewald	120610572572	Schillerstraße 1	15738	gemeinde@zeuthen.de	https://www.zeuthen.de/	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120610572572-zeuthen

<div class="table-scroll">
    <table>
        <thead>
        <tr>
            <th title="Kommune">Kommune</th>
            <th title="Landkreis">Landkreis</th>
            <th title="Gemeindeschlüssel">Gemeindeschlüssel</th>
            <th title="Straße">Straße</th>
            <th title="Postleitzahl">Postleitzahl</th>
            <th title="E-Mail">E-Mail</th>
            <th title="Internet">Internet</th>
            <th title="Details">Details</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Beeskow</td>
            <td>Oder-Spree</td>
            <td>12 0 67 036</td>
            <td>Berliner Straße 30</td>
            <td>15848</td>
            <td>rathaus@beeskow.de</td>
            <td><a title="Internet: Beeskow" href="http://www.beeskow.de" target="_blank">http://www.beeskow.de</a></td>
            <td><a title="Details: Beeskow" href="http://service.brandenburg.de/de/stadt_beeskow/17067" target="_blank">http://service.brandenburg.de/de/stadt_beeskow/17067</a></td>
        </tr>
        <tr>
            <td>Müncheberg</td>
            <td>Märkisch-Oderland</td>
            <td>12 0 64 317</td>
            <td>Rathausstraße 1</td>
            <td>15374</td>
            <td>rathaus@stadt-muencheberg.de</td>
            <td><a title="Internet: Müncheberg" href="http://www.stadt-muencheberg.de/" target="_blank">http://www.stadt-muencheberg.de/</a></td>
            <td><a title="Details: Müncheberg" href="http://service.brandenburg.de/de/stadt_muencheberg/17038" target="_blank">http://service.brandenburg.de/de/stadt_muencheberg/17038</a></td>
        </tr>
        <tr>
            <td>Steinhöfel</td>
            <td>Oder-Spree</td>
            <td>12 0 67 473</td>
            <td>Demnitzer Straße 7</td>
            <td>15518</td>
            <td>info@gemeinde-steinhoefel.com</td>
            <td><a title="Internet: Steinhöfel" href="http://www.gemeinde-steinhoefel.de/" target="_blank">http://www.gemeinde-steinhoefel.de/</a></td>
            <td><a title="Details: Steinhöfel" href="http://service.brandenburg.de/de/gemeinde_steinhoefel/17075" target="_blank">http://service.brandenburg.de/de/gemeinde_steinhoefel/17075</a></td>
        </tr>
        <tr>
            <td>Königs Wusterhausen</td>
            <td>Dahme-Spreewald</td>
            <td>12 0 61 260</td>
            <td>Schlossstraße 3</td>
            <td>15711</td>
            <td>stadtverwaltung@stadt-kw.de</td>
            <td><a title="Internet: Königs Wusterhausen" href="http://www.koenigs-wusterhausen.de/" target="_blank">http://www.koenigs-wusterhausen.de/</a></td>
            <td><a title="Details: Königs Wusterhausen" href="http://service.brandenburg.de/de/stadt_koenigs_wusterhausen/17003" target="_blank">http://service.brandenburg.de/de/stadt_koenigs_wusterhausen/17003</a></td>
        </tr>
        <tr>
            <td>Zeuthen</td>
            <td>Dahme-Spreewald</td>
            <td>12 0 61 572</td>
            <td>Schillerstraße 1</td>
            <td>15738</td>
            <td>gemeinde@zeuthen.de</td>
            <td><a title="Internet: Zeuthen" href="http://www.zeuthen.de/" target="_blank">http://www.zeuthen.de/</a></td>
            <td><a title="Details: Zeuthen" href="http://service.brandenburg.de/de/gemeinde_zeuthen/17011" target="_blank">http://service.brandenburg.de/de/gemeinde_zeuthen/17011</a></td>
        </tr>
        </tbody>
    </table>
</div>

Standard-Tabelle mit Streifen

Kommune	Landkreis	Straße	Postleitzahl
Beeskow	Oder-Spree	Berliner Straße 30	15848
Müncheberg	Märkisch-Oderland	Rathausstraße 1	15374
Steinhöfel	Oder-Spree	Demnitzer Straße 7	15518
Königs Wusterhausen	Dahme-Spreewald	Schlossstraße 3	15711
Zeuthen	Dahme-Spreewald	Schillerstraße 1	15738

<table class="bb-table-stripes">
    <thead>
    <tr>
        <th title="Kommune">Kommune</th>
        <th title="Landkreis">Landkreis</th>
        <th title="Gemeindeschlüssel">Gemeindeschlüssel</th>
        <th title="Straße">Straße</th>
        <th title="Postleitzahl">Postleitzahl</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Beeskow</td>
        <td>Oder-Spree</td>
        <td>12 0 67 036</td>
        <td>Berliner Straße 30</td>
        <td>15848</td>
    </tr>
    <tr>
        <td>Müncheberg</td>
        <td>Märkisch-Oderland</td>
        <td>12 0 64 317</td>
        <td>Rathausstraße 1</td>
        <td>15374</td>
    </tr>
    <tr>
        <td>Steinhöfel</td>
        <td>Oder-Spree</td>
        <td>12 0 67 473</td>
        <td>Demnitzer Straße 7</td>
        <td>15518</td>
    </tr>
    <tr>
        <td>Königs Wusterhausen</td>
        <td>Dahme-Spreewald</td>
        <td>12 0 61 260</td>
        <td>Schlossstraße 3</td>
        <td>15711</td>
    </tr>
    <tr>
        <td>Zeuthen</td>
        <td>Dahme-Spreewald</td>
        <td>12 0 61 572</td>
        <td>Schillerstraße 1</td>
        <td>15738</td>
    </tr>
    </tbody>
</table>

Standard-Hover-Tabelle

Kommune	Landkreis	Straße	Postleitzahl
Beeskow	Oder-Spree	Berliner Straße 30	15848
Müncheberg	Märkisch-Oderland	Rathausstraße 1	15374
Steinhöfel	Oder-Spree	Demnitzer Straße 7	15518
Königs Wusterhausen	Dahme-Spreewald	Schlossstraße 3	15711
Zeuthen	Dahme-Spreewald	Schillerstraße 1	15738

<div class="table-scroll">
    <table class="hover bb-table-stripes bb-table-stretch">
        <thead>
        <tr>
            <th title="Kommune">Kommune</th>
            <th title="Landkreis">Landkreis</th>
            <th title="Gemeindeschlüssel">Gemeindeschlüssel</th>
            <th title="Straße">Straße</th>
            <th title="Postleitzahl">Postleitzahl</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Beeskow</td>
            <td>Oder-Spree</td>
            <td>12 0 67 036</td>
            <td>Berliner Straße 30</td>
            <td>15848</td>
        </tr>
        <tr>
            <td>Müncheberg</td>
            <td>Märkisch-Oderland</td>
            <td>12 0 64 317</td>
            <td>Rathausstraße 1</td>
            <td>15374</td>
        </tr>
        <tr>
            <td>Steinhöfel</td>
            <td>Oder-Spree</td>
            <td>12 0 67 473</td>
            <td>Demnitzer Straße 7</td>
            <td>15518</td>
        </tr>
        <tr>
            <td>Königs Wusterhausen</td>
            <td>Dahme-Spreewald</td>
            <td>12 0 61 260</td>
            <td>Schlossstraße 3</td>
            <td>15711</td>
        </tr>
        <tr>
            <td>Zeuthen</td>
            <td>Dahme-Spreewald</td>
            <td>12 0 61 572</td>
            <td>Schillerstraße 1</td>
            <td>15738</td>
        </tr>
        </tbody>
    </table>
</div>

Atypische, komplexe Tabelle mit Kommunen

	Kommune	Landkreis	Straße	Postleitzahl
1	Beeskow	Oder-Spree	Berliner Straße 30	15848
3	Müncheberg	Märkisch-Oderland	Rathausstraße 1	15374
4	Steinhöfel	Oder-Spree	Demnitzer Straße 7	15518

<div class="table-scroll">
    <table class="hover">
        <tr>
            <td></td>
            <th scope="col" title="Spalte Kommune">Kommune</th>
            <th scope="col" title="Spalte Landkreis">Landkreis</th>
            <th scope="col" title="Spalte Gemeindeschlüssel">Gemeindeschlüssel</th>
            <th scope="col" title="Spalte Straße">Straße</th>
            <th scope="col" title="Spalte Postleitzahl">Postleitzahl</th>
        </tr>
        <tr>
            <td>1</td>
            <th scope="row" title="Datenzeile zu Beeskow">Beeskow</th>
            <td>Oder-Spree</td>
            <td>12 0 67 036</td>
            <td>Berliner Straße 30</td>
            <td>15848</td>
        </tr>
        <tr>
            <td>3</td>
            <th scope="row" title="Datenzeile zu Müncheberg">Müncheberg</th>
            <td>Märkisch-Oderland</td>
            <td>12 0 64 317</td>
            <td>Rathausstraße 1</td>
            <td>15374</td>
        </tr>
        <tr>
            <td>4</td>
            <th scope="row" title="Datenzeile zu Steinhöfel">Steinhöfel</th>
            <td>Oder-Spree</td>
            <td>12 0 67 473</td>
            <td>Demnitzer Straße 7</td>
            <td>15518</td>
        </tr>
    </table>
</div>

Standard-Stack-Tabellen

Kommune	Landkreis	Straße	Postleitzahl	E-Mail	Internet	Details
Beeskow	Oder-Spree	Berliner Straße 30	15848	rathaus@beeskow.de	http://www.beeskow.de	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120670036036-beeskow
Müncheberg	Märkisch-Oderland	Rathausstraße 1	15374	rathaus@stadt-muencheberg.de	http://www.stadt-muencheberg.de/	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120640317317-muencheberg
Steinhöfel	Oder-Spree	Demnitzer Straße 7	15518	-	http://www.gemeinde-steinhoefel.de/	https://service.brandenburg.de/service/de/adressen/kommunalverzeichnis/ansicht/~120675706473-steinhoefel

<div class="table-scroll">
    <table class="stack hover">
        <thead>
        <tr>
            <th title="Kommune">Kommune</th>
            <th title="Landkreis">Landkreis</th>
            <th title="Gemeindeschlüssel">Gemeindeschlüssel</th>
            <th title="Straße">Straße</th>
            <th title="Postleitzahl">Postleitzahl</th>
            <th title="E-Mail">E-Mail</th>
            <th title="Internet">Internet</th>
            <th title="Details">Details</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Beeskow</td>
            <td>Oder-Spree</td>
            <td>12 0 67 036</td>
            <td>Berliner Straße 30</td>
            <td>15848</td>
            <td>rathaus@beeskow.de</td>
            <td><a title="Internet Beeskow" href="http://www.beeskow.de" target="_blank">http://www.beeskow.de</a></td>
            <td><a title="Details Beeskow" href="http://service.brandenburg.de/de/stadt_beeskow/17067" target="_blank">http://service.brandenburg.de/de/stadt_beeskow/17067</a></td>
        </tr>
        <tr>
            <td>Müncheberg</td>
            <td>Märkisch-Oderland</td>
            <td>12 0 64 317</td>
            <td>Rathausstraße 1</td>
            <td>15374</td>
            <td>rathaus@stadt-muencheberg.de</td>
            <td><a title="Internet Müncheberg" href="http://www.stadt-muencheberg.de/" target="_blank">http://www.stadt-muencheberg.de/</a></td>
            <td><a title="Details Müncheberg" href="http://service.brandenburg.de/de/stadt_muencheberg/17038" target="_blank">http://service.brandenburg.de/de/stadt_muencheberg/17038</a></td>
        </tr>
        <tr>
            <td>Steinhöfel</td>
            <td>Oder-Spree</td>
            <td>12 0 67 473</td>
            <td>Demnitzer Straße 7</td>
            <td>15518</td>
            <td>info@gemeinde-steinhoefel.com</td>
            <td><a title="Internet Steinhöfel" href="http://www.gemeinde-steinhoefel.de/" target="_blank">http://www.gemeinde-steinhoefel.de/</a></td>
            <td><a title="Details Steinhöfel" href="http://service.brandenburg.de/de/gemeinde_steinhoefel/17075" target="_blank">http://service.brandenburg.de/de/gemeinde_steinhoefel/17075</a></td>
        </tr>
        </tbody>
    </table>
</div>

Benötigtes Javascript

<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/finalApp.js"></script>

Aufbau

Der technische Tabellenaufbau erfolgt nach validem HTML.

Spezifische Anforderungen

keine Beschränkungen

Barrierefreiheit

Tabelleninhalte müssen auf allen Geräten lesbar bleiben. Das simple Skalieren oder Umbrechen der Texte ist folglich nur bedingt sinnvoll.

Aktionsverhalten

keine Beschränkungen

Responsive Design

Auf kleinen Endgeräten ist das Anteasern eines Teilbereichs empfehlenswert. D.h., dass die Tabelle in voller Auflösung (Text ist gut lesbar) auf dem zur Verfügung stehenden Anzeigebereich beginnt und am rechten Rand abgeschnitten wird. Dies suggeriert das Vorhandensein weiterer Inhalte im rechten Bereich, sodass die Nutzerinnen und Nutzer erfahrungsgemäß anfangen, die Tabelle nach links zu wischen. Dieses Verhalten wird bereits auf vielen mobilen Endgeräten implementiert und nativ auch unterstützt.
Das Einbetten der Tabelle ist in eigenständige, dafür geeignete Container möglich, um bspw. das Hin- und Herwischen (Pinch) auf Smartphones oder Tablets zu ermöglichen.
Tabellen können alternativ auf separaten Seiten in voller Breite und Höhe angezeigt werden.

Auf kleinen Endgeräten ist das Anteasern eines Teilbereichs empfehlenswert. D.h., dass die Tabelle in voller Auflösung (Text ist gut lesbar) auf dem zur Verfügung stehenden Anzeigebereich beginnt und am rechten Rand abgeschnitten wird. Dies suggeriert das Vorhandensein weiterer Inhalte im rechten Bereich, sodass die Nutzerinnen und Nutzer erfahrungsgemäß anfangen, die Tabelle nach links zu wischen. Dieses Verhalten wird bereits auf vielen mobilen Endgeräten implementiert und nativ auch unterstützt.
Das Einbetten der Tabelle ist in eigenständige, dafür geeignete Container möglich, um bspw. das Hin- und Herwischen (Pinch) auf Smartphones oder Tablets zu ermöglichen.
Tabellen können alternativ auf separaten Seiten in voller Breite und Höhe angezeigt werden.

Seite drucken