Aplikacje internetowe

Aplikacje internetowe

Tabele

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.

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.

Części tabeliZanim 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.

Typowa tabela i jej elementy

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">

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).

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>.

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>

Wiersze i komórkiPo nagłówku w tabeli zostały umieszczone trzy wiersze składające się ze zwyczajnych komórek:

<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>

<tr><td>Zuzanna</td><td>160</td><td>52</td><td>brązowe</td>

</tr>

Efekt w przeglądarce internetowej

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.

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>

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:


<td></td><td>10</td><td>20</td>

</tr></table>

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.


<td><br /></td><td>10</td><td>20</td>

</tr></table>

Puste i naprawdę puste komórki

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.

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>

Ćwiczenie: Utwórz prostą tabelę

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>

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.

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%">

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">

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">

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.

Szerokość kolumn - przykład

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%">Kolor oczu</th>

</tr>

Aplikacje internetowe

Documents

Transcript of Aplikacje internetowe