Toolbar-Menu
 
Sie sind hier: Start Komponenten
Theme "lightKhaki" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/cdn/bb/css/app.css" -->

<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/bb/css/themes/lightKhaki.css"/>
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Pictures
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

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

    Quelltext
    Quelltext kopieren 
    <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

    Quelltext
    Quelltext kopieren 
    <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

    Quelltext
    Quelltext kopieren 
    <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

    Quelltext
    Quelltext kopieren 
    <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

    Quelltext
    Quelltext kopieren 
    <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

    Quelltext
    Quelltext kopieren 
    <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/js/vendor/jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/app.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.
Seite drucken