Prosta i elegancka stylizacja tabeli

Tabele to najpopularniejsze, obok formularzy i list elementy stron internetowych. Ważne, aby wszystkie fragmenty strony współpracowały ze sobą wzajemnie. Elegancka stylizacja tabel staje się łatwa jeśli zastosujemy się do kilku podstawowych zasad projektowych.

Prostota przy projektowaniu, najczęściej przenosi się na elegancki i oryginalny wygląd. Dane przedstawione w tabelach mają strukturalny charakter, dlatego nadanie im nowoczesnej formy wcale nie wymaga skomplikowanych zabiegów.

Prezentowany przykład zawiera dane w postaci linków, ciągów znakowych i pól wielokrotnego wyboru. Jednak nic nie stoi na przeszkodzie, aby w tabeli pojawiły się dane w innym formacie, jak ikony lub inne pola formularza.

Struktura tabeli

Tabela składa się z podstawowych znaczników, które nie są modyfikowane poprzez dodatkowe atrybuty id oraz class, chyba, że to konieczne. Nagłówek tabeli zawiera elementy th, które w przypadku większych i skomplikowanych tabel grupuje się przez thead. Analogicznie postępuje się w przypadku td poprzez tbody oraz tfoot.

CSS 3 pozwala na odniesienie się do każdego z elementów tabeli poprzez selektory kontekstu. Wszystkie efekty począwszy od dopełnień komórek poprzez kolorowanie wierszy, a skończywszy obramowaniu tabeli działają w nowoczenych przeglądarkach.

Style kaskadowe

Prezentacja

table {
	background: #cde;
	font-family: sans-serif;
	font-size: 12px;
	border: 1px solid #cde;
	padding: 2px;
	border-spacing: 0 1px;
	text-align: left;
}

Dane prezentowane na ekranie zawsze lepiej czyta się, gdy wyświetlane są w postaci czcionki bezszeryfowej. Szerokie obramowanie tabeli tworzy odpowiednie dopełnienie i kolor tła.

tr:nth-child(odd) td {
	background: #fff;
}
tr:nth-child(even) td {
	background: #eee;
}

Kolorowanie wierszy w tabelach nie musi poprawić czytelności danych czy szybkości odnajdywania konkretnych wartości, ale często wygląda lepiej niż jednolite tło.

th {
	background: #cde;
	padding: 5px;
}
td {
	padding: 5px;
}

Odstęp wewnątrz komórek powinien być wystarczający, aby czytelność danych została zachowana.

td:nth-child(5) {
	text-align: center;
}
a {
	color: #47c;
}

Dodatkowo można wyrównać wybrane kolumny poprzez selektor dziecka. Kolor linków określa selektor elementu.

Podsumowanie

Bardziej skomplikowane efekty w przypadku tabel uzyskamy poprzez zastosowanie półprzezroczystych grafik jako tła poszczególnych elementów. Przedstawione wartości stylów są sugerowane, ale również elastyczne.