Sie sind hier: Start Komponenten

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

    Beispiel
    Kommune Landkreis Gemeindeschlüssel Straße Postleitzahl
    Beeskow Oder-Spree 12 0 67 036 Berliner Straße 30 15848
    Müncheberg Märkisch-Oderland 12 0 64 317 Rathausstraße 1 15374
    Steinhöfel Oder-Spree 12 0 67 473 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

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

    <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

    Beispiel
    Kommune Landkreis Gemeindeschlüssel Straße Postleitzahl
    Beeskow Oder-Spree 12 0 67 036 Berliner Straße 30 15848
    Müncheberg Märkisch-Oderland 12 0 64 317 Rathausstraße 1 15374
    Steinhöfel Oder-Spree 12 0 67 473 Demnitzer Straße 7 15518
    Königs Wusterhausen Dahme-Spreewald 12 0 61 260 Schlossstraße 3 15711
    Zeuthen Dahme-Spreewald 12 0 61 572 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

    Beispiel
    Kommune Landkreis Gemeindeschlüssel Straße Postleitzahl
    Beeskow Oder-Spree 12 0 67 036 Berliner Straße 30 15848
    Müncheberg Oder-Spree 12 0 64 317 Rathausstraße 1 15374
    Steinhöfel Oder-Spree 12 0 67 473 Demnitzer Straße 7 15518
    Königs Wusterhausen Dahme-Spreewald 12 0 61 260 Schlossstraße 3 15711
    Zeuthen Dahme-Spreewald 12 0 61 572 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

    Beispiel
    Kommune Landkreis Gemeindeschlüssel Straße Postleitzahl
    1 Beeskow Oder-Spree 12 0 67 036 Berliner Straße 30 15848
    3 Müncheberg Märkisch-Oderland 12 0 64 317 Rathausstraße 1 15374
    4 Steinhöfel Oder-Spree 12 0 67 473 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

    Beispiel
    Kommune Landkreis Gemeindeschlüssel Straße Postleitzahl E-Mail Internet Details
    Beeskow Oder-Spree 12 0 67 036 Berliner Straße 30 15848 rathaus@beeskow.de http://www.beeskow.de http://service.brandenburg.de/de/stadt_beeskow/17067
    Müncheberg Märkisch-Oderland 12 0 64 317 Rathausstraße 1 15374 rathaus@stadt-muencheberg.de http://www.stadt-muencheberg.de/ http://service.brandenburg.de/de/stadt_muencheberg/17038
    Steinhöfel Oder-Spree 12 0 67 473 Demnitzer Straße 7 15518 info@gemeinde-steinhoefel.com http://www.gemeinde-steinhoefel.de/ http://service.brandenburg.de/de/gemeinde_steinhoefel/17075

    <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_3/js/vendors/2jquery.min.js"></script>
     <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/5foundation.min.js"></script>
     <script type="text/javascript" src="style.brandenburg.de/2_3/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.