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

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 i znacznika zamykającego. Z kolei każdy z wierszy ma swoje komórki, które definiowane są za pomocą pary znaczników … (w przypadku komórek nagłówka) i pary … (dla komórek danych).

Wiersze i komórki Komórki umieszczone w wierszach tabeli są oznaczane przy użyciu dwóch elementów. … — 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 ; … — 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 powinna zostać zakończona znacznikiem.

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: Imię Wzrost Waga Kolor oczu

Wiersze i komórki Po nagłówku w tabeli zostały umieszczone trzy wiersze składające się ze zwyczajnych komórek: Alicja niebieski Tomek chabrowe Zuzanna brązowe

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 jako pierwszą komórkę każdego wiersza tabeli. Po każdym z nagłówków trzeba wprowadzić odpowiednie komórki z informacjami.

Przykład Imię Alicja Tomek Zuzanna Wzrost Waga Kolor oczu niebieski chabrowe brązowe

Efekt w przeglądarce internetowej

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 lub i nic nie umieszczamy wewnątrz: 10 20

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

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 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 służący właśnie do tego celu. Ponieważ elementy 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 umieszczany jest obrębie elementu, przed definicjami wierszy i zawiera tytuł tabeli. Kończy się zamykającym znacznikiem. Podstawowa statystyka

Ćwiczenie: Utwórz prostą tabelę

Kod HTML tabeli z ćwiczenia Tabela 1.1: Mieszanie kolorów Czerwony Żółty Niebieski Czerwony Pomarańczowy Purpurowy Żółty Pomarańczowy Żółty Zielony Niebieski Purpurowy Zielony Niebieski

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 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 atrybut width o następującej postaci:

Efekt w przeglądarce internetowej

Odstępy między zawartością komórki a 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 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.

Efekt w przeglądarce internetowej

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. Domyślną wartością tego atrybutu jest 2.

Efekt w przeglądarce internetowej

Szerokość kolumn Atrybut width można zastosować także do poszczególnych komórek ( lub ), 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: Podstawowa statystyka Imię Wzrost Waga Kolor oczu