W tym artykule dowiemy się jak szybko formatować duże porcje danych zgromadzonych w formie tabel oraz jak poradzić sobie z nieczytelnymi formularzami.
Cel stosowania CSS wydaje się dość jasny – mniej kodu w dokumentach (X)HTML, sprawniejsze dokonywanie zmian w formatowaniu. Tymczasem z technologią CSS wiąże się także pewna zmiana podejścia do projektowania stron WWW.
Wszyscy, którzy tworzą strony internetowe, spotkali się z problemem tabel. Błędne koło powstawało wówczas, gdy do utworzenia trójkolumnowej strony potrzebowaliśmy tabeli z trzema wierszami o różnej szerokości.
Efekt był dobry, więc do tych wierszy wrzucaliśmy kolejne tabele, w ten sposób tworząc trudny do rozgryzienia kod. Co prawda dziś jeszcze nie zajmiemy się projektowaniem stron bez użycia tabel (co jest w planie), lecz przybliżymy problem tabel. Do czego potrzebne są tabele? Do publikowania różnego rodzaju zestawień, kalkulacji, cenników itd. To jest ich pierwotne zastosowanie. Utworzyliśmy tabelę z rankingiem najpopularniejszych w kraju witryn (rys. 1). Skrócony kod tej strony wygląda tak:
Ranking witryn....
lp.
nazwa
real users
zasięg witryny
1
Onet.pl
8 142 765
77,33%
Tak przygotowana tabela ma już styl. Można go określić nazwą domyślnego, bo nie wprowadziliśmy jeszcze żadnego formatowania. W kodzie HTML wykorzystaliśmy dwa znaczniki, na które należy zwrócić uwagę:
caption – jest to opis tabeli, który stanowi pewną integralną część tabeli (moglibyśmy tu wykorzystać choćby paragraf czy sekcję div). Tymczasem caption zapewnia, że otaczający tabelkę tekst będzie zawsze otaczał zarówno nią samą, jak i nasz opis;
th – ustala, które dane są nagłówkami wiersza lub kolumny.
Obramowanie
Do utworzenia prostego obramowania w HTML-u wykorzystuje się znacznik BORDER. W aktualnych wersjach (X)HTML jego stosowanie jest odradzane. Poniższy styl chce nadać tabeli proste obramowanie o kolorze niebieskim:
TABLE.tabela1 {
border: 1px solid blue;
}
Wynik widoczny jest na rys. 2. Atrybut border już dobrze znamy. Czas na coś nowego.
Przeglądarki dysponują grupą standardowych obramowań tabeli. Pojawia się tu nowa właściwość o nazwie border-style, do której przypisujemy wartości zgodnie z tabelą 1.
Przykład użycia:
border-style: double;
Póki co wiemy jedynie jak obramować zewnętrznie nasze tabele. Osobno możemy ustalać obramowania komórek. Do stylu TABLE.tabela1 dopiszemy:
Celowo została tu pominięta deklaracja TABLE. Nie musimy ograniczać klasy tabela1 przed zastosowaniem w innych elementach kodu HTML, bo jej przeznaczenie wydaje się dostatecznie jasne.
Po co te odstępy?
Jeszcze przed erą CSS, powszechnie używano np. takiej deklaracji tabeli:
Nie byłoby nic w tym dziwnego, gdyby CSS nie skończył definitywnie z ustawianiem wielokrotnie tego samego formatowania dla tabel. Problem polega na tym, że w tabeli istnieją domyślne marginesy i odstępy. By je usunąć, trzeba było skorzystać ze znaczników CELLSPACING, CELLPADDING, które zmieniały (kolejno) szerokość krawędzi komórek, odległość tekstu od krawędzi komórki. Często te wartości pozostawały dla tabel niezmienne, np. były równe 0.
Odpowiednikiem CELLSPACING jest w CSS właściwość border-spacing, której wartością może być liczba w jednej ze znanych nam jednostek lub 0. Dosłownego odpowiednika CELLPADDING nie ma. Jeżeli zależy nam na zniwelowaniu odległości między np. tekstem a krawędzią komórki, po prostu wyzerujmy (lub odpowiednio ustawmy) właściwość padding:
.tabela1 td, tabela1 th {
padding: 0;
}
Tabela z Excela
Chcieliśmy utworzyć tabelkę wyglądającą jak pola w Excelu i wpisaliśmy taki oto kod:
Chyba jednak nie o to nam chodziło (rys. 3). Ustawiliśmy wszystkie odległości, wprowadziliśmy obramowanie wszystkich elementów, a ramka jest niestety podwójna. Wynika to z prostego faktu.
Obramowania poszczególnych komórek sąsiadują ze sobą, a nie zachodzą na siebie. Efekt zachodzenia uzyskujemy przy użyciu właściwości border-collapse. Domyślnie w przeglądarkach wartość ta jest równa: separate (czyli oddzielnie).
My użyjemy drugiej wartości – collapse (nachodzące). Do ostatniego kodu dodajemy więc linijkę:
border-collapse: collapse;
Kolorowo znaczy czytelniej
Nasze nagłówki powinniśmy dodatkowo wyróżnić. Wykorzystaliśmy do tego celu znany już efekt kolorowego tła, który tym razem zastosujemy do znaczników TH:
.tabela1 th {
background-color: #FBFFE4;
}
Pożądanym przez webmasterów efektem na stronach WWW jest naprzemienna zmiana tła wierszy. Efekt ten uzyskamy definiując klasę .tlo dla co drugiego elementu tr.
.tabela1 tr.tlo {
background-color: #FEFFF8;
}
Formularze
Formularze bywają elementem bardzo często zaniedbywanym przez webmasterów. O ile w HTML-u w zasadzie nie było mowy o ich formatowaniu, o tyle CSS udostępnia nam pełen wachlarz możliwości. Warto z nich skorzystać, bo dobrze stworzony formularz zachęca, by go wypełnić.
Temat formularzy poruszany jest wraz z tabelami, bo często do prawidłowego wypozycjonowania na stronie wszystkich pól formularza najkorzystniej jest posłużyć się właśnie tabelami. Nie zawsze zastosowanie samego CSS bywa bardziej kompatybilne z różnymi przeglądarkami.
Stworzymy nieskomplikowany formularz (rys. 4). Dla różnorodności zawiera on pole typu input, wybór typu radio, listę rozwijalną oraz pole tekstowe. Nasz formularz odzwierciedla typowe czynności związane np. z założeniem nowego konta. Wersja niesformatowana jest trudna do ogarnięcia. Poszczególne pola są mało czytelne. Urozmaicimy je więc takim oto kodem:
Efekty naszych zmian widoczne są na rys. 5. By zapewnić optymalną odległość formularza od obramowania przeglądarki, użyliśmy właściwości padding. Formatowanie pól formularza odbywa się zupełnie tak jak innych elementów. Powyższy styl będzie obowiązywał dla wszystkich formularzy utworzonych w dokumentach HTML, do których przyłączony będzie ten styl.
Jeżeli więc będziemy chcieli zmodyfikować wygląd naszych formularzy, wystarczy zmodyfikować jedynie zawartość dokumentu CSS.
W naszym formularzu zmieniliśmy kolor czcionki (color), tło (background-color), ramkę okalającą wszystkie pola formularza (border) oraz zastosowaliśmy odstęp pomiędzy tekstem a obramowaniem pola.
Przy okazji pól tekstowych warto wspomnieć o konieczności zmiany czcionki. Domyślną jest tu czcionka o stałej szerokości znaków, która znajduje zastosowanie głównie w programowaniu, a nie na stronach WWW. Warto więc skorzystać z właściwości font-face i zmienić czcionkę na używaną w serwisie.
Przyciski
Klikając w formularzu przycisk \”wyślij\” lub np. \”dalej\”, zastanawiamy się czy nie można zmienić jego wyglądu. W poprzednim przykładzie okazało się, że przycisk także zmienił wygląd. Dlaczego? Ponieważ przycisk jest elementem typu input. Tutaj pojawia się pewien problem. Chcemy, by nasz przycisk wyglądał inaczej niż pole do którego wpisujemy tekst. Rozwiązanie jest proste. Tworzymy klasę, do której wprowadzamy nasz styl i przypisujemy ją do elementu, jakim jest submit (wyślij). Kod naszego pola wygląda więc tak:
Możemy skorzystać tu z wszystkich dotychczas przedstawionych właściwości. My jednak chcemy uzyskać coś innego – przycisk \”dalej…\” ma wyglądać jak zwykły tekst:
Potrzebowaliśmy więc niejako zresetować właściwości:
kolor tła
obramowanie
Jeżeli chcemy usunąć kolor tła, musimy go zdefiniować jako przezroczyste (z ang. transparent). Nasz formularz z rysunku 5 wygląda nadal niekorzystnie.
Utworzymy więc tabelę składającą się z dwóch kolumn (opis, pole formularza). Efekt widoczny na rys. 6 jest tym, który można określić jako docelowy. Potrzebujemy zmodyfikować nasz kod HTML… i to jedyny zabieg, który musimy wykonać wg reguły:
