Kurs HTML - HTML

Transkrypt

Kurs HTML - HTML

Kurs HTML - HTML - Tabele
Strona 1
Tabele
W tym rozdziale dowiesz się...
Jak wstawić tabelkę na stronę WWW? Jakie są dodatkowe zastosowania tabel?
W jaki sposób dodać lub zmienić obramowanie tabeli?
W jaki sposób kontrolować marginesy wewnątrz tabeli?
Jak zmienić lub usunąć odstępy pomiędzy komórkami w tabeli?
Jak powinno się tworzyć nagłówek tabeli?
Jak wstawić tytuł (podpis) tabeli?
W jaki sposób zmienić rozmiary komórek oraz całych tabeli?
Jak zmienić sposób ustawienia tabeli na ekranie - np. ustawić na środku (wyśrodkować)?
Jak zmienić sposób ustawienia tekstu w tabeli?
Jak zmienić kolor tła tabeli?
W jaki sposób wstawić obrazek (grafikę, zdjęcie) w tle tabeli?
Jak zmienić kolor obramowania tabeli?
Jak zablokować zawijanie tekstu w tabeli, czyli sprawić, aby cały tekst znajdował się w jednej linijce?
W jaki sposób połączyć kilka komórek tabeli w jedną duŜą?
W jaki sposób połączyć kilka wierszy tabeli w grupę funkcjonalną? Jak wydzielić nagłówek i stopkę tabeli?
W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?
Jak ukryć lub pokazać tylko niektóre zewnętrzne krawędzie tabeli?
Jak ukryć lub pokazać tylko niektóre wewnętrzne krawędzie tabeli?
Jak stworzyć tabelę podrzędną?
Struktura tabeli
<table>
<tr>
<td>... </td>
<td> ...</td>
<td>... </td>
<td> ...</td>
</tr>
<tr>
</tr>
</table>
Jest to najprostsza tabela, gdzie:
<table>...</table>
jest znacznikiem tabeli
<tr>...</tr>
jest znacznikiem wiersza
<td>...</td>
jest znacznikiem pojedynczej komórki
http://www.kurshtml.boo.pl/html/tabele.print.html
2008-02-07 18:46:56
Strona 2
W miejsce kropek naleŜy wpisać treść poszczególnych komórek tabeli.
PowyŜsze polecenia tworzą tabelę, złoŜoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to
konieczne, moŜliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>)
lub wierszy (znaczniki <tr>...</tr>). NaleŜy przy tym zauwaŜyć, Ŝe komórki tabeli (<td>...</td>)
znajdują się wewnątrz znacznków wierszy (<tr>...</tr>)! Liczba komórek w kaŜdym wierszu powinna być
taka sama.
Zwracam uwagę, Ŝe w obrębie tabeli tekst i inne elementy moŜna wstawiać tylko wewnątrz znaczników komórek i
ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników moŜna umieszczać tylko ściśle określone
elementy, które zostaną szczegółowo opisane w tym rozdziale. Zatem poniŜszy kod będzie nieprawidłowy:
<table>
Tabela...
<tr>
<b><td>...</td></b>
<td>...</td>
</tr>
<br />
<tr>
<b><td>...</td>
<td>...</td></b>
</tr>
<br />
</table>
Edytory (X)HTML posiadają często specjalny generator tabel, który moŜe ułatwić i znacznie przyspieszyć pracę.
Niestety edytory tekstowe zwykle nie pozwalają na powtórną edycję kodu, tzn. raz wstawioną tabelę, moŜna
modyfikować juŜ tylko ręcznie. Wady tej nie posiadają edytory graficzne (np.: FrontPage).
Przykład:
Po wpisaniu:
<table>
<tr>
<td>komórka1</td>
<td>komórka2</td>
<td>komórka3</td>
</tr>
</table>
<td>komórka4</td>
</tr>
<tr>
Otrzymamy:
komórka1 komórka2
komórka3 komórka4
Jak widać, taka tabela nie ma obramowania, dlatego jest mało czytelna. O tym, jak dodać obramowanie do tabeli,
przeczytasz w następnym rozdziale.
Dla większej czytelności kodu moŜna umieścić kaŜdy znacznik <td> w nowej linii. Jest to przydatne zwłaszcza w
przypadku dość obszernej treści w komórkach. PowyŜsza tabela jest równoznacza z:
2008-02-07 18:46:56
Strona 3
<table>
<tr>
<td>komórka1</td>
<td>komórka2</td>
</tr>
<tr>
<td>komórka3</td>
<td>komórka4</td>
</tr>
</table>
Oczywiście wcięcia w tekście nie są obowiązkowe, ale zwiększają przejrzystość kodu. Dzięki takiemu sposobowi
zapisu, tworzenie i modyfikacja tabeli moŜe przebiegać duŜo sprawniej. Na tej stronie w większości została uŜyta
pierwsza metoda wpisywania znaczników, w Internecie najczęściej spotyka się drugą z ewentualnymi dodatkowymi
wcięciami przez znacznikami <tr> i </tr>. MoŜesz oczywiście opracować równieŜ własną metodę. Wybierz tą,
która najbardziej Ci odpowiada i stosuj ją konsekwentnie.
Odcięcia
Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki (spacje, tabulatory, znaki nowej linii) w
komórkach tabeli w przypadku tworzenia tzw. odcięć, czyli wstawiania do komórek tabeli poszczególnych
kawałków pociętego, zwykle większego obrazka. Odcięcia obsługuje wiele programów graficznych, a są one
przydatne np. w celu ustalenia róŜnego stopnia kompresji graficznej poszczególnych kawałków, co zmniejsza
rozmiar wynikowy pliku. W takim przypadku wewnątrz komórek tabeli nie powinniśmy umieszczać białych
znaków wraz ze znacznikiem <img />! Jeśli nie dotrzymamy tego warunku, w MSIE pojawią się przerwy poniŜej
kaŜdego kawałka.
Poprawnie:
<td><img src="..." alt="..." /></td>
Niepoprawnie:
<td><img src="..." alt="..." /> </td>
<td>
<img src="..." alt="..." />
</td>
<td>
<img src="..." alt="..." />
</td>
Rozmiar i wielkość czcionki (oraz jej rodzaj w Netscape 6) zdefiniowane poza tabelą mogą nie mieć wpływu na
tekst wewnątrz niej!
Aby to zmienić, naleŜy zdefiniować w kaŜdej komórce osobno rozmiar czcionki. Jednak lepszym rozwiązaniem jest
wstawienie w nagłówku dokumentu:
<style type="text/css">
/* <![CDATA[ */
td { font-size: wielkośćpx; color: kolor; font-family: rodzaj }
/* ]]> */
</style>
2008-02-07 18:46:56
Strona 4
wielkość
Rozmiar tekstu w tabeli podany w pikselach
kolor
Barwa czcionki
rodzaj
Wybrany krój czcionki (potrzebne w Netscape 6)
Inne zastosowania tabel
Tabele na stronach WWW są uŜywane nie tylko do prezentacji zbioru uporządkowanych danych, lecz równieŜ do
określonego ustawienia elementów strony. Na przykład za pomocą tabeli bez obramowania moŜemy ustawić w
jednej linii dwa elementy w ten sposób, Ŝe pierwszy znajdzie się przy lewej krawędzi strony, a drugi przy prawej:
<table border="0" width="100%">
<tr>
<td align="left">LEWA</td>
</tr>
</table>
<td align="right">PRAWA</td>
LEWA
PRAWA
Struktura strony
Innym częstym zastosowaniem tabel jest tworzenie struktury strony. MoŜna np. w lewej kolumnie umieścić spis
treści serwisu, a w prawej - zawartość tekstową strony. Na górze moŜna przeznaczyć miejsce na animowany banner
lub/i logo serwisu:
<table width="100%" cellspacing="0" cellpadding="10">
<tr>
<td bgcolor="kolor góra" colspan="2" align="center" valign="middle">Tutaj moŜna umieścić logo serwisu</
td>
</tr>
<tr>
<td bgcolor="kolor menu" width="Tutaj wpisz szerokość menu (np.: 150)" valign="top">
Tu umieszcza się odsyłacze spisu treści
</td>
<td bgcolor="kolor strony" valign="top">
Tu wpisuje się treść strony
</td>
</tr>
</table>
Tutaj moŜna umieścić logo serwisu
Tu umieszcza się
odsyłacze spisu treści
Tworzenie struktury strony opartej o tabele nie jest zalecane. Pierwotnym przeznaczeniem tabel była i jest
prezentacja serii danych o róŜnych powtarzających się typach. Do układania zwykłych elementów na stronie
2008-02-07 18:46:56
Strona 5
lepiej nadaje się CSS i takie własności jak: pozycjonowanie, ustawienie, przyleganie, rozmiary, marginesy i inne.
Zobacz: Szablon strony na DIV-ach.
Wadą powyŜszego rozwiązania jest to, Ŝe taką samą strukturę musimy umieścić na kaŜdej pojedynczej podstronie
naszego serwisu, co znacznie utrudnia późniejszą modyfikację szaty graficznej. Na szczęście wiele edytorów
HTML obsługuje tzw. szablony. Jest to mechanizm, pozwalający modyfikować jednocześnie wiele stron, na
których umieszczono taki sam fragment kodu (chodzi tutaj o spis treści, banner itp.). Zwykle szablony pracują
poprzez wklejenie na kaŜdej ze stron takiego samego nagłówka (na początku) oraz stopki (na końcu). W kodzie
powyŜej nagłówek został napisany kolorem niebieskim, natomiast stopka - zielonym. Kolor czarny oznacza
tekstową zawartość konkretnej strony, którą wpisujemy bez uŜycia szablonu.
Strona niezaleŜna od rozdzielczości ekranu
W powyŜszym kodzie ustalono szerokość tabeli równą 100%, czyli będzie ona zajmowała zawsze całą szerokość
okna przeglądarki (minus marginesy) bez względu na rozdzielczość, w jakiej pracuje uŜytkownik. Takie podejście
powoduje jednak, Ŝe tekst i inne elementy strony są inaczej ustawione w róŜnych rozdzielczościach ekranu. W
niektórych przypadkach moŜe to zupełnie popsuć całą estetykę serwisu. Dlatego bardzo często szerokość głównej
tabeli strony ustala się nie w procentach ale w pikselach, przy czym dopasowuje się ją tak, aby w najniŜszej z
popularnych rozdzielczości (800x600) nie pojawiał się poziomy suwak do przewijania strony. NaleŜy przy tym
zauwaŜyć, Ŝe wartość 800 jest zbyt duŜa, poniewaŜ w oknie przeglądarki musi się jeszcze zmieścić pionowy
suwak oraz miejsce na marginesy strony, które moŜna z resztą ustalić "na zero", jednak i tak zaleca się pewien
niewielki zapas bezpieczeństwa. Zwykle największą moŜliwą szerokością przy zerowych marginesach jest 770
pikseli. Tabelkę taką moŜna wyśrodkować i wtedy w wyŜszych rozdzielczościach (np. 1024x768) pojawią się puste
przestrzenie po bokach strony, jednak wszystkie elementy treści będą poukładane dokładnie tak samo, a więc
otrzymamy stronę "niezaleŜną" od rozdzielczości ekranu. To duŜo efektywniejsze rozwiązanie niŜ budowa
osobnych wersji serwisu dla kaŜdej rozdzielczości.
Do uzyskania takiego efektu, lepszym rozwiązaniem od tabel jest uŜycie bloków, np.:
<body style="text-align: center; margin: 0; padding: 0">
<div style="width: 770px; margin: 0 auto; text-align: left">
</div>
</body>
Stosowanie tabel ma jedną zasadniczą wadę: Microsoft Internet Explorer 7.0 wyświetla zawartość tabeli dopiero
kiedy zostanie ona całkowicie wczytana. Oznacza to, Ŝe zanim nie załaduje się cała treść strony, w oknie
przeglądarki nic nie zobaczymy. Wczytywanie moŜe trwać długo i uŜytkownicy mogą się zniechęcić. Problem ten
nie występuje na zwykłych stronach, gdzie najpierw wyświetlany jest początek strony, a dalsza część jest
doczytywana w czasie, kiedy uŜytkownik czyta wstęp. Identyczny efekt uzyskamy w kaŜdej przeglądarce, jeŜeli
zbudujemy stronę opierając się na moŜliwościach CSS, a nie na tabelach. Zarówno Netscape/Mozilla/Firefox jak i
Opera potrafią ładować treść tabeli stopniowo, ale Microsoft Internet Explorer 7.0 niestety nie.
Niedogodności tej są pozbawione ramki (i to niezaleŜnie od przeglądarki). Pozwalają one uzyskać podobną
strukturę strony, ale nie posiadają szeregu wad związanych z tabelami, takich jak: zwiększenie objętości stron
(wydłuŜenie wczytywania), problemy z treścią która nie mieści się w szerokości ekranu (psuje to całą estetykę
strony), zaleŜność przewijania treści menu oraz zawartości strony, kłopoty z szablonami (nie potrafią modyfikować
2008-02-07 18:46:56
Strona 6
róŜniącej się treści), zawiła struktura strony. Jednak niektóre osoby uwaŜają ramki za "niemodne". W takim
przypadku rozwiązaniem moŜe okazać się kompromis - połączenie tabelek i ramek w jednym szablonie (ostatnio
bardzo popularne rozwiązanie, stosowane na wielu stronach):
<table width="750" align="center" cellspacing="0" cellpadding="10">
<tr>
<td bgcolor="kolor góra" colspan="2" align="center" valign="middle">Tutaj moŜna umieścić logo serwisu</
td>
</tr>
<tr>
<td bgcolor="kolor menu" width="150" valign="top">

<a target="strona" href="home.html">Strona główna</a><br />
<a target="strona" href="strona1.html">Rozdział 1</a><br />
<a target="strona" href="strona2.html">Rozdział 2</a><br />
<a target="strona" href="linki.html">Linki</a><br />
<a href="mailto:[email protected]">Kontakt</a><br>

</td>
<td bgcolor="kolor strony" valign="top"><iframe name="strona" src="home.html" width="560" height="440"
frameborder="0"></iframe></td>
</tr>
</table>
Taki sposób budowania struktury strony jednak teŜ nie jest pozbawiony wad. Na ekranie mogą pojawić się dwa
pionowe suwaki do przewijania strony, co sprawia kłopoty w mniejszych rozdzielczościach, a w większych
okienko do wczytywania treści kolejnych stron moŜe mieć niewystarczającą wysokość. Problem moŜna jednak w
całości rozwiązać za pomocą skryptu AutoIFRAME.
Ramki
Innym ciekawym zastosowaniem tabel jest tworzenie "ramek" z zaokrąglonymi bądź ściętymi rogami.
Lepszym rozwiązaniem będzie uŜycie CSS, poniewaŜ tabele nie zostały zaprojektowane z myślą o tworzeniu
efektów graficznych na stronach.
Aby wstawić na stronę taki element trzeba najpierw narysować w dowolnym programie graficznym wszystkie
cztery naroŜniki, np.:
Warto równieŜ wykonać przezroczysty obrazek GIF o rozmiarach 1x1 piksel, który posłuŜy nam do usunięcia
efektu nieestetycznie wyglądających pustych komórek tabeli. Brak zawartości komórki moŜe spowodować jej
błędne wyświetlenie, a wstawienie tam tekstu - zbyt duŜe jej rozciągnięcie!
Tutaj jest obrazek:
.
(w celu ułatwienia skopiowania jest sztucznie powiększony oraz dodano obramowanie)
Następnie tworzymy tabelę z trzema kolumnami i trzema wierszami. W komórkach naroŜnych wstawiamy
narysowane wcześniej obrazki, natomiast w pozostałych komórkach ustalamy kolor tła, taki sam jak kolor
rysunków naroŜników i umieszczamy przezroczysty obrazek. W komórce centralnej wpisujemy właściwą treść
tabelki:
2008-02-07 18:46:56
Strona 7
<table cellpadding="0" cellspacing="0">
<tr><td style="line-height: 1px"><img src="lg.gif" alt="" /></td><td bgcolor="#426B9C" style="lineheight: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pg.gif" alt="" /></
td></tr>
<tr><td bgcolor="#426B9C"><img src="0.gif" alt="" /></td><td bgcolor="#426B9C">
<font color="#C0FFFF"><b>Tabelka z zaokrąglonymi rogami</b></font>
</td><td bgcolor="#426B9C"><img src="0.gif" alt="" /></td></tr>
<tr><td style="line-height: 1px"><img src="ld.gif" alt="" /></td><td bgcolor="#426B9C" style="lineheight: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pd.gif" alt="" /></
td></tr>
</table>
Efekt:
Tabelka z zaokrąglonymi rogami
To samo z obramowaniem - dla pokazania zasady:
Tabelka z zaokrąglonymi rogami
ZauwaŜ, Ŝe aby otrzymać taki efekt wystarczy narysować cztery małe obrazki (w przykładzie o rozmiarach
10x10 pikseli), dzięki czemu nie spowalniają one zbytnio ładowania strony, a tabelka moŜe mieć dowolne
wymiary, zaleŜne od długości wpisanego w niej tekstu.
Ustalając róŜne kolory tła w odpowiednich komórkach tabeli, moŜna równieŜ uzyskać np. taki efekt:
Dwukolorowa tabelka
z zaokrąglonymi rogami
Inne ciekawe przykłady:
Tylko dwa naroŜniki zaokrąglone
<table cellpadding="0" cellspacing="3">
Obramowanie
<table border="x">... </table>
gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).
2008-02-07 18:46:56
Strona 8
Dodaje obramowanie pomiędzy komórkami tabeli, czyli pionowe i poziome linie dzielące poszczególne wiersze
oraz kolumny. Pozwala określić szerokość zewnętrznej części tego obramowania.
Przykład:
Po wpisaniu:
<table border="5">
<tr>
<td>komórka1</td>
</tr>
<tr>
<td>komórka3</td>
</tr>
</table>
<td>komórka2</td>
<td>komórka4</td>
otrzymamy:
komórka1 komórka2
komórka3 komórka4
Marginesy w komórkach
<table border cellpadding="x">...</table>
gdzie "x" oznacza szerokość marginesu (w pikselach).
Komenda wprowadza dodatkowe marginesy (poziome i pionowe) we wszystkich komórkach tabeli, przez co
wygląda ona bardziej estetycznie.
Przykład:
<table border="5" cellpadding="10">
komórka1
komórka2
komórka3
komórka4
Odstępy między komórkami
<table cellspacing="x">... </table>
gdzie "x" oznacza szerokość odstępu między sąsiednimi komórkami (w pikselach).
2008-02-07 18:46:56
Strona 9
Znacznik ten umoŜliwia wprowadzenie dodatkowych odstępów pomiędzy wszystkimi sąsiadującymi komórkami
tabeli. Aby zobaczyć róŜnicę pomiędzy tego typu odstępami a marginesami wewnątrz komórek, trzeba nadać tabeli
obramowanie.
Przykład:
<table border="5" cellspacing="10">
komórka1 komórka2
komórka3 komórka4
Komórki nagłówkowe
1. Nagłówek poziomy
<table>
<tr>
<th>... </th>
<th> ...</th>
<td>... </td>
<td> ...</td>
<td>... </td>
<td> ...</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
2. Nagłówek pionowy
<table>
<tr>
<th>... </th>
<td> ...</td>
<td> ...</td>
<th>... </th>
<td> ...</td>
<td> ...</td>
</tr>
<tr>
</tr>
</table>
3. Nagłówek mieszany
<table>
<tr>
<th></th>
<th> ...</th>
<th>... </th>
</tr>
<tr>
<th>... </th>
<td> ...</td>
<td> ...</td>
2008-02-07 18:46:56
Strona 10
</tr>
<tr>
<th>... </th>
<td> ...</td>
<td> ...</td>
</tr>
</table>
Komórkę nagłówkową <th>...</th> wstawia się tak samo jak zwykłą komórka tabeli <td>...</td>.
RóŜni się jedynie tym, Ŝe tekst do niej wpisany, jest napisany zwykle czcionką pogrubioną oraz ustawiony na
środku (wyśrodkowany). Dlatego właśnie - jak sama nazwa wskazuje - komórka taka nadaje się do tworzenia
nagłówka tabeli. MoŜe się ona znajdować w dowolnym wierszu - nie tylko w pierwszym. Dodatkowo w wierszu
takim mogą się znajdować równieŜ inne zwykłe komórki <td>...</td>. Dzięki temu moŜemy stworzyć
pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli.
ChociaŜ identyczny efekt wizualny moŜna uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (<td
align="center"><b>...</b></td>), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe
<th>...</th> oprócz efektu wizualnego niosą ze sobą waŜne znaczenie semantyczne.
Przykład:
A
B
komórka1 komórka2
komórka3 komórka4
1 komórka1 komórka2
A
B
Dla bardzo obszernych tabel, z duŜą ilością komórek nagłówkowych, przydatne moŜe się okazać, określenie
atrybutu title="tekst" dla kaŜdej zwykłej komórki <td>. Jako wartość tego atrybutu podajemy tekst, który
powinien pojawić się na ekranie w dymku podpowiedzi, kiedy uŜytkownik wskaŜe myszką określoną komórkę
tabeli. MoŜna wpisać tam treść nagłówka, do którego naleŜy dana komórka. Ułatwi to czytanie, jeśli komórki
nagłówkowe znikną juŜ z ekranu, z powodu zbyt długiej tabeli. Jest to bardzo przydatna funkcja zwłaszcza, jeśli
tabela posiada duŜo kolumn.
Przykład:
WskaŜ myszką dowolną zwykłą komórkę poniŜszej tabeli:
2008-02-07 18:46:56
A
Strona 11
B
Przy okazji: zwróć uwagę na komórkę powyŜszej tabeli, która znajduje się w jej lewym-górnym rogu (na samym
brzegu). Wygląda ona inaczej niŜ pozostałe, poniewaŜ nie posiada wewnętrznego obramowania. Dzieje się tak
dlatego, bo nie ma tam Ŝadnej treści. Jeśli chcemy to zmienić, naleŜy wpisać do niej:  . Jest to
znak specjalny, oznaczający niełamliwą spację. Nie pojawi się on na ekranie, ale za to wprowadzi obramowanie do
pustej komórki tabeli.
A
B
Tytuł tabeli
<table>
<caption align="ustawienie">Tu podaj tytuł</caption>
(...)
</table>
gdzie jako "ustawienie" naleŜy podać:
"top" - tytuł górny (domyślnie)
"bottom" - tytuł dolny
"left" - ustawienie przy lewej krawędzi tabeli
"right" - przy prawej krawędzi
"center" - na środku
Polecenie to stwarza Ci moŜliwość nadania tytułu w formie nagłówka nad bądź podpisu pod tabelą. który moŜe być
umiejscowiony na górze (domyślnie) lub na dole tabeli.
Element CAPTION musi się znajdować zaraz po znaczniku TABLE!
Niektóre przeglądarki mają problemy z interpretacją atrybutów align="left" i align="right". Dodatkowo
Netscape 6 wyświetla tytuły tabeli zawsze czcionką 'Times New Roman' koloru czarnego (w Netscape 7 wszystko
jest w porządku).
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
To jest tytuł tabeli
komórka1 komórka2
komórka3 komórka4
2008-02-07 18:46:56
Strona 12
Wymiary
1. Wymiary całej tabeli
<table width="x " height="y ">... </table>
lub
<table width="x%" height="y% ">... </table>
2. Wymiary pojedynczej komórki
<table>
<tr>
<td width="x " height="y">... </td>
</tr>
</table>
lub
<table>
<tr>
<td width="x%" height="y%">... </td>
</tr>
</table>
We wszystkich przypadkach "x" oznacza szerokość w pikselach, a "x%" szerokość w procentach całego ekranu lub
względem wymiarów elementu nadrzędnego.
Analogicznie "y" oraz "y%" oznaczają wysokość.
Komenda pozwala narysować tabelę o dokładnie zamierzonych wymiarach (długości i wysokości). Jeśli zaleŜy nam
na tym, aby nasza tabela wyglądała zawsze tak samo (niezaleŜnie od rozdzielczości ekranu), powinniśmy podawać
wymiary w procentach powierzchni ekranu (x%, y%). Natomiast jeŜeli tabela ma mieć stały rozmiar bezwzględny
(zawsze tyle samo pikseli), musimy podawać długość i wysokość w pikselach ekranowych (x, y). Oczywiście jeśli
określimy wysokość/szerokość pojedynczej komórki, spowoduje to ustalenie takiej samej wysokości/szerokości dla
całego wiersza/kolumny.
UWAGA! Podczas drukowania strony, tabela która nie mieści się w szerokości arkusza papieru,
najprawdopodobniej zostanie "ucięta"!
Atrybut HEIGHT dla znacznika TABLE nie wchodzi w skład specyfikacji HTML 4.01.
Atrybuty WIDTH oraz HEIGHT dla komórki tabeli (TD) są zdeprecjonowane przez specyfikację HTML 4.01 zaleca się stosowanie stylów.
Przykład:
<table border="1" width="400" height="150">
2008-02-07 18:46:56
Strona 13
komórka1
komórka2
komórka3
komórka4
komórka1 komórka2
komórka3 <td width="400" height="100">
Wyrównanie tabeli
<table align="rodzaj ">...</table>
gdzie jako "rodzaj" naleŜy wpisać:
"left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu
"right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu
"center" - wyśrodkowanie tabeli
Polecenie to pozwala umiejscowić tabelę w wybranym przez nas miejscu na ekranie.
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów (dla
uzyskania efektu wyśrodkowania zobacz: Szerokość i marginesy automatyczne - "Elementy blokowe, niezastępowane" - punkt 3).
Przykład:
komórka1 komórka2 align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left",
komórka3 komórka4 align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left"...
align="right", align="right", align="right", align="right", align="right", align="right",
komórka1 komórka2
komórka3 komórka4
align="right", align="right", align="right", align="right", align="right", align="right", align="right",
2008-02-07 18:46:56
Strona 14
align="right", align="right", align="right", align="right"...
align="center"
komórka1 komórka2
komórka3 komórka4
Wyrównanie zawartości tabeli
1. Wyrównanie zawartości całego wiersza
<table>
<tr align="rodzaj " valign="ustawienie">...</tr>
</table>
2. Wyrównanie zawartości pojedynczej komórki
<table>
<tr>
<td align="rodzaj " valign="ustawienie">...</td>
</tr>
</table>
W obu przypadkach naleŜy podać:
rodzaj
"left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie)
"right" - wyrównanie zawartości do prawej
"center" - wyśrodkowanie zawartości
ustawienie
"top" - ustawienie zawartości (wiersza lub komórki) na górze
"bottom" - ustawienie zawartości na dole
"middle" - ustawienie zawartości po środku (domyślnie)
Dzięki tym poleceniom moŜliwe jest podanie umiejscowienia zawartości całego wiersza tabeli, jak równieŜ
pojedynczej komórki.
Przykład:
Dla pierwszego wiersza <tr align="right" valign="bottom">
2008-02-07 18:46:56
Strona 15
komórka1
komórka3
komórka2
komórka4
komórka1 komórka2
<td align="right"
valign="bottom ">
komórka3
Kolor tła
1. W całej tabeli
<table bgcolor="kolor">...</table>
2. W jednym wierszu
<table>
<tr bgcolor="kolor">...</tr>
</table>
3. W pojedynczej komórce
<table>
<tr>
<td bgcolor="kolor">...</td>
</tr>
</table>
We wszystkich przypadkach jako "kolor" naleŜy podać definicję koloru [zobacz: Kolory].
Komenda umoŜliwia Ci podanie koloru tła: w całej tabeli, w jednym (lub kilku) wierszach bądź w pojedynczej
komórce. [zobacz: Kolory].
Atrybut BGCOLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
<table border="1" bgcolor="lime">
komórka1 komórka2
komórka3 komórka4
Dla pierwszego wiersza <tr bgcolor="red">
2008-02-07 18:46:56
Strona 16
komórka1 komórka2
komórka3 <td bgcolor="yellow">
Tło obrazkowe
1. W całej tabeli
<table background="ścieŜka dostępu">... </table>
<table>
<tr>
<td background="ścieŜka dostępu">...</td>
</tr>
</table>
We wszystkich przypadkach jako "ścieŜka dostępu" naleŜy podać lokalizację na dysku, gdzie znajduje się Ŝądany
obrazek.
Polecenie pozwala na podanie obrazka, który zostanie umieszczony w tle całej tabeli bądź w pojedynczej komórce.
Określenie tła w całej tabeli w Netscape 6 skutkuje tym, Ŝe odstępy między komórkami nie zostaną wypełnione
(w Netscape 7 wszystko jest w porządku)!
Atrybut BACKGROUND nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
komórka1
komórka2
komórka3
komórka4
komórka1
komórka2
komórka3
komórka4
2008-02-07 18:46:56
Strona 17
Kolor obramowania
(tylko Internet Explorer!)
1. W całej tabeli
<table bordercolor="kolor">...</table>
<table bordercolorlight="kolor1">... </table>
<table bordercolordark="kolor2 ">...</table>
2. W jednym wierszu
<table>
<tr bordercolor="kolor">... </tr>
</table>
<table>
<tr bodercolorlight="kolor1 ">... </tr>
</table>
<table>
<tr bordercolordark="kolor2 ">... </tr>
</table>
<table>
<tr>
<td bordercolor="kolor">...</td>
</tr>
</table>
<table>
<tr>
<td bordercolorlight="kolor1 ">... </td>
</tr>
</table>
<table>
<tr>
<td bordercolordark="kolor2">...</td>
</tr>
</table>
We wszystkich przypadkach jako "kolor, kolor1, kolor2" naleŜy podać definicję koloru [zobacz: Kolory], przy
czym:
2008-02-07 18:46:56
Strona 18
kolor
Oznacza kolor, jaki będzie miało całe obramowanie
kolor1
Oznacza kolor, jaki będzie miała "oświetlona" część tabeli (lewa oraz górna krawędź obramowania bordercolorlight="...")
kolor2
Oznacza kolor, jaki będzie miała "ocieniona" część tabeli (prawa oraz dolna krawędź obramowania bordercolordark="...")
Polecenie to umoŜliwia Ci podanie koloru obramowania tabeli (jako całości, a takŜe w pojedynczych komórkach).
MoŜesz równieŜ zdefiniować kolor cieni w komórkach (standardowo są one kolorów odpowiednio szarego - cień,
białego - oświetlenie).
Atrybuty BORDERCOLOR, BORDERCOLORLIGHT oraz BORDERCOLORDARK nie wchodzą w
skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Blokada zawijania tekstu
<table>
<tr>
<td nowrap="nowrap" >... </td>
</tr>
</table>
Pozwala zablokować automatyczne zawijanie wierszy w wybranych komórkach tabeli, dzięki czemu mogą się w
nich znajdować dowolnie długie linijki. Przełamanie linii i przeniesienie tekstu do następnego wiersza, moŜe
nastąpić tylko po wstawieniu znacznika <br />. NaleŜy jednak uwaŜnie stosować powyŜsze polecenie - przesadnie
długie komórki tabeli mogą utrudnić czytanie i nie wyglądają estetycznie.
Atrybut NOWRAP jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Łączenie komórek
1. Poziome łączenie komórek
<table>
<tr>
<td colspan="x">... </td>
</tr>
</table>
gdzie "x" oznacza liczbę komórek do połączenia w poziomie.
2. Pionowe łączenie komórek
<table>
<tr>
2008-02-07 18:46:56
Strona 19
<td rowspan="y">... </td>
</tr>
</table>
gdzie "y" oznacza liczbę komórek do połączenia w pionie.
Polecenie to pozwala na poziome lub pionowe łączenie komórek w tabeli, dzięki czemu jedna komórka (połączona)
moŜe się rozciągać na kilka komórek pojedynczych.
Tabela z połączonymi komórkami zawiera mniej znaczników <td>...</td>, poniewaŜ komórka połączona
rozciąga się na kilka zwykłych pojedynczych komórek, tym samym eliminując je. KaŜdy atrybut colspan="x"
lub rowspan="y" eleminuje n-1 komórek pojedynczych (w przyległych kolumnach lub wierszach).
Przykład:
Poziome łączenie komórek:
Dla pierwszej komórki <td colspan="2 ">
(druga komórka nie istnieje, poniewaŜ została połączona z pierwszą)
komórki1,2
komórka3 komórka4
Aby otrzymać powyŜszą tabelę, naleŜy wpisać:
<table border="1">
<tr>
<td colspan="2">komórki1,2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
Pionowe łączenie komórek:
Dla pierwszej komórki <td rowspan="2 ">
(trzecia komórka nie istnieje, poniewaŜ została połączona z pierwszą)
komórki1,3
komórka2
komórka4
Aby otrzymać powyŜszą tabelę, naleŜy wpisać:
<table border="1">
<tr>
<td rowspan="2">komórki1,3</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka4</td>
2008-02-07 18:46:56
Strona 20
</tr>
</table>
Łączenie wierszy w grupy
<table>
<tbody>
<tr>... </tr>
</tbody>
</table>
Łączenie wierszy w grupy umoŜliwia później odnoszenie się do takiej grupy jako do całości.Dzięki temu moŜemy
nadać od razu całej grupie:
1. Określony rodzaj formatowania - ustawienie tekstu w komórkach
<tbody align="rodzaj " valign="ustawienie">...</tbody>
(zobacz: Wyrównanie zawartości tabeli)
2. Kolor tła (nie obsługuje Opera 8)
<tbody bgcolor="kolor">...</tbody>
(zobacz: Kolor tła)
3. Usunąć część krawędzi wewnętrznych w tabeli
(zobacz: Wewnętrzne krawędzie)
W grupę moŜna połączyć dowolną liczbę wierszy. W jednej tabeli moŜe istnieć kilka grup.
JeŜeli umieścimy w tabeli przynajmniej jeden znacznik TBODY, wszystkie wiersze muszą być objęte tego typu
znacznikami! Dla pozostałych komórek naleŜy utworzyć dodatkowy znacznik TBODY, który nie musi posiadać
Ŝadnych atrybutów.
Atrybut BGCOLOR dla znacznika TBODY nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się
stosowanie stylów.
Przykład:
Po wpisaniu:
<table border="1" width="100%">
<tbody align="center">
<tr>
</tr>
<tr>
</tr>
<td>komórka3</td>
<td>komórka6</td>
2008-02-07 18:46:56
</tbody>
<tbody>
<tr>
<td>komórka7</td>
</tr>
</tbody>
</table>
Strona 21
<td>komórka8</td>
<td>komórka9</td>
otrzymamy:
komórka1
komórka2
komórka3
komórka4
komórka5
komórka6
komórka7
komórka8
komórka9
Nagłówek i stopka
Dla tabel często równieŜ podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka - na
dole. Nagłówek tworzymy, przy uŜyciu: <thead>...</thead>, natomiast stopkę: <tfoot>...</tfoot>:
W tebeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast moŜna tam umieścić dowolną
ilość znaczników <tbody>...</tbody> (pozwala to usnąć wewnętrzne krawędzie w grupach).
Znacznik TFOOT musi się znajdować w tabeli przed elementem TBODY, tzn. zaraz na początku - po THEAD.
Umieszczenie stopki na końcu tabeli jest błędem! Ma to na celu ułatwienie renderowania tabeli, zanim wczytają
się jej wszystkie wiersze.
Przykład:
<table border="1">
<thead>
<tr>
<th>A</th> <th>B</th> <th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<td>a</td> <td>b</td> <td>c</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>
</tr>
<tr>
</tr>
</tbody>
<tbody>
<tr>
</tr>
<tr>
</tr>
2008-02-07 18:46:56
Strona 22
<tr>
<td>komórka13</td>
</tr>
</tbody>
</table>
A
B
<td>komórka14</td>
<td>komórka15</td>
C
komórka1 komórka2 komórka3
a
b
c
Łączenie kolumn w grupy
<table>
<colgroup span="x"></colgroup>
<tr>... </tr>
</table>
gdzie "x" oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut span="...",
przyjmie on domyślną wartość "1".
Łączenie kolumn w grupy umoŜliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu moŜemy
nadać od razu całej grupie:
1. Określony rodzaj formatowania - ustawienie tekstu w komórkach (nie obsługuje Netscape 7 i Opera 6)
<colgroup span="x" align="rodzaj " valign="ustawienie"></colgroup>
(zobacz: Wyrównanie zawartości tabeli)
2. Kolor tła (nie obsługuje Netscape 7 i Opera 8)
<colgroup span="x" bgcolor="kolor"></colgroup>
(zobacz: Kolor tła)
3. Usunąć część krawędzi wewnętrznych w tabeli
(zobacz: Wewnętrzne krawędzie)
W grupę moŜna połączyć dowolną liczbę kolumn. W jednej tabeli moŜe istnieć kilka grup.
2008-02-07 18:46:56
Strona 23
Atrybut BGCOLOR dla znacznika COLGROUP nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się
stosowanie stylów.
Przykład:
Po wpisaniu:
<table border="1" style="width: 100%">
<colgroup span="1" align="center" valign="bottom"></colgroup>
<tr>
<td height="50">komórka1</td> <td>komórka2</td> <td>komórka3</td>
</tr>
<tr>
<td height="50">komórka4</td> <td>komórka5</td> <td>komórka6</td>
</tr>
</table>
otrzymamy:
komórka1
komórka4
komórka2
komórka3
komórka5
komórka6
Zewnętrzne krawędzie
<table border="1" frame="typ">... </table>
gdzie jako "typ" naleŜy podać:
1. "void" - usuwa zewnętrzne obramowanie
Przykład:
2. "above" - tylko górna krawędź
Przykład:
3. "below" - tylko dolna krawędź
2008-02-07 18:46:56
Strona 24
Przykład:
4. "lhs" - tylko lewa krawędź
Przykład:
5. "rhs" - tylko prawa krawędź
Przykład:
6. "hsides" - tylko poziome krawędzie
Przykład:
7. "vsides" - tylko pionowe krawędzie
Przykład:
8. "box" - wszystkie krawędzie zewnętrzne (domyślnie)
Przykład:
2008-02-07 18:46:56
Strona 25
Nie obsługuje Opera 6!
Wewnętrzne krawędzie
<table border="1" rules="typ">... </table>
gdzie jako "typ" naleŜy podać:
1. "none" - usuwa wszystkie wewnętrzne krawędzie
Przykład:
2. "rows" - tylko poziome krawędzie w środku tabeli
Przykład:
3. "cols" - tylko pionowe krawędzie w środku tabeli
Przykład:
4. "all" - wszystkie krawędzie wewnętrzne (domyślnie)
Przykład:
5. "groups" - wybrane krawędzie wewnętrzne (grupy).
Aby skorzystać z tego polecenia, naleŜy najpierw podzielić tabelę na grupy (zobacz:
Łączenie wierszy w grupy oraz Łączenie kolumn w grupy).
Nie obsługuje Netscape 6 i Opera 6, natomiast w Operze 7 wszystko jest w porządku, a Netscape 7 nie usuwa
obramowania pomiędzy kolumnami dla rules="groups".
2008-02-07 18:46:56
Strona 26
Przykład:
Po wpisaniu:
<table border="1" cellpadding="5" rules="groups">
<colgroup span="1"></colgroup>
<colgroup span="3"></colgroup>
<tbody>
<tr>
</tr>
</tbody>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
otrzymamy:
Znacznik <colgroup>...</colgroup> łaczy kolumny tabeli strukturalnie. Jeśli chcemy nadać dodatkowe atrybuty dla
poszczególnych pojedynczych kolumn, zachowując jednocześnie wewnętrzne krawędzie tylko pomiędzy grupami,
naleŜy uŜyć wewnątrz grupy znaczników <col />. Odpowiadają one za pojedynczą kolumnę, co pozwala nadać
jej określone atrybuty, bez dodatkowego łączenia kolumn w grupy:
<table border="1" rules="groups">
<colgroup span="2">
<col span="2" valign="top" />
</colgroup>
<colgroup span="2">
<col valign="bottom" />
<col />
</colgroup>
<tr>
<td height="50">komórka1</td>
</tr>
</table>
<td>komórka2</td>
<td>komórka3</td>
<td>komórka4</td>
ZauwaŜ, Ŝe wewnętrzne obramowanie dzieli tylko grupy kolumn (<colgroup>...</colgroup>), a nie
pojedyncze kolumny (<col />):
2008-02-07 18:46:56
komórka1 komórka2
komórka3
Strona 27
komórka4
UWAGA! W kaŜdej grupie kolumn (<colgroup>...</colgroup>) musi być tyle znaczników <col />,
ile wskazuje atrybut span="...", nadany całej grupie, chyba Ŝe równieŜ dla znacznika <col /> nadamy ten
atrybut. Nawet jeśli kolumna nie wprowadza Ŝadnych atrybutów, musi się znaleźć na liście, w przeciwnym razie
tabela zostanie błędnie wyświetlona!
Jeśli nie podamy atrybutu span="..." (dla grupy lub kolumny), zostanie przyjęta jego domyślna wartość, równa
"1".
ZagnieŜdŜanie tabel
<table>
<tr>
<td>
<table>
<tr>
<td>...</td>
</tr>
</table>
</td>
</tr>
</table>
gdzie kolorem czerwonym zaznaczono tabelę główną (nadrzędną), a kolorem zielonym tabelę wewnętrzną
(podrzędną). MoŜliwe jest oczywiście dalsze zagnieŜdŜanie.
Dzięki konstrukcji zagnieŜdŜania tabel, moŜliwe jest zbudowanie wielu tabel "jedna w drugiej". Tabele wewnętrzne
znajdują się w komórkach tabeli zewnętrznej.
ZauwaŜ, Ŝe w składni polecenia powyŜej, tabela podrzędna jest bardziej wcięta (przesunięta w prawo) niŜ
nadrzędna. Nie jest to konieczne, ale bardzo ułatwia tworzenie i czytanie kodu, dlatego polecam uŜywanie takiego
sposobu wpisywania.
Przykład:
komórka1A komórka1B
komórka1C komórka1D
komórka3
komórka2
komórka4
2008-02-07 18:46:56
Strona 28
Przedstawione poniŜej przykłady nie są zalecane, poniewaŜ tabele nie zostały zaprojektowane do tworzenia
efektów wizualnych ani struktury strony. Zaleca się stosowanie CSS.
Jedno z przydatnych zastosowań zagnieŜdŜania tabel:
5 zagnieŜdŜonych tabelek...
A oto praktyczne wykorzystanie zagnieŜdŜania - budowa struktury strony (na biało zaznaczono tabele
zagnieŜdŜone):
LOGO
MENU
- Link 1
- Link 2
- Link 3
TREŚĆ STRONY
Jakis tekst...
MENU 2
- Link
STOPKA
Kod, który naleŜy wpisać, aby otrzymać ostatnią tabelę, jest następujący:
<tr>
<td colspan="2" bgcolor="#808080">
<tr>
<td align="center" valign="middle" bgcolor="white"> <br><b>LOGO</b><br /> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100" valign="top" bgcolor="#A0A0A0">
<tr>
<td bgcolor="white"><b>MENU</b><br />- Link 1<br />- Link 2<br />- Link 3</td>
</tr>
</table>
<br />
<tr>
<td bgcolor="white"><b>MENU 2</b><br />- Link</td>
2008-02-07 18:46:56
Strona 29
</tr>
</table>
</td>
<td valign="top" bgcolor="#C0C0C0">
<tr>
<td height="100%" valign="top" bgcolor="white"><b>TREŚĆ STRONY</b><br /><br /
>Jakis tekst...</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#808080">
<tr>
<td align="center" valign="middle" bgcolor="white"><b>STOPKA</b></td>
</tr>
</table>
</td>
</tr>
</table>
Quiz
Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ.
2008-02-07 18:46:56

Kurs HTML - HTML

Transkrypt

Podobne dokumenty

Krzysztof Czerwonka – Kurs HTML

Robert Kubica DRUGI w Monte Carlo - Polak w Northampton

KURS HTML1

DRINKWATER w akcji - zobacz klipy - Polak w Northampton

Potrzebne polecenia

Całość notatek w wersji PDF dostępna TUTAJ.

czereśnia antyczna antique cherry szafa 2-drzwiowa 2

TABELE W HTML 1. Podstawowy kod tabeli: <table