Kolor obramowania
• w całej tabeli
<table bordercolor="kolor">...</table>
<table bordercolorlight="kolor1">...</table>
<table bordercolordark="kolor2">...</table>
Kolor obramowania
• w całej tabeli
<table bordercolor="kolor">...</table>
<table bordercolorlight="kolor1">...</table>
<table bordercolordark="kolor2">...</table>
Kolor obramowania
(tylko Internet Explorer!)
• w jednym wierszu
<table><tr bordercolor="kolor">...</tr> </table>
<table><tr bodercolorlight="kolor1">...</tr> </table>
<table><tr bordercolordark="kolor2">...</tr> </table>
Kolor obramowania
(tylko Internet Explorer!)
• 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>
Kolor obramowania
(tylko Internet Explorer!)
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="...")
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
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>
przykład
Komórki nagłówkowe
tabeli
• nagłówek pionowy
<table>
<tr>
<th>...</th> <td>...</td> <td>...</td> </tr>
<tr>
<th>...</th> <td>...</td> <td>...</td> </tr> </table>
przykład
Komórki nagłówkowe
tabeli
• nagłówek mieszany
<table>
<tr>
<th></th>
<th> A </th> <th> B </th> </tr>
<tr>
<th> 1 </th> <td>...</td> <td>...</td> </tr>
<tr>
<th> 2 </th> <td>...</td> <td>...</td> </tr>
</table>
przykład
Komórki nagłówkowe
tabeli
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.
przykład
Przy okazji: zwróć uwagę na komórkę powyższej
tabeli, która znajduje się w jej lewym-górnym rogu
(na samym brzegu) !!!
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.
Łą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
przykład
(druga komórka nie istnieje, ponieważ została
połączona z pierwszą)
Łączenie komórek
• łączenie w pionie
<table>
<tr>
<td rowspan="y">...</td> </tr>
</table>
gdzie "y" oznacza liczbę komórek do połączenia w
pionie
przykład
(trzecia komórka nie istnieje, ponieważ została
połączona z pierwszą)
Łączenie wierszy w
grupy
<table>
<tbody> <tr>...</tr> </tbody>
</table>
przykład
Łą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
Łączenie wierszy w
grupy
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>.
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!
przykład
Łączenie kolumn w
grupy
<table>
<colgroup span="x"> </colgroup> <tr>...</tr>
</table>
Łą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
<colgroup span="x" align="rodzaj"
valign="ustawienie"> </colgroup>
• Kolor tła
<colgroup span="x" bgcolor="kolor"></colgroup>
• Usunąć część krawędzi wewnętrznych w tabeli
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)
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
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
żółtym
tabelę wewnętrzną
(podrzędną).
przykład
Inne zastosowania
tabeli
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>
przykład
Inne zastosowania
tabeli
Innym częstym zastosowaniem tabel jest tworzenie
struktury strony.
<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>
przykład
Quiz