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
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.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Language" CONTENT="pl" />
</HEAD>
<BODY>
<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ą
w
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.
lp
Nazwisko
imię
wiek
1
Abecki
Adam
25
2
Babecka
Barbara
23
3
Cabecki
Cezary
17
4
Dabecka
Danuta
19
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.
lp
Nazwisko
imię
wiek
1
Abecki
Adam
25
2
Babecka
Barbara
23
3
Cabecki
Cezary
17
4
Dabecka
Danuta
19