Aplikacje internetowe

1. Aplikacje internetowe Tabele

2. Wprowadzenie Wprowadzenie tabel przez firmę Netscape na początku 1995 roku niemal od razu zrewolucjonizowało sposób projektowania stron WWW i to nie tylko dlatego, że tabele pozwalały na prezentację danych w formie tabelarycznej, lecz przede wszystkim ze względu na znacznie większą kontrolę nad układem strony i rozmieszczeniem poszczególnych jej elementów, jaką tabele dają projektantom stron WWW.

3. Tworzenie tabel Aby utworzyć tabelę w HTML-u, określamy jej elementy i ich umiejscowienie, a wszystko otaczasz znacznikiem definiującym tabelę. Następnie poprawiamy wygląd całości za pomocą wyrównania, obramowań i kolorowych komórek.

4. Części tabeli Zanim zajmiemy się kodem tworzącym tabelę, zapoznamy się z kilkoma terminami, abyśmy wiedzieli o czym rozmawiamy. • Podpis — informuje o zawartości tabeli, na przykład, „Statystyczny rozkład głosów z lat 1950-94” lub „Liczba zabawek przypadająca na jeden pokój w mieszkaniu przy ulicy Bałagańskiego 123”. Podpisy są opcjonalne. • Nagłówki tabeli — to etykiety wierszy i (lub) kolumn. Nagłówki są zazwyczaj wyświetlane czcionką większą lub w pewien sposób wyróżnioną w stosunku do reszty tekstu tabeli. Są one również opcjonalne. • Komórki tabeli — to najmniejsze jej elementy. Komórka może zawierać dane lub nagłówek. • Dane tabeli — to wartości wpisane w samą tabelę. Nagłówki i dane to tabela.

5. Typowa tabela i jej elementy

6. Znacznik <table> Aby za pomocą kodów języka HTML utworzyć tabelę, stosujemy element <table>…</table>, który zawiera kod podpisu tabeli i samą jej definicję: <table> … tytuł tabeli (opcjonalny) i jej zawartość … </table> Należy jeszcze do znacznika <table> dodać atrybut border i po znaku równości podać grubość obramowania w pikselach, bo inaczej powstanie nam tabela bez obramowania np. <table border="1">

7. Wiersze i komórki • W języku HTML tabele definiowane są wiersz po wierszu, a każdy z nich zawiera definicje wszystkich komórek w nim zawartych. Tak więc, aby zdefiniować tabelę, musimy rozpocząć od górnego wiersza i w nim określić wszystkie komórki, następnie drugi wiersz i jego komórki, itd. Kolumny obliczane są automatycznie, w oparciu o liczbę komórek w każdym z wierszy. • Wiersz jest tworzony za pomocą znacznika otwierającego <tr> i znacznika zamykającego </tr>. Z kolei każdy z wierszy ma swoje komórki, które definiowane są za pomocą pary znaczników <th>…</th> (w przypadku komórek nagłówka) i pary <td>…</td> (dla komórek danych).

8. Wiersze i komórki Komórki umieszczone w wierszach tabeli są oznaczane przy użyciu dwóch elementów. • <th>…</th> — te elementy są używane do tworzenia komórek nagłówka. Nagłówki są zazwyczaj wyświetlane w inny sposób niż pozostałe komórki tabeli (na przykład, pogrubioną czcionką) i powinny być zamykane znacznikiem </th>; • <td>…</td> — te elementy są używane do tworzenia komórek danych. Litery „td” to skrót od słów „table data”, czyli dane (zawartość) tabeli. Każda komórka tabeli rozpoczynająca się znacznikiem <td> powinna zostać zakończona znacznikiem </td>.

9. Wiersze i komórki W przedstawionym wcześniej przykładzie, komórki nagłówka zostały umieszczone w pierwszym wierszu tabeli, a definiuje je następujący fragment kodu: <tr> <th>Imię</th> <th>Wzrost</th> <th>Waga</th> <th>Kolor oczu</th> </tr>

10. Wiersze i komórki Po nagłówku w tabeli zostały umieszczone trzy wiersze składające się ze zwyczajnych komórek: <tr> <td>Zuzanna</td> <td>160</td> <td>52</td> <td>brązowe</td> </tr> <tr> <td>Alicja</td> <td>171</td> <td>57</td> <td>niebieski</td> </tr> <tr> <td>Tomek</td> <td>185</td> <td>82</td> <td>chabrowe</td> </tr>

11. Efekt w przeglądarce internetowej

12. Wiersze i komórki Nagłówki można wyświetlić na samej górze tabeli, umieszczając je w jej pierwszym wierszu. Wprowadźmy jednak pewne modyfikacje w naszym przykładzie. Tym razem umieścimy nagłówki wzdłuż lewej krawędzi tabeli. W tym celu należy umieścić znaczniki <TH> jako pierwszą komórkę każdego wiersza tabeli. Po każdym z nagłówków trzeba wprowadzić odpowiednie komórki z informacjami.

13. Przykład <table border="1"> <tr> <th>Imię</th> <td>Alicja</td> <td>Tomek</td> <td>Zuzanna</td> </tr> <tr> <th>Wzrost</th> <td>171</td> <td>185</td> <td>160</td> </tr> <tr> <th>Waga</th> <td>57</td> <td>82</td> <td>52</td> </tr> <tr> <th>Kolor oczu</th> <td>niebieski</td> <td>chabrowe</td> <td>brązowe</td> </tr> </table>

14. Efekt w przeglądarce internetowej

15. Puste komórki • Wszystkie komórki tabeli, zarówno komórki nagłówka, jak i komórki danych – mogą zawierać tekst oraz kod HTML (w tym: listy, połączenia, formularze, a nawet inne tabele). • A co w przypadku, gdy chcemy utworzyć komórkę, w której nic nie ma? To proste. Definiujemy komórkę za pomocą elementów <th> lub <td> i nic nie umieszczamy wewnątrz: <table border="1"> <tr> <td></td> <td>10</td> <td>20</td> </tr> </table>

16. Puste komórki • Niektóre przeglądarki wyświetlają puste komórki tego rodzaju w taki sposób, jakby w ogóle nie istniały. Jeśli chcemy zmusić przeglądarkę, by naprawdę wyświetliła pustą komórkę, możemy w definicji komórki umieścić samo złamanie wiersza. <table border="1"> <tr> <td><br /></td> <td>10</td> <td>20</td> </tr> </table>

17. Puste i naprawdę puste komórki

18. Podpisy tabeli • Podpisy tabeli informują czytelnika o tym, czego dotyczy tabela. Do tworzenia podpisów służy element <caption> zaprojektowany specjalnie w tym celu. Wyświetla on tytuł tabeli w formie podpisu. Chociaż moglibyśmy zastosować zwykły akapit lub nagłówek jako etykietę tabeli, istnieje przecież element <caption> służący właśnie do tego celu. • Ponieważ elementy <caption> nadają podpisom etykiety podpisów, narzędzia obróbki plików HTML mogą wybrać je i utworzyć z nich osobny plik, automatycznie je ponumerować lub potraktować w specjalny sposób tylko dlatego, że są podpisami.

19. Podpisy tabeli Element <caption> umieszczany jest obrębie elementu <table>, przed definicjami wierszy i zawiera tytuł tabeli. Kończy się zamykającym znacznikiem </caption>. <table> <caption> Podstawowa statystyka</caption> <tr>

20. Ćwiczenie: Utwórz prostą tabelę

21. Kod HTML tabeli z ćwiczenia <table border="1"> <caption><b>Tabela 1.1:</b> Mieszanie kolorów</caption> <tr> <th><br /></th> <th>Czerwony</th> <th>Żółty</th> <th>Niebieski</th> </tr> <tr> <th>Czerwony</th> <td>Czerwony</td> <td>Pomarańczowy</td> <td>Purpurowy</td> </tr> <tr> <th>Żółty</th> <td>Pomarańczowy</td> <td>Żółty</td> <td>Zielony</td> </tr> <tr> <th>Niebieski</th> <td>Purpurowy</td> <td>Zielony</td> <td>Niebieski</td> </tr> </table>

22. Określanie szerokości tabeli • Powróćmy do ostatniego przykładu, w nim za określenie szerokości przedstawionej tabeli oraz jej poszczególnych kolumn odpowiada przeglądarka. W wielu przypadkach to najlepsze rozwiązanie, gwarantujące, że tabela zostanie poprawnie wyświetlona w różnych przeglądarkach, działających w różnej rozdzielczości. Po prostu, niech wszystkie szerokości określi przeglądarka. • Mogą się jednak zdarzyć sytuacje, w których będziemy woleli dysponować większa kontrolą szerokości tabeli. W szczególności dotyczy to sytuacji, gdy domyślne ustawienia przeglądarki są wyjątkowo dziwne.

23. Określanie szerokości tabeli • Za pomocą atrybutu width znacznika <table> można zdefiniować szerokość tabeli na stronie. Wartością atrybutu jest dokładna szerokość w pikselach lub w procentach względem szerokości okna (np. 50% bądź 75%). • W tym drugim przypadku szerokość tabeli będzie się zmieniała wraz ze zmianą szerokości okna. Jeśli atrybut ten jest stosowany, szerokość kolumn tabeli zostanie dopasowana do narzuconej szerokości. • Aby tabela zajęła 100% szerokości okna przeglądarki, należy dodać do znacznika <table> atrybut width o następującej postaci: <table border="1" width="100%">

24. Efekt w przeglądarce internetowej

25. Odstępy między zawartością komórkia jej obramowaniem • W HTML-u istnieje atrybut definiujący wielkość odstępu pomiędzy obramowaniem komórki tabeli a jej zawartością. W wielu przeglądarkach wielkość ta domyślnie wynosi 1 piksel. • Za pomocą atrybutu cellpadding znacznika <table> można zmieniać wielkość tego odstępu. Wartość tego atrybutu określa wielkość odstępu pomiędzy obramowaniem komórki a jej zawartością wyrażoną w pikselach. <table border="10" width="100%" cellpadding="10">

26. Efekt w przeglądarce internetowej

27. Odstępy między komórkami • Odstępy między komórkami pod wieloma względami przypominają odstępy między tekstem a krawędzią komórki. Jedyna różnica polega na tym, że odstępy między komórkami, jako limitujące wolną przestrzeń oddzielającą komórki, pozwalają na określenie szerokości obramowań poszczególnych komórek. • Atrybutem umożliwiającym definiowanie tych szerokości jest cellspacing znacznika <table>. Domyślną wartością tego atrybutu jest 2. <table border="4" width="100%" cellpadding="10" cellspacing="8">

28. Efekt w przeglądarce internetowej

29. Szerokość kolumn • Atrybut width można zastosować także do poszczególnych komórek (<th> lub <td>), aby za jego pomocą określić szerokość konkretnych kolumn. Wartością atrybutu jest dokładna szerokość kolumny w pikselach lub w procentach względem szerokości całej tabeli. • Możliwość definiowania szerokości kolumn może być przydatna, gdy chcemy, by wszystkie kolumny Naszej tabeli miały identyczną szerokość niezależnie od ich zawartości.

30. Szerokość kolumn - przykład

31. Szerokość kolumn Aby stworzyć taką tabelę, szerokości kolumn zostają podane w komórkach nagłówka: <table border="1" width="100%"> <caption>Podstawowa statystyka</caption> <tr> <th width="40%">Imię</th> <th width="20%">Wzrost</th> <th width="20%">Waga</th> <th width="20%">Koloroczu</th> </tr>