Jednym z najważniejszych kroków nauki języka HTML jest opanowanie umiejętności tworzenia tabel. Wprowadzone do języka w celu ułatwienia prezentacji danych, tabele obecnie stanowią główne narzędzie do projektowania układu witryn.
Tabela HTML składa się z wierszy podzielonych na komórki. Całą tabelę otaczamy znacznikami <TABLE> oraz </TABLE>, wewnątrz umieszczając wiersze. Do definiowania wierszy stosujemy znaczniki <TR> i </TR>. Nazwa znacznika TR jest skrótem Table Row - wiersz tabeli. Komórki umieszczamy pomiędzy <TD> oraz </TD> (ang. Table Data - dane tabeli). Przystąpmy do wykonania pierwszej tabeli.
Wykonaj tabelę widoczną na rysunku 1.
Rys. 1. Tabela 2×2
Tabela ta składa się z dwóch wierszy oraz dwóch kolumn. Po umieszczeniu w treści strony (tj. pomiędzy znacznikami BODY) znaczników TABLE przechodzimy do ustalenia zawartości tabeli. Znacznikami TR definiujemy pierwszy wiersz, w którym umieszczamy dwie komórki. Komórki otaczamy znacznikami <TD> oraz </TD>. W treści komórek wprowadzamy litery A oraz B. Poniżej pierwszego wiersza (tj. pod znacznikiem </TR>, ale przed znacznikiem </TABLE>) umieszczamy kod drugiego wiersza tabeli. Kod drugiego wiersza różni się jedynie zawartością komórek TD. Oto kod, jaki powinniśmy otrzymać:
<TABLE border="1"> <TR> <TD>A</TD> <TD>B</TD> </TR> <TR> <TD>C</TD> <TD>D</TD> </TR> </TABLE>
Zauważmy, że znacznik otwierający tabelę posiada atrybut border="1". Atrybut ten włącza widoczność krawędzi tabeli. Jest on wygodny do sprawdzania poprawności kodu HTML. Włączając widoczność wszystkich krawędzi tabeli, widzimy czy komórki tworzą zaplanowany przez nas układ.
Korzystając z programu NotH należy zapamiętać skróty podane w tabeli 1.
lp. | Element | Kod HTML | Skrót | Zapis skrótu |
---|---|---|---|---|
lp. | Element | Kod HTML | Skrót | Zapis skrótu |
1. | Tabela | <TABLE></TABLE> | Ctrl+W+T | ^WT |
2. | Wiersz tabeli | <TR></TR> | Ctrl+W+R | ^WR |
3. | Komórka tabeli | <TD></TD> | Ctrl+W+D | ^WD |
4. | Komórka nagłówkowa | <TH></TH> | Ctrl+W+H | ^WH |
5. | Podpis tabeli | <CAPTION></CAPTION> | Ctrl+W+C | ^WC |
Tabela 1. Podstawowe elementy HTML dotyczące tabel i ich skróty w programie NotH
Wykonaj tabelę o trzech wierszach i jednej kolumnie (3×1). W komórkach umieść litery X, Y, Z.
Rys. 2. Tabela 3×1
Ponieważ tabela ma zawierać trzy wiersze, zatem musimy trzykrotnie użyć elementu TR. Każdy wiersz zawiera jedną komórkę, więc wewnątrz elementów TR umieszczamy po jednym elemencie TD. Oto wynikowy kod:
<TABLE border="1"> <TR><TD>X</TD></TR> <TR><TD>Y</TD></TR> <TR><TD>Z</TD></TR> </TABLE>
Wykonaj tabelę o dwóch wierszach i pięciu kolumnach (2×5). W komórkach umieść kolejne liczby naturalne.
Rys. 3. Tabela 2×5
Wewnątrz elementu TABLE umieszczamy dwa elementy TR. Każdy z wierszy zawiera pięć elementów TD:
<TABLE border="1"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TD>5</TD> </TR> <TR> <TD>6</TD> <TD>7</TD> <TD>8</TD> <TD>9</TD> <TD>10</TD> </TR> </TABLE>
Wspomniany atrybut border uwidacznia krawędzie tabeli. Dzięki temu możemy stwierdzić, czy tworzona tabela jest zgodna z oczekiwaniami. Jednakże format krawędzi pozostawia wiele do życzenia. Przejdźmy zatem do ustalenia stylów, nadających odpowiedni format krawędziom.
Obramowanie tabeli definiujemy ustalając odpowiednie style. Rozpocznijmy od zbadania formatu tabeli pozbawionej atrybutu border.
Wykonaj tabelę prezentującą najdłuższe rzeki świata. W tabeli umieść oprócz nazwy rzeki także jej długość oraz powierzchnię dorzecza.
Rys. 4. Tabela z podpisem CAPTION i bez atrybutu border
W pierwszym wierszu tabeli umieścimy nazwy kolumn, a w pozostałych informacje o rzekach. Dane każdej rzeki znajdą się w osobnym wierszu tabeli. W ćwiczeniu tym wprowadzimy kolejny element języka HTML związany z tabelami. Znaczniki <CAPTION> oraz </CAPTION> wzbogacają tabelę o podpis. Należy pamiętać, by umieszczać je bezpośrednio po znaczniku <TABLE> otwierającym tabelę.
Wygląd tabeli został przedstawiony na rysunku 4, zaś listing 1 prezentuje kilka pierwszych wierszy kodu HTML.
Zauważmy, że domyślnie, krawędzie tabeli nie są widoczne.
<TABLE> <CAPTION> Najdłuższe rzeki świata </CAPTION> <TR> <TD>Nazwa</TD> <TD>długość<BR> w km</TD> <TD>pow. dorzecza<BR>w tys. km <SUP>2</SUP></TD> </TR> <TR> <TD>Nil</TD> <TD>6671</TD> <TD>2870</TD> </TR> <TR> <TD>Missisipi (od żródeł Missouri)</TD> <TD>6418</TD> <TD>3275</TD> ... (wiersze dotyczące kolejnych rzek) ... </TABLE>
Listing 1. Tabela zawierająca zestawienie najdłuższych rzek.
W jaki zatem sposób uwidocznić krawędzie tabeli? Należy dokument wzbogacić o definicję stylów, zmieniającą wartość atrybutu border znacznikom TABLE oraz TD:
TABLE, TD { border: solid black 2px; }
Selektorem powyższej definicji stylu są dwa znaczniki TABLE i TD. Decyduje o tym znak przecinka znajdujący się pomiędzy znacznikami. Podana definicja będzie się odnosiła do wszystkich elementów TABLE oraz TD, jakie występują w dokumencie. Oczywiście definicję taką możemy również napisać w nieco dłuższej postaci:
TABLE { border: solid black 2px; } TD { border: solid black 2px; }
Jeszcze inny sposób zapisu podanych wartości polega na rozbiciu atrybutu border na atrybuty border-style, border-width oraz border-color:
TABLE, TD { border-style : solid; border-width : 2px; border-color : black; }
Atrybut border-width ustala oczywiście grubość krawędzi, zaś border-color - kolor. Natomiast atrybut border-style określa rodzaj linii. Dopuszczalnymi wartościami są: none, hidden, dotted, dashed, solid, double, groove, ridge, inset oraz outset.
Zwróćmy również uwagę na możliwość ustalania różnego formatu krawędzi lewej, prawej, dolnej i górnej z osobna. Do tego celu możemy użyć czterech atrybutów border-left, border-right, border-top i border-bottom lub dwunastu atrybutów postaci border-right-style, border-right-width, border-right-color (słowo right zastępujemy słowami left, top lub bottom).
Przygotuj dwie tabele przedstawiające zestawienie jednostek względnych i bezwzględnych stosowanych w arkuszach stylów. Stronę wzbogać o style uwidaczniające krawędzie tabeli, zaś komórki nagłówkowe napisz czcionką wytłuszczoną.
Rys. 5. Krawędzie tabeli zmodyfikowane stylami
Tabele, które mamy przygotować, są widoczne na rysunku 5. Każda z nich zawiera dwie kolumny. W pierwszej kolumnie umieszczamy nazwę jednostki, a w drugiej - jej opis. Nazwę jednostki wytłuścimy stosując elementy STRONG. Pierwsza z tabel będzie miała następujący kod:
<TABLE> <TR> <TD><STRONG>em</STRONG></TD> <TD>wielkość danej czcionki</TD> </TR> <TR> <TD><STRONG>ex</STRONG></TD> <TD>(x-height) wysokość danej czcionki</TD> </TR> <TR> <TD><STRONG>px</STRONG></TD> <TD>piksel danego monitora</TD> </TR> </TABLE>
Druga tabela różni się jedynie liczbą wierszy oraz danymi zawartymi w tabeli. Dodając do dokumentu opisane wcześniej style otrzymamy witrynę przedstawioną na rysunku 5.
Krawędzie widoczne na rysunku 5 są nieco dziwne. Otaczają całą tabelę oraz każdą komórkę, przy czym krawędzie sąsiadujących komórek nie łączą się. W celu złączenia krawędzi tabeli należy użyć atrybutu border-collapse. Nadając mu wartość collapse wymusimy łączenie krawędzi sąsiadujących komórek.
Przygotuj stronę z zestawieniem wielokrotności jednostek. Tabelę sformatuj tak, jak na rysunku 6.
Rys. 6. Tabela o "złączonych" krawędziach
Najpierw przygotowujemy kod tabeli. Tabela ta posiada trzy kolumny i szesnaście wierszy. Pierwszy wiersz jest wierszem nagłówkowym, a pozostałe zawierają dane. Format wszystkich wierszy z danymi jest identyczny, ale różni się od formatu wiersza nagłówkowego. W celu wprowadzenia innego formatu w pierwszym wierszu wykorzystamy element TH (ang. Table Header - nagłówek tabeli). Kod dwóch początkowych wierszy tabeli jest następujący:
<TABLE> <TR> <TH>Przedrostek</TH> <TH>Oznaczenie</TH> <TH>Wielokrotność, podwielokrotność</TH> </TR> <TR> <TD>tera-</TD> <TD>T</TD> <TD>10<SUP>12</SUP> = 1 000 000 000 000</TD> </TR> ... <TABLE>
Dodając poniższe definicje stylów:
TABLE { border-collapse : collapse; border : solid 2px black; } TD { border : solid 1px black; padding : 5px; } TH { border : solid 1px black; color : white; background : black; font-weight : bolder; font-size : 12pt; padding : 15px; }
otrzymamy witrynę przedstawioną na rysunku 6. Tło komórek nagłówkowych zmienia wpis background: black;, zaś atrybut padding zwiększa ilość miejsca otaczającego zawartość komórki.
W ćwiczeniu 6 spotkaliśmy się po raz pierwszy z sytuacją, w której pewne komórki (tj. komórki nagłówka) mają mieć inny format od pozostałych. Co zrobić, gdy w tabeli pojawia się większa liczba tego typu komórek? Problem ten rozwiążemy stosując klasy znaczników. Jest to metoda, pozwalająca niejako na zdefiniowanie nowych znaczników. Wprowadzane znaczniki różnią się od istniejących formatem.
Dokonujemy tego korzystając z atrybutu class. Atrybut ten możemy stosować w odniesieniu do każdego elementu języka HTML. Jeśli chcemy wprowadzić nowy format dla pewnych elementów TD należy nadać im klasę, np. tytul:
<TD class="tytul"> zawartość </TD>
Format takiego elementu ustalamy stosując selektor TD.tytul:
TD.tytul { definicje stylów... }
W podobny sposób możemy zdefiniować styl elementu STRONG umieszczając w kodzie HTML klasę:
<STRONG class="plik">php.ini</STRONG>
zaś w arkuszach stylów ustalając format:
STRONG.plik { ...style... }
W dokumencie może pojawić się dowolna liczba znaczników posiadających tę samą nazwę klasy. Na przykład pięć znaczników STRONG wspomnianej klasy plik. Dopuszczalne jest również stosowanie tej samej nazwy klasy w odniesieniu do różnych znaczników. Kontynuując przykład klasy plik moglibyśmy w dokumencie umieścić znaczniki:
<EM class="plik">ala</EM> <P class="plik">ma</P> <TABLE class="plik">kota</TABLE>
Definiując style powyższych znaczników zastosujemy selektory: EM.plik, P.plik oraz TABLE.plik. Możemy również użyć selektora .plik:
.plik { ...style... }
Selektor taki będzie modyfikował format wszystkich znaczników klasy plik.
Przygotuj stronę pt. "Pies-Kot" zawierającą tabelę, o dwóch komórkach. Każdej komórce nadaj odmienny kolor tła.
Rys. 7. Komórki o różnych formatach
Tabela z rysunku 7 posiada dwa wiersze i jedną kolumnę. Ustalmy nazwę klasy górnej komórki tabeli na kot, zaś dolnej na pies. Kod HTML tabeli będzie następujący:
<TABLE> <TR><TD class="kot">KOT</TD></TR> <TR><TD class="pies">PIES</TD></TR> </TABLE>
Teraz przechodzimy do definicji stylów. Zmieniamy kolor tła każdej komórki z osobna:
TD.kot { background : lightgreen; } TD.pies { background : yellow; }
Stosując klasy znaczników, przygotuj tabele o kolorystyce odpowiadającej flagom Francji, Niemiec i Włoch.
Rys. 8. Flagi - modyfikacja tła i szerokości komórek
Flagi są w istocie tabelami, które przedstawiają jedynie kolor tła. Komórki nie zawierają żadnych danych. W takim przypadku, wewnątrz komórek, należy umieścić spację . W przeciwnym bowiem razie, tło komórki nie zostanie wyświetlone. Ponadto należy zmodyfikować szerokość komórki stosując atrybut width.
Każda z flag przedstawionych na rysunku jest w istocie tabelą o trzech wierszach i jednej kolumnie. Oto kod flagi francuskiej:
<TABLE> <TR><TD class="niebieski"> </TD></TR> <TR><TD class="bialy"> </TD></TR> <TR><TD class="czerwony"> </TD></TR> </TABLE>
W stylach modyfikujemy szerokość wszystkich komórek tabeli (bez względu na klasę; także tych, bez przypisanej nazwy klasy):
TD { width : 150px; }
a także dodajemy klasy mające na celu pokolorowanie flagi:
TD.niebieski { color : rgb(0,0,0); background : rgb(59,66,215); }
Stosując przedstawione informacje możemy przystąpić do wykonania dwóch, nieco bardziej rozbudowanych ćwiczeń.
Przygotuj witrynę prezentującą dane na temat kodu paskowego rezystorów widoczną na rysunku 9.
Rys. 9. Kod paskowy rezystorów
Przygotuj witrynę prezentującą wyniki spotkań eliminacyjnych grupy 5 eliminacji mistrzostw świata przedstawioną na rysunku 10.
Rys. 10. Eliminacje piłkarskich mistrzostw świata Korea i Japonia 2002
Tabele omówione w ćwiczeniach od 1 do 10 charakteryzuje bardzo prosta struktura. Każdy wiersz zawiera identyczną liczbę komórek. Również każda z kolumn ma identyczną liczbę komórek. W przypadku, gdy tabela zawiera komórki rozciągające się na kilka wierszy lub kolumn, należy użyć atrybutów colspan oraz rowspan. Atrybuty te nadajemy komórkom TD lub TH. Wartościami atrybutów są liczby całkowite, które określają liczbę wierszy lub kolumn, na jakie rozciąga się dana komórka. Jeśli utworzymy komórkę:
<TD colspan="3"> ... </TD>
to komórka ta będzie się rozciągała na trzy kolejne kolumny. Podobnie, komórka:
<TD rowspan="5"> ... </TD>
rozciąga się na pięć wierszy.
Wykonaj tabelę przedstawioną na rysunku 11. W tabeli tej komórka o etykiecie A rozciąga się na dwie kolumny.
Rys. 11. Komórka A rozciąga się na dwie kolumny
Przygotowujemy tabelę o dwóch wierszach i dwóch kolumnach. Tabela taka była omówiona w ćwiczeniu 1. Następnie pierwszej komórce w pierwszym wierszu dodajemy atrybut colspan, zaś drugą komórkę z pierwszego wiersza usuwamy. Otrzymamy kod:
<TABLE> <TR> <TD colspan="2">A</TD> </TR> <TR> <TD>B</TD> <TD>C</TD> </TR> </TABLE>
Zwróćmy uwagę na fakt, że w kodzie HTML występuje odpowiednio mniej komórek. Pierwsza komórka rozciąga się na dwie kolumny. Stąd w kodzie pierwszego wiersza występuje o jedną komórkę mniej niż w kodzie wiersza drugiego.
Wykonaj tabelę przedstawioną na rysunku 12. Komórki oznaczone XXX oraz YYY rozciągają się na dwie kolumny.
Rys. 12. Komórki XXX oraz YYY rozciągają się na dwie kolumny
Tabela z rysunku 12 ma trzy wiersze i dwie kolumny. W wierszu środkowym występują dwie komórki, zaś w wierszach pierwszym i trzecim - tylko jedna komórka o atrybucie colspan="2".
Wykonaj tabelę widoczną na rysunku 13. W tabeli tej komórka o etykiecie A rozciąga się na dwa wiersze.
Rys. 13. Komórka A rozciąga się na dwa wiersze
Kod tabeli jest następujący:
<TABLE> <TR> <TD rowspan="2">A</TD> <TD>B</TD> </TR> <TR> <TD>C</TD> </TR> </TABLE>
Tym razem pierwsza komórka pierwszego wiersza posiada atrybut rowspan="2". Tak jak i poprzednio w kodzie HTML tabeli "znika" jedna z komórek. Tym razem jest to pierwsza komórka drugiego wiersza.
Uważne wykonanie pierwszych trzynastu ćwiczeń umożliwia rozpoczęcie projektowania układu witryny przy użyciu tabel. Jedynym atrybutem, który okaże się konieczny, a nie został wprowadzony w ćwiczeniach poprzednich jest wyrównanie pionowe wiersza tabeli.
Do ustalenia wyrównania pionowego służy atrybut vertical-align, którego poprawnymi wartościami są między innymi top, bottom oraz middle.
Wykonaj witrynę zawierającą jedno menu z lewej strony.
Rys. 14. Układ witryny WWW bez oraz po zastosowaniu stylów
Wykonaj witrynę zawierającą dwa menu z lewej strony.
Rys. 15. Drugi przykład projektu układu witryny WWW
Mam nadzieję, że podana porcja ćwiczeń pozwoli na opanowanie umiejętności posługiwania się tabelami w stopniu umożliwiającym tworzenie prostych witryn. Dalsza nauka powinna dotyczyć techniki krojenia obrazków i umieszczania w tabeli. Dzięki temu, będziemy mogli przygotowywać wygląd witryny w programach graficznych.