HTML - Tabele
Struktura tabeli
<table>
<tr>
<td>...</td> <td>...</td>
</tr>
<tr>
<td>...</td> <td>...</td>
</tr>
</table>
Jest to najprostsza tabela, gdzie:
<table>...</table>
jest znacznikiem tabeli
<tr>...</tr>
jest znacznikiem wiersza
<td>...</td>
jest znacznikiem pojedynczej komórki
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 znacznikó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>
Przykład:
<table>
<tr>
<td>komórka1</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
Ten kod wkleić między znaczniki html: <html><head></head> <body> ... </body> </html>
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ównoznaczna z:
<table>
<tr>
<td>komórka1</td>
<td>komórka2</td>
</tr>
<tr>
<td>komórka3</td>
<td>komórka4</td>
</tr>
</table>
Obramowanie
<table border="x">...</table>
gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).
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:
<table border=”5”>
<tr>
<td>komórka1</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
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”>
<tr>
<td>komórka1</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
Odstępy między komórkami
<table cellspacing="x">...</table>
gdzie "x" oznacza szerokość odstępu między sąsiednimi komórkami (w pikselach).
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”>
<tr>
<td>komórka1</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
Wymiary
wymiary całej tabeli
<table width="x" height="y">...</table>
lub
<table width="x%" height="y%">...</table>
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.
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.
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.
Wyrównanie zawartości tabeli
wyrównanie zawartości całego wiersza
<table>
<tr align="rodzaj" valign="ustawienie">...</tr>
</table>
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.
Kolor tła
w całej tabeli
<table bgcolor="kolor">...</table>
w jednym wierszu
<table>
<tr bgcolor="kolor">...</tr>
</table>
w pojedynczej komórce
<table>
<tr>
<td bgcolor="kolor">...</td>
</tr>
</table>
Atrybut BGCOLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Tło obrazkowe
w całej tabeli
<table background="ścieżka dostępu">...</table>
w pojedynczej komórce
<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.
Atrybut BACKGROUND nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
*** *** *** *** ***
Kolor obramowania
(tylko Internet Explorer!)
w całej tabeli
<table bordercolor="kolor">...</table>
<table bordercolorlight="kolor1">...</table>
<table bordercolordark="kolor2">...</table>
w jednym wierszu
<table>
<tr bordercolor="kolor">...</tr>
</table>
<table>
<tr bodercolorlight="kolor1">...</tr>
</table>
<table>
<tr bordercolordark="kolor2">...</tr>
</table>
w pojedynczej komórce
<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, przy czym:
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.
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!
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Komórki nagłówkowe tabeli
nagłówek poziomy
<table>
<tr>
<th>...</th> <th>...</th>
</tr>
<tr>
<td>...</td> <td>...</td>
</tr>
<tr>
<td>...</td> <td>...</td>
</tr>
</table>
nagłówek pionowy
<table>
<tr>
<th>...</th> <td>...</td> <td>...</td>
</tr>
<tr>
<th>...</th> <td>...</td> <td>...</td>
</tr>
</table>
nagłówek mieszany
<table>
<tr>
<th></th> <th>...</th> <th>...</th>
</tr>
<tr>
<th>...</th> <td>...</td> <td>...</td>
</tr>
<tr>
<th>...</th> <td>...</td> <td>...</td>
</tr>
</table>
Komórkę nagłówkową <th>...</th> wstawia się tak samo jak zwykłą komórkę 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.
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:
<table>
<tr>
<th></th> <th>A</th> <th>B</th>
</tr>
<tr>
<th>1</th> <td title=”A1”>komórka1</td> <td title=”B1”>komórka2</td>
</tr>
<tr>
<th>2</th> <td title=”A2”>komórka3</td> <td title=”B2”>komórka4</td>
</tr>
</table>
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.
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
łączenie w poziomie
<table>
<tr>
<td colspan="x">...</td>
</tr>
</table>
gdzie "x" oznacza liczbę komórek do połączenia w poziomie.
łączenie w pionie
<table>
<tr>
<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ą)
<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ą)
<table border="1">
<tr>
<td rowspan="2">komórki1,3</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka4</td>
</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:
Określony rodzaj formatowania - ustawienie tekstu w komórkach
<tbody align="rodzaj" valign="ustawienie">...</tbody>
Kolor tła (nie obsługuje Opera 8)
<tbody bgcolor="kolor">...</tbody>
Usunąć część krawędzi wewnętrznych w tabeli
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:
<table border="1" width="100%">
<tbody align="center">
<tr>
<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>
</tr>
<tr>
<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>komórka7</td> <td>komórka8</td> <td>komórka9</td>
</tr>
</tbody>
</table>
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 tabeli 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>
<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>komórka7</td> <td>komórka8</td> <td>komórka9</td>
</tr>
<tr>
<td>komórka10</td> <td>komórka11</td> <td>komórka12</td>
</tr>
<tr>
<td>komórka13</td> <td>komórka14</td> <td>komórka15</td>
</tr>
</tbody>
</table>
Łą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:
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>
Kolor tła (nie obsługuje Netscape 7 i Opera 8)
<colgroup span="x" bgcolor="kolor"></colgroup>
Usunąć część krawędzi wewnętrznych w tabeli
W grupę można połączyć dowolną liczbę kolumn. W jednej tabeli może istnieć kilka grup.
Atrybut BGCOLOR dla znacznika COLGROUP nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Zewnętrzne krawędzie
<table border="1" frame="typ">...</table>
gdzie jako "typ" należy podać:
"void" - usuwa zewnętrzne obramowanie
"above" - tylko górna krawędź
"below" - tylko dolna krawędź
"lhs" - tylko lewa krawędź
"rhs" - tylko prawa krawędź
"hsides" - tylko poziome krawędzie
"vsides" - tylko pionowe krawędzie
"box" - wszystkie krawędzie zewnętrzne (domyślnie)
Nie obsługuje Opera 6!
Wewnętrzne krawędzie
<table border="1" rules="typ">...</table>
gdzie jako "typ" należy podać:
"none" - usuwa wszystkie wewnętrzne krawędzie
"rows" - tylko poziome krawędzie w środku tabeli
"cols" - tylko pionowe krawędzie w środku tabeli
"all" - wszystkie krawędzie wewnętrzne (domyślnie)
"groups" - wybrane krawędzie wewnętrzne (grupy). Aby skorzystać z tego polecenia, należy najpierw podzielić tabelę na 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".
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.
Jedno z przydatnych zastosowań zagnieżdżania tabel:
|
Inne zastosowania tabeli
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> <td align="right">PRAWA</td>
</tr>
</table>
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>
Quiz
http://www.kurshtml.boo.pl/html/quiz,tabele.html