Tabele i style kaskadowe

Tabela jest jednym z podstawowych elementów HTML, a przeznaczeniem tabeli jest prezentacja danych tebelarycznych. Przed laty dzięki swoim właściwościom tabele były wykorzystywane na wiele różnych, niekoniecznie właściwych sposobów. Obecne technologie pozwalają na zmienienie wyglądu tabeli bardzo prosto i szybko, jednocześnie zachowując minimalną ilość znaczników, zamiast wiele klas.

Uzyskanie takich efektów umożliwia CSS3, który jest poprawnie obsługiwany przez nowoczesne przeglądarki. Trudno mówić o komercyjnym zastosowaniu takiego rozwiązania, kiedy Internet Explorer 8 odmawia poprawnej interpretacji wielu selektorów CSS3, w tym bardzo użytecznych selektorów potomka. Jednak praktycznie zapoznanie się z nowymi możliwościami CSS3, pozwoli na ich stosowanie chociażby w niekomercyjnych projektach lub własnych zastosowaniach.

Wprowadzenie

Pierwszym krokiem jest stworzenie struktury tabeli. Danymi źródłowymi były wartości indeksów na GPW, zaczerpnięte z serwisu finansowego Wirtualnej Polski. Jakie było moje zdziwienie, gdy kod dwukolorowej tabeli z kilkowa wierszami zawierał ponad 3000 znaków. Jednak takie są skutki formatowania danych w kodzie HTML, a także błędne wykorzystanie dostępnych technologii.

Minimalna struktura tabeli to znaczniki <table>, <tr> oraz <td>. Elementy te odpowiadają za tworzenie całej tabeli, kolejnych wierszy i poszczególnych komórek. W dalszej kolejności możemy dołączyć <thead>, <tbody>, a także <tfoot>, które dzielą całość tabeli na poszczególne sekcje: nagłówek, zawartość oraz stopkę. Wielu programistów zapomina o opisie tabeli, który zamieszczamy w tagu <caption>. Szczegółowe informacje na temat struktury tabeli w XHTML przedstawia specyfikacja na stronie W3C.

Poniżej został przedstwiony skrócony kod tabeli, jaka była użyta w tym artykule.

<table>
    <caption>Indeksy (WIG20 bez opóźnień)</caption>
    <thead>
        <tr>
            <th rowspan="2">czas</th>
            <th rowspan="2">nazwa</th>
            <th colspan="2">wartość [pkt]</th>
            <th colspan="2">zmiana</th>
            <th colspan="3">wartość [pkt]</th>
        </tr>
        <tr>
            <th>bieżąca</th>
            <th>odniesienia</th>
            <th>[pkt]</th>
            <th>[%]</th>
            <th>otwarcia</th>
            <th>min</th>
            <th>max</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>16:40</td>
            <td>WIG20</td>
            <td>1 810,38</td>
            <td>1 810,97</td>
            <td>-0,59</td>
            <td>-0,03</td>
            <td>1 824,07</td>
            <td>1 803,29</td>
            <td>1 837,98</td>
        </tr>
        ...
    </tbody>
</table>

Najważniejsza zaleta tabeli to czytelność danych, które są grupowane wierszami, kolumnami lub wierszami i kolumnami. Niestety zbyt małe odstępy między komórkami niekorzystnie wpływają na szukanie danych oraz ich porównywanie, co przedstawia pierwszy przykład.

Wersja podstawowa

Selektory potomka dostępne w CSS3 odnoszą się do odpowiednich elementów potomnych danego rodzica. Tabela to powtarzający się zbiór określonych znaczników, a zatem idealnie nadaje się do zademonstrowania wspomnianych selektorów strukturalnych.

Najpierw zajmiemy się ustawieniem podstawowych właściwości dla naszej tabeli, jak tło, odstępy rozmiar czcionki dla wszystkich komórek.

table {
    background: #aaa;
    font-family: sans-serif;
    font-size: 12px;
    border-spacing: 1px;    
}

Dotychczasowym sposobem na uzyskanie kolorowania wierszy w tabelach było stosowanie atrybutu class dla elementu <tr>. jeszcze trudniejsze było kolorowanie kolumn, które wymagało takiego zabiegu przy każdej komórce <td>. Jednak CSS3 pozwala na szybkie odnalezienie dowolnego elementu w strukurze DOM, pod warunkiem, że znamy jego rodzica.

Odnalezienie nieparzystych wierszy tabeli i ustawienie koloru tła umożliwia następujący selektor tr:nth-child(2n+1). Możliwy jest, także bardziej ludzki zapis, czyli tr:nth-child(odd).

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

Analogicznie postępujemy w przypadku parzystych wierszy, do których zastosujemy selektor tr:nth-child(2n) lub tr:nth-child(even).

table tr:nth-child(even) td {
    background: #ccc;
}

Kolejne reguły ustawiają kolor tła nagłówka, odstępy kolor czcionki. Informacje przedstawione w całej tabeli zostały wyrównane do prawej, pownieważ większość z kolumn zawiera dane liczbowe. Dwie pierwsze kolumny zostały wyrównane do lewej, dzięki selektorom potomka ustawionym dla komórek td:nth-child(1) i td:nth-child(2).

table th {
    background: #000;
    padding: 5px 10px;
    color: #fff;
}
table td {
    padding: 3px 5px;
    text-align: right;
}
td:nth-child(1),
td:nth-child(2) {
    text-align: left;
}

Kilkanaście linijek kodu CSS zmienia znacząco wygląd naszej tabeli, co pokazuje kolejny przykład. To nie koniec możliwości jakie oferuje CSS w przypadku stylowania tabel.

Możliwe jest ustawienie określonych właściwości dla poszczególnych kolumn, tak jak to miało miejsce w przypadku wyrównania zawartości pierwszej i drugiej kolumny. Bardzo przydatny jest opis tabeli umieszczony w znaczniku <caption>, który bez przeszkód modyfikujemy w stylach kaskadowych.

Jeśli szerokość naszej tabeli jest zbyt mała i chcemy zwiększyć jej rozmiar to z pomocą przychodzą następujące reguły:

table {
    width: 100%;
    max-width: 1024px;
}

Dzięki tym właściowościom nasza tabela dostosuje się do szerokości strony lub elementu, w którym jest umieszczona, nie przekraczając przy tym 1024 pikseli. W przypadku osadzenia tabeli w elemencie o zadanej szerokości, druga właściowość jest zbędna.

Podsumowanie

Dalsze możliwości stylizacji przykładowej tabeli są równie łatwe, dzięki zastosowaniu nowych selektorów. Wszystko zależy od naszych potrzeb i wyobraźni. Przeglądarki, które obsługują selektory CSS3 to Firefox 3.1+, Opera 9+, Safari 3+ oraz Chrome. Istnieje częściowe wsparcie dla wymienionych selektorów w przeglądarkach Internet Explorer, jednak nawet IE8 nie obsługuje sporej ich części.