HTML5 & CSS3

Tabelka „Zebra” – przy użyciu tylko CSS

Tzw. zebra table to dość prosty zabieg prowadzący do upiększenia standardowej tabeli. Jednocześnie może doprowadzić do tego, że wielorzędowe tabelki stają się bardziej czytelne dla użytkowników. Pewnie większość z Was kiedyś widziała tak stylowaną tabelę. Co stoi za jej wyglądem? Dzięki jQuery można dodawać i usuwać klasy co nie raz stało się zapleczem dla kreatywnych pomysłów. Tak też było z „pasiastymi” tabelkami. Dzięki przygotowaniu odpowiednich klas w arkuszu stylów, za pomocą skryptu przydzielano je do odpowiednich rzędów tabelki. Takie rozwiązanie nie wymagało ręcznego uzupełniania kodu html a dodatkowo kolorowa tabelka rosła wraz z treścią dzięki czemu ponowna ingerencja nie była potrzebna. Jednak dzięki CSS3 w bardzo prosty sposób możemy stworzyć sobie taką tabelkę jedynie z użyciem naszego arkusza stylów.

Cały zabieg jest raczej prosty i tak na prawdę jest tylko jeden haczyk, na który trzeba uważać.

Rozpoczynamy od stworzenia tabelki w HTML:

<table class="example">

<thead>

<tr>
<th>Styczeń</th>
<th>Luty</th>
<th>Marzec</th>
<th>Kwiecień</th>
</tr>

</thead>

<tbody>

<tr>
<td>125</td>
<td>544</td>
<td>4577</td>
<td>5775</td>
</tr>

<tr>
<td>586</td>
<td>444</td>
<td>114</td>
<td>7577</td>
</tr>

<tr>
<td>4754</td>
<td>444</td>
<td>577</td>
<td>7575</td>
</tr>

<tr>
<td>125</td>
<td>544</td>
<td>4577</td>
<td>5775</td>
</tr>

<tr>
<td>586</td>
<td>444</td>
<td>114</td>
<td>7577</td>
</tr>

<tr>
<td>4754</td>
<td>444</td>
<td>577</td>
<td>7575</td>
</tr>

</tbody>

</table>

Wydaje się trochę bardziej rozbudowana niż zwykle, prawda? Wyjaśnimy to za chwilkę.

Kiedy mamy już przygotowaną tabelkę możemy przystąpić do tworzenia kodu CSS. Jak widać nasza tabela została oznaczona klasą „example”.

.example tbody tr:nth-child(odd) {background: white;}
.example tbody tr:nth-child(even) {background:red;}

To co daje nam powyższy kod CSS to po prostu stylowanie każdego nieparzystego rzędu białym tłem a parzystego czerwonym (patriotyczna tabelka :). Dzięki obecnie dostępnym selektorom CSS jesteśmy więc w stanie osiągnąć efekt tabelki w stylu zebry i robimy to zaledwie dzięki dwóm linijkom kodu!

Dla krótkiego wyjaśnienia dodam jeszcze, że wyznaczyliśmy tutaj automatyczny sposób stylowania, w którym każdemu parzystemu i nieparzystemu znacznikowi <tr>  przypisaliśmy odpowiadający styl. Udało się to zrobić ponieważ wybraliśmy je z kodu HTML na podstawie określenia którym są dzieckiem dla swojego rodzica.

Teraz wyjaśniam „haczyk”. Jak już pewnie zauważyliście kod HTML naszej tabeli wyglądał conajmniej specyficznie. Rzeczywiście nie często spotyka się tak dokładnie rozpisane tabele. Jednak nam było to potrzebne ponieważ nie chcielismy aby pierwszy rząd <tr>  został ostylowany kolorem. Rząd ten zawiera znaczniki <th>  będące nagłówkami, które to najczęściej wyróżnia się spośród reszty tabeli dla zachowania przejrzystości.

Czy w takim razie jest sposób aby do „zwykłej” tabelki dodać podobne stylowanie w arkuszu stylów? Oczywiście. Spójrzmy na poniższy kod HTML:

<table class="example2">

<tr>
<th>Styczeń</th>
<th>Luty</th>
<th>Marzec</th>
<th>Kwiecień</th>
</tr>

<tr>
<td>125</td>
<td>544</td>
<td>4577</td>
<td>5775</td>
</tr>

<tr>
<td>586</td>
<td>444</td>
<td>114</td>
<td>7577</td>
</tr>

<tr>
<td>4754</td>
<td>444</td>
<td>577</td>
<td>7575</td>
</tr>

<tr>
<td>125</td>
<td>544</td>
<td>4577</td>
<td>5775</td>
</tr>

<tr>
<td>586</td>
<td>444</td>
<td>114</td>
<td>7577</td>
</tr>

<tr>
<td>4754</td>
<td>444</td>
<td>577</td>
<td>7575</td>
</tr>

</table>

Powyższa tabelka wygląda znajomo prawda? Dokładnie jest to ta sama tabela, którą używaliśmy w pierwszym przykładzie. Różnica zawiera się głównie w kodzie HTML a mówiąc konkretnie brakuje tutaj widzianych poprzednio elementów <tbody>  i <thead> .

Teraz CSS:

.example2 tr:first-of-type {background:none !important;}
.example2 tr:nth-child(odd) {background:red ;} /*trzeba zmienić kolejnosć*/
.example2 tr:nth-child(even) {background:white;}

Kod naszego arkusza stylów nie zmienił się znacząco. Podstawową róznicą jest pojawienie się nowego wiersza. Dzięki niemu wybieramy pierwszy element danego typu wewnątrz rodzica jakim jest klasa „example2” (a więc nasza tabelka ponieważ ta klasa została do niej przydzielona). Wpisując background:none !important;   w sposób ostateczny wymuszamy na przeglądarce aby pozbawiła pierwszy rząd tabelki tła. Efekt wizualny jest identyczny jak w przypadku pierwszego przykładu. Jedna uwaga – ponieważ w tym przypadku pierwszy element <tr>  tak na prawdę wchodzi w zakres naszego stylowania, lecz my wymuszamy na nim inny styl, musimy zmienić kolejność nadawania tła czerwonego i białego aby uzyskać efekt identyczny z pierwszym przykładem.

Sprawa dość prost jak widać. Głównym celem tego artykułu było pokazanie, że w naprawdę prosty sposób można osiągać całkiem ciekawe efekty a adresuję go do osób rozpoczynających swoją przygodę z projektowaniem stron www. Do jego napisania zachęciła mnie zaś wczorajsza rozmowa z pewnym „webdesignerem”, który lubił rozwiązywać najprostsze problemy „na około”.

Pobierz DEMO tego poradnika >> ZEBRA w CSS3

PS: Dzięki temu artykułowi wygrałem zakład :)

komentarzy 5

  • Awatar
    Rafał

    3 października 2012 14:16

    parzyste i nieparzyste pisze się przez „rz”. Wskazówka co do tabeli mała a jakźe użyteczna.

    Odpowiedz
    • Awatar
      Mr.Mr

      3 października 2012 15:40

      a dziękuje, czasami najbardziej banalne rzeczy okazują się najbardziej przydatne

      a jeśli chodzi o literówki to przeczytałem cały artykuł jeszcze raz i się nie doszukałem błędów w tych słowach – chyba że coś mi umknęło :)

      Odpowiedz
      • Awatar
        Michał Kortas

        3 października 2012 17:21

        zdążyłem je poprawić ;D Pozdrawiam!

        Odpowiedz
      • Awatar
        Mr.Mr

        3 października 2012 22:39

        Korekta działa szybko!

        Dzięki i przepraszam za wpadkę ;)

        Odpowiedz
  • Awatar
    emil

    16 kwietnia 2013 22:56

    Ha, jakie to proste a człowiek czasami kombinuje przy najprostszych rzeczach.

    Odpowiedz

Zostaw odpowiedź