02 html tabele

background image

1

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)















































































Jak HTML "widzi" tabelę:

Tabele w HTML

Tabela w HTML to zbiór uporządkowanych komórek.























<table>


<tr>

<td>

Komórka 1</td>

<td>Komórka 2</td>

</tr>


<tr>

<td>Komórka 3</td>

<td>Komórka 4</td>

</tr>


</table>

<table> - znacznik tabeli

<tr> -
znacznik wiersza tabeli

<td>-
znacznik komórki tabeli























<table>

<tr>

</tr>




<tr>

</tr>


</table>

<td>

K1

</td>

<td>

K2

</td>

<td>

K3

</td>

<td>

K4

</td>

background image

2

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)
























































Atrybuty tabeli























Obramowanie

<table

border="szerokość obramowania"

>


-

szerokość obramowania, określana w pikselach


<table

border="1"

>

Wyrównanie poziome

<table

align="left/right/center"

>

-

wyrównanie tabeli względem elementu nadrzędnego


<table

align="center"

>

Szerokość

<table

width="%/piksele"

>

-

szerokość tabeli ustawiamy w pikselach lub procentach


<table

width="760"

>

<table

width="100%"

>

Odstępy pomiędzy komórkami

<table

cellspacing="wielkość odstępu

>

-

wielkość odstępu wyrażamy w pikselach

-

0 oznacza brak przestrzeni pomiędzy komórkami tabeli


<table

cellspacing="0"

>

Wewnętrzny margines komórek

<table

cellpadding="wielkość odstępu

>

-

wielkość odstępu wyrażamy w pikselach

-

0 oznacza brak marginesu


<table

cellpadding="10"

>

background image

3

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)
























































Atrybuty wiersza tabeli






















Wyrównanie zawartości komórek*

<tr

align="left/right/center"

>


-

wyrównanie poziome


<tr

valign="top/bottom/middle"

>


-

wyrównanie pionowe

*Atrybuty na poziomie wiersza dotyczą wszystkich komórek w obrębie <tr>

<tr

align="center"

>

<tr

valign="middle"

>

Atrybuty komórki tabeli






















Wyrównanie zawartości komórki

<td

align="left/right/center"

>


-

wyrównanie poziome


<td

valign="top/bottom/middle"

>


-

wyrównanie pionowe

<td

align="center"

>

<td

valign="middle"

>

Szerokość

<td

width="%/piksele"

>

-

szerokość komórki ustawiamy w pikselach lub procentach

<td

width="100"

>

<td

width="10%"

>

Wysokość

<td

height="%/piksele"

>

-

szerokość komórki ustawiamy w pikselach lub procentach

<td

height="100"

>

<td

height="10%"

>

background image

4

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)













































































Scalanie komórek

<td

colspan="liczba komórek"

>


-

scalanie kolumanch


<td

rowspan="liczba komórek"

>


-

scalanie w wierszach

<td

colspan="2"

>

<td

rowspan="3"

>

colspan="2"

ro

w

sp

a

n

=

"3

"

background image

5

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)
























































Zagnieżdżanie tabel


Co to jest zagnieżdżanie tabel ?


















Umieszczanie tabeli wewnątrz komórki innej tabeli.



T1 K3

T2 K1

T2 K2

T2 K3

T2 K4


T1 K4


T1 K2























<table>

<tr>

<td>

<table>

<tr>

<td>

T2 K1

</td>

<td>

T2 K2

</td>

</tr>


<tr>

<td>

T2 K3

</td>

<td>

T2 K4

</td>

</tr>

</table>

</td>

<td>T1 K2</td>

</tr>


<tr>

<td>T1 K3</td>

<td>T1 K4</td>

</tr>

</table>

background image

6

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)
























































Zastosowanie tabel


Budowa szkieletu strony*:

oldtimer club

strona miłośników dawnej motoryzacji



Technika
Samochody
Warsztaty

Członkowie
Zasady








Kontakt

Treść strony...




*Rozwiązanie często zastępowane kombinacją HTML i CSS











Prezentacja typowych danych tabelarycznych:

marka

model

rocznik

cena

mercedes

w123

1984

6000

ford

granada

1978

4500

citroen

2cv

1963

3000

...

















Wyszukiwarka

Podobne podstrony:
02 html tabele
HTML Tabele HTML 12 2004
HTML Tabele
02 swiat p tabeleid 3803 Nieznany (2)
html tabele
Kurs HTML HTML Tabele id 254777
02 html formularze
02 HTML wydruk
język HTML tabele i ramki (19 str)
html tabele
02 swiat p tabele
02 html formularze
Bilet sieciowy imienny tabele od 2013 02 18
Bilet warszawski tabele od 2013 02 18
spr HTML 02

więcej podobnych podstron