background image

Tabele
w HTML

Dawidowicz Paweł

background image

Struktura tabeli

<table>...</table>

znacznik tabeli

<tr>...</tr>

znacznik wiersza

<td>...</td>

znacznik pojedynczej komórki

W miejsce kropek należy wpisać treść poszczególnych 

komórek tabeli. 

background image

Obramowanie

<table border="x">...</table> 

gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w 
pikselach).

background image

Odstępy między komórkami

<table cellspacing="x">...</table> 

gdzie "x" oznacza szerokość odstępu między sąsiednimi 
komórkami (w pikselach)

background image

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 

background image

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ść.

background image

Łą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> <td rowspan="y">...</td> </tr> 
</table> 

gdzie "y" oznacza liczbę komórek do połączenia w pionie.

background image

Łą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:

background image

Wewnętrzne krawędzie

<table border="1" rules="typ">...</table> 

gdzie jako "typ" należy podać:

1."none" - usuwa wszystkie wewnętrzne krawędzie 
2."rows" - tylko poziome krawędzie w środku tabeli 
3."cols" - tylko pionowe krawędzie w środku tabeli 
4."all" - wszystkie krawędzie wewnętrzne (domyślnie) 
5."groups" - wybrane krawędzie wewnętrzne (grupy).


Document Outline