Tabele to jedne z najpopularniejszych elementów jakie występują na stronach internetowych. Rozbudowana struktura tabel pozwala na osiągnięcie wspaniałych efektów poprzez zastosowanie stylów kaskadowych.
Przykłady stylizacji tabel zostały w 2006 roku zebrane przez niezawodny Smashing Magazine. Czas w sieci upływa bardzo szybko, wiele z tych przykładów, jeśli nie wszystkie to przykłady przestarzałe. Jednak ten sam Smashing Magazine w nowszym artykule prezentuje naprawdę atrakcyjne przykłady. Niestety wygląd to nie wszystko.
Problem
Wielokrotnie zdarza się, że za ciekawym wyglądem tabeli kryje się nadmierna liczba klas, które dotyczą poszczególnych elementów. Podstawowa struktura tabeli składa się z trzech znaczników <table>, <tr> oraz <td>, które tworzą odpowiedni element tabeli, wiersze i poszczególne komórki.
Taka struktura nie pozwala na zbyt wiele, ponieważ odniesienie się do elementów poprzez selektory kontekstu jest wręcz niemożliwa. Jedyne dostępne rozwiązanie to wykorzystanie atrybutów <class> i selektorów klas.
Kolorowanie wierszy i kolumn wymaga użycia atrybutu <class> dla każdej komórki. Kolorowanie samych wierszy uzyskamy poprzez atrybuty<class> dla poszczególnych znaczników <tr>. Poniższe style określają kolor tła dla nieparzystego i parzystego wiersza oraz nieparzystej i parzystej kolumny.
.odd-row {
background: #eee;
}
.even-row {
background: #ccc;
}
.odd-column {
background: #fcc;
}
.even-column {
background: #f44;
}Zamierzony efekt zostanie osiągnięty, ale kod naszej tabeli stanie się mniej czytelny, zarówno dla wyszukiwarek, jak i dla ludzie. Istnieje dobra alternatywa dla powyższego rozwiązania.
Rozwiązanie pośrednie
Konieczne zmiany dotyczą kodu tabeli. Struktura tabeli udostępnia elementy grupujące wiersze oraz kolumny. Znaczniki <thead>, <tbody> oraz <tfoot> grupują odpowiednio wiersze nagłówka, danych i stopki.
Analogiczne przeznaczenie ma znacznik <colgroup>, który obejmuje poszczególne kolumny tabeli, zdefiniowane przez znaczniki <col>.
Ważne jest zrozumienie kolejności wyświetlania warstw, które tworzą strukturę tabeli. Szczegółowy artykuł na ten temat napisał Roger Johansson.
Zmodyfikowana struktura pozwala na użycie analogicznych stylów w arkuszu, jednak zamiast selektorów klasy korzystamy z selektorów kontekstu.
Nowoczesne podejście
Selektory potomka oferowane przez CSS3 umożliwiają jeszcze dokładniejsze odwołanie się do elementów w strukturze dokumentu. Niestety Internet Explorer nie obsługuje selektora potomka, co jest sporym mankamentem tego rozwiązania.
col:nth-child(odd) {
background: #faa;
}
col:nth-child(even) {
background: #f44;
}
tbody tr:nth-child(odd) {
background: transparent url(img/grey-10-transparent.png) 0 0 repeat;
}
tbody tr:nth-child(even) {
background: transparent url(img/grey-50-transparent.png) 0 0 repeat;
}Właściwe dobranie kolorów tła oraz obrazów pozwala na uzyskanie właściwego kolorowania wierszy i kolumn. Wygląd tabeli jest dokładnie taki, jak oczekiwaliśmy. Dodatkowa zaleta tego podejścia to struktura tabeli wolna od zbędnych atrybutów <class>.
Podsumowanie
Przedstawione przykłady różnią się sposobem w jaki uzyskano efekt końcowy. Czytelniejsza struktura i lżejszy kod to wielka zaleta. Podobnych rozwiązań istnieje wiele, jednak nie stosuje się ich powszechnie z powodu braku wsparcia po stronie Internet Explorera.