Krok 11 Tabelki

Chociaż tabel używano do budowy struktury strony od początku istnienia internetu, nie są one jednak do tego przeznaczone. Poza tym istnieją o wiele lepsze rozwiązania. Tabeli używa się do prezentacji danych numerycznych, podobnych do tych w arkuszach kalkulacyjnych.

W dawniejszych czasach (ze starymi przeglądarkami) można było zmieniać wygląd komórek i kolum stosując takie właściwości jak background colour, background image, itp. Większość z nich wyszła już z użycia, co wcale nie znaczy, że nie bedą one działać w przeglądarkach. etc. Po prostu nie można na nich polegać. Jeśli chcesz zastosować tło obrazka (background image) w tabelce, Netscape 4 i wcześniejsze wersje powtórzą go w każdej komórce tabeli, co daje wygląd kalejdoskopu. Raczej frustrujące doświadczenie…

Kiedyś można było określać wysokość tabelki w pikselach lub procentach, obecnie nie jest to możliwe. Tabelki same dopasowują wysokość do wielkości umieszonej w nich treści.

Stylowanie tabelek arkuszami może być trochę niezręczne i nie koniecznie praktyczne. Można zbudować własną strukturę tabel przy użyciu właściwości display:table; i display:table-cell; które traktują każdą komórkę jako niezależny div. Zazwyczaj jednak stylujemy jedynie elementy takie jak: table, tr, td, th, co w zupełności powinno wystarczyć dla naszych potrzeb.

Element tr jest rzędem komórek poziomych, natomiast td podziałem tych komórek.

Tabelki dziedziczą niektóre właściwości divów, w których są umieszone. Jeśli element <body> ma zdefiniowaną rodzinę czcionek np.: verdana, arial, sans-serif style i kolor: #009, tabelki odziedziczą te właściwości z wyjątkiem np.: wielkości czcionki czy wyrównania tekstu. Istnieje pewna hierarchia. Każda definicja dla elementu <td> automatycznie staje się definicją elementu <tr> i jest ona ważniejsza od definicji określonych dla całej tabeli. Można to wykorzystać. Jeśli ustawi się kolor tła tabeli na czarny i kolor td na biały oraz właściwość cellspacing=”2″, otrzyma się tabelkę z białymi komórkami z 2-pikselowymi ramkami dookoła w kolorze czarnym.

1 2 3 4
1 2 3 4
1 2 3 4

Tabela 1. Tło tabeli jest przeźroczyste wraz z delikatym kolorem dodanym do tła elementu <td>.

Dostępne są również możliwości ustawiania właściwości ramek tabeli takich jak: kolor i rodzaj (solid, dotted, dashed, itp).

1 2 3 4
1 2 3 4
1 2 3 4

Tabela 2. W zależności od rodzaju danych, można bardziej uwidocznić rzędy poziome lub kolumny.

Nagłówek 1 Nagłówek 2 Nagłówek 3 Nagłówek 4
1 2 3 4
1 2 3 4

Tabela 3. Trójwymiarowy efekt poprzez zmianę koloru ramek. Nagłówki <th> w troszeczkę cimniejszym kolorze.

Inna sztuczką jest stosowanie cieniowanych obrazów, które są powtarzane właściwością background-repeat: repeat-x.

table background Mały obrazek (227 bajtów) powtarzany w poziomie…

Rząd 1 2 3 4
Rząd 1 2 3 4
Rząd 1 2 3 4
Rząd 1 2 3 4

Tabela 4. Troszeczkę ciemniejsze cienie w nagłówkach.

Jeśli chcesz stylować poszczególne komórki, możesz definiować je indiwidualnie.

<td style=”background-color: #f00″>cell 1</td>

1 2 3 4
2 3 4
1 2 3
1 2 3 4

Tabela 5. Trochę dziwne rozwiązanie!

Używanie tej metody ma pewne cechy negatywne, mianowicie, nie można mieć kontroli na taką tabelką z zewnętrznego pliku CSS.
Lepszym sposobem jest umieszczenie rzędów lub kolumn w divach np.:

#col1 td { … }
#col2 td { … }

Pozwala ta na znacznie lepszą kontrolę tabelki.

Poprzednia strona | Następna strona