TABELE

Ogólne ramy tabeli
Definicja tabeli musi być

umieszczona między znacznikami
<TABLE> </TABLE>
W ich ramach są umieszczane

definicje rzędów, definicje

komórek w rzędach, konkretne

dane w komórkach, tytuł tabeli i

nagłówki wierszy i kolumn.

TABELE

Wiersz tabeli
<TR> </TR>
Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy
dla komórek z danymi. W ramach <TABLE> </TABLE>
można umieścić wiele kolejnych definicji wierszy <TR>
</TR>, dla przykładu:
<TABLE>
<TR> </TR>
<TR> </TR>
<TR> </TR>
</TABLE>

ZADANIE 13a

Utwórz plik na bazie poniższego kodu i zdefiniuj w tabeli 5

wierzy tak by na stronie były wyświetlane jedna pod drugą

cyfry 1,2,3,4,5. Plik zapisz pod nazwą zadanie13a.html.

<TABLE>

</TABLE>

</BODY>
</HTML>

TABELE

Komórka w wierszu
<TD> </TD>
Komórka zawiera konkretne dane. Między jej znacznikami można
umieszczać tekst i grafikę. Konkretne komórki są umieszczane między
znacznikami wybranego rzędu, na przykład:
<TABLE>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTM warto
umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje
kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej
tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych
rzędach, co oczywiście nie wpływa na ich faktyczne położenie w
przeglądarce.

ZADANIE 13b

Na bazie pliku zadanie13a.html utwórz

tabelę składającą się z 5 wierszy i

trzech kolumn. Kolejne komórki niech

zawierają:

1aaa 1bbb 1ccc

2aaa 2bbb 2ccc

3aaa 3bbb 3ccc

4aaa 4bbb 4ccc

5aaa 5bbb 5ccc

TABELE

Obramowanie tabeli
Aby tabela zawierała naokoło
obramowanie, wystarczy rozszerzyć
definicję o parametr BORDER. Jeśli nie
podamy szerokości obramowania,
przyjmowana jest jej domyślna
wartość.
<TABLE BORDER> </TABLE>

TABELE

Obramowanie tabeli
Gdybyśmy podali szerokość
obramowania w pikselach, zostanie
ona odpowiednio zinterpretowana
przez przeglądarkę, na przykład:
<TABLE BORDER=10> </TABLE>

ZADANIE 13c

Obramuj

tabelę

utworzoną

poprzednim ćwiczeniu linią o grubości 5

pikseli.

Plik

zapisz

pod

nazwą

zadanie13c.html.

TABELE

Obramowanie komórek
Aby komórki (nie tabela!) zawierały
inne obramowanie niż domyślne,
możemy użyć parametru CELLSPACING
(de facto jest to odległość między
komórkami).
<TABLE BORDER CELLSPACING=8>
</TABLE>

ZADANIE 13d

Obramuj komórki utworzonej tabeli

obramowaniem o grubości 4. Zapisz

zadanie w pliku zadanie13d.html.

Następnie zmień grubość na 16 i

zobacz różnice. Zapisz zmiany.

TABELE

Marginesy dla komórek
Jeśli uznamy, że odstęp między

zawartością komórki a jej

obramowaniem jest zbyt mały,

możemy użyć parametru

CELLPADDING (domyślnie wynosi on

1).
<TABLE BORDER CELLSPACING=5

CELLPADDING=15> </TABLE>

ZADANIE 13e

Utwórz tabelę z następującymi danymi. Obramuj

komórki obramowaniem 5 i ustal marginesy na 10.
Zadanie zapisz w pliku zadanie13e.html.

Nazwisko

imię

wiek

Abecki

Adam

Babecka

Barbara

Cabecki

Cezary

Dabecka

Danuta

TABELE

Całkowitą szerokość tabeli na

stronie możemy zdefiniować przy

pomocy parametru:
WIDTH
Podany parametr jest "silniejszy" od

innych parametrów, które wpływają

na szerokość tabeli na ekranie.
<TABLE BORDER WIDTH=600>

</TABLE>

TABELE

Zamiast wartości absolutnej w
pikselach możemy także użyć
wartości procentowej, np. pół
szerokości ekranu przeglądarki.
<TABLE BORDER WIDTH=50%>
</TABLE>

ZADANIE 13f

Zmień szerokość tabeli z poprzedniego ćwiczenia tak

by tabela była wyświetlana na całej szerokości okna
przeglądarki. Plik zapisz pod nazwą zadanie13f.html.

Nazwisko

imię

wiek

Abecki

Adam

Babecka

Barbara

Cabecki

Cezary

Dabecka

Danuta

Document Outline

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15

kurs html rozdział V

Document Outline