Kolor obramowania

• w całej tabeli

<table bordercolor="kolor">...</table>
<table bordercolorlight="kolor1">...</table>
<table bordercolordark="kolor2">...</table>

przykład

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>

przykład

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>

przykład

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

przykład

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