CSS-Listen und -Tabellen

CSS ermöglicht es, das Erscheinungsbild von Listen und Tabellen vollständig anzupassen. Dazu gehören die Gestaltung der Aufzählungszeichen, die Art der Nummerierung sowie die Ränder, Farben und Größen von Tabellen.

Formatierung von Listen

Bei Listen kann mit der Eigenschaft <list-style-type> das Aufzählungszeichen bestimmt werden, z. B. Kreis, Quadrat, römische Zahl oder Buchstabe. Ungeordnete und geordnete Listen können unterschiedliche Stile haben.

Die folgenden Beispiele zeigen, wie Listen mit verschiedenen Aufzählungszeichen oder Nummerierungsstilen dargestellt werden.

Formatierung von Tabellen

Zur Gestaltung von Tabellen verwenden wir häufig die Eigenschaften border, padding und background. Mit der Einstellung <border-collapse> können wir erreichen, dass die Ränder benachbarter Zellen zusammenfallen.

Der folgende Code zeigt eine einfache Tabelle mit einer Kopfzeile und zwei Datenzeilen, formatiert mit grundlegenden CSS-Regeln.

Tipps für Listen und Tabellen

Listen und Tabellen machen Inhalte übersichtlich und leicht lesbar, aber übermäßige Formatierungen können störend sein.

• Achte immer auf die Lesbarkeit, z. B. können Hervorhebungen in Tabellenzeilen hilfreich sein.
• Verwende nicht zu viele verschiedene Listenstile auf einer Seite, da dies visuell chaotisch wirkt.
• Damit das Design responsiv bleibt, sollten Tabellen auf kleineren Bildschirmen scrollbar sein.