Tabellen mit CSS formatieren

Daten benutzerfreundlich gestalten

Gute Tabellen sind übersichtlich und schnell lesbar. Im Quiz geht es um die CSS-Eigenschaften, die nötig sind, um dieses Ziel zu erreichen.

 

1. Doppelte Rahmen verhindern

HTML-Tabellen haben die dumme Eigenschaft, dass jede Zelle für sich umrandet wird. Mit welcher CSS-Regel kann ich diesen Standard eliminieren?

Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6

 

2. Genügend padding in Zellen

Warum sollte man bei Tabellenzellen besonders darauf achten, dass die Innenabstände gut gewählt sind?

td, th {
	padding: 6px 10px 6px 10px;
}
 

3. text-align in <td>s

Wie wird Text standardmässig in Tabellen-Zellen horizontal ausgerichtet, solange ich es mit CSS nicht anders bestimme?

 

4. text-align in <th>s

Wie wird Text standardmässig in Kopf-Zellen horizontal ausgerichtet, solange ich es mit CSS nicht anders bestimme?

 

5. text-align für numerische Daten

Hat es Zahlen in Zellen (Geldbeträge, ganze Zahlen, Zeiten, etc.), ist in den meisten Fällen welche horizontale Ausrichtung die beste Wahl?

 

6. Rollover auf Zeilen

Auf Tabellenzeilen kann ein Rollover gelegt werden, um die Benutzerfreundlichkeit zu verbessern. Das Verfahren kennst du vielleicht schon von Rollovers auf Links. Wie heisst die Pseudoklasse?

 

7. even - odd

Was heisst "even and odd" auf deutsch?

 

8. Zebra-Tabellen mit even and odd
🦓

Lange Tabellen kann man einfacher lesen, wenn sie mit Zebra-Streifen angezeigt werden. Wie geht das CSS-Trickli dafür?

 

9. overflow auf deutsch

Wie könnte man overflow im CSS-Kontext am besten auf deutsch übersetzen?

.myClass {
	overflow: hidden;
}
 

10. Die CSS-Eigenschaft overflow

Was bestimmt die Eigenschaft overflow?