⬆

Tabellen

Tabellarische Daten werden mit HTML Tabellen dargestellt. Die Formatierung der Tabellen und Tabelleninhalte geschieht wie immer mit CSS. Außerdem bietet CSS noch die Möglichkeit Blockelementen ein tabellenartiges Verhalten zuzuweisen. Das geschieht mit der Eigenschaft display. Auf ein so verändertes Blockelement kann man, wie auch auf Tabellen, alle CSS Eigenschaften für Tabellen anwenden. Es ist wichtig zu verstehen, dass die so veränderten Blockelemente keine tabellarischen Daten erfassen sollen, sondern dass es lediglich darum geht, dass Blockelemente sich wie Tabellen verhalten. Das kann für das Layout sehr nützlich sein.

Vertikale und horizontale Ausrichtung

Zur Ausrichtung des Inhalts innerhalb einer Tabellenzellen stehen CSS Eigenschaften zur Verfügung. Man findet sie unter dem Thema Texteigenschaften. Hier sind in erster Linie text-align und vertical-align zu nennen.

Tabellen beschriften

caption-side

Mit dem HTML Element caption kann man einer Tabelle eine Überschrift zuweisen. Mit der CSS Eigenschaft caption-side wird die Position der Überschrift definiert.

table {caption-side: bottom;}

so sieht's aus

caption-side
Eigenschaft Wert Bedeutung
Standardwert top
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
caption-side top oben
bottom unten

Rahmen darstellen

border-collapse

Im Beispiel sieht man sofort den Unterschied zwischen den beiden Werten. Bei collapse fallen die Rahmen zusammen und bilden keine Zwischenräume zwischen den einzelnen Tabellenzellen.

table {border-collapse: collapse;}

so sieht's aus

border-collapse
Eigenschaft Wert Bedeutung
Standardwert separate
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
border-collapse collapse Rahmen werden zu einem Rahmen ohne Zwischenräume
separate Zellen einzeln mit Zwischenräumen

Rahmenabstand

border-spacing

Der Abstand zwischen den Zellen wird mit border-spacing festgelegt

table {border-spacing: 5px;}

so sieht's aus

border-spacing
Eigenschaft Wert Bedeutung
Standardwert 0
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
border-spacing Zahlenangabe Zahlenangabe mit Maßeinheit

Leere Tabellenzelle

empty-cells

Einige Browser, zeigen leere Tabellenzellen oft gar nicht an <td></td>. Das sieht nicht schön aus und kann mittels CSS beeinflusst werden.

Achtung! Hier muss die Eigenschaft border-collapse: separate; definiert sein.

table {empty-cells: show;}

so sieht's aus

empty-cells
Eigenschaft Wert Bedeutung
Standardwert show
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
empty-cells show Umrandung wird angezeigt
hide Umrandung wird nicht angezeigt

Tabellenlayout

table-layout

Mit der Eigenschaft table-layout beeinflusst man das Verhalten, in dem Punkte, dass Tabellen ihre Breite automatisch an den Inhalt anpassen, oder dass eine Größe definiert wird und Text sich in die vorgegeben Breite einpasst. Da beim Wert auto der Browser eventuell die gesamte Tabelle vergrößern muss, wird sie erst angezeigt, wenn der vollständige Inhalt der Tabelle geladen ist.

so sieht's aus

table-layout
Eigenschaft Wert Bedeutung
Standardwert auto
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
table-layout auto Wenn der Inhalt nicht die Zelle passt, wird die Zelle vergrößert
fixed Der Inhalt passt sich an oder wenn er nicht passt, wird er abgeschnitten (IE) oder läuft über den Zellenrand hinaus (Opera Firefox).

Weitere Beispiele

Html Seite mit vertikal zentriertem Inhalt

Drop Down Menü mit List O Matic

Tabellen responsive

Tabellen bereiten auf kleinen Bildschirmen Probleme.
Siehe folgenden Blog-Beitrag von Jonas Hellwig auf Kuturbanause Tabellen im responsive Webdesign

Tabelle mit Scrollleisten

Eine Möglichkeit besteht darin, eine Tabelle scrollbar zu machen, indem man einen Container um die Tabelle legt und diesen mit der overflow Eigenschaft Scrollleisten zuzuweist. Die Scrollleisten kann man auch gestalten.

siehe Beispiel

CSS

        .tableContainer {
            width: 100%;
            overflow-y: auto;
            margin: 0 0 1em;
        }
        
        .tableContainer::-webkit-scrollbar {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
        }
        
        .tableContainer::-webkit-scrollbar-thumb {
            border-radius: 8px;
            border: 1px solid #36183d;
            background-color: #e0caca;
        }

HTML

<div class="tableContainer">
  <table>...</table>
</div>

Tabellereihen untereinander

Eine andere Möglichkeit ist, die Tabellenreihen untereinander anzuordnen und die Tabellenzellen horizontal zu positionieren. Das erreicht man indem man tr und td mit float: left versieht.

Die th Elemente werden in der folgenden Lösung beim kleinen Bildschirm ausgeblendet durch thead{display:none;} Stattdessen wird vor den td Elementen ein Element mit dem :before Selektor hinzugefügt, welches seinen Text aus einem data-label bekommt, welches in jeder td-Zelle integriert ist.

Ein data-* Attribut kann man setzen um Informationen in einem Attribut zu speichern. Nach data- kann man jeden beliebigen Bezeichner setzen.
data-label, data-count, data-row...

<td data-label="Stadt">...</td>

td::before{content: attr(data-label);}

siehe Beispiel