Ćw4. Tabele

Ćwiczenie 4 - Tabele
W ćwiczeniu tym zajmujemy się tabelami. Tabele moŜna wykorzystywać do róŜnych celów. W tabelach moŜna prezentować dane i je
wyliczać, moŜna ustalić określony układ treści i stworzyć coś w rodzaju szablonu strony, moŜna wreszcie w tabeli umieścić miniatury zdjęć, a od
nich łącza do duŜych zdjęć. Ogólny schemat budowy tabeli za pomocą znaczników wygląda tak:
Znaczniki, które budują tabelę.
1. <table>...</table> - znacznik główny całej tabeli, w nim wszystko się mieści.
2. <tbody>...</tbody> - znacznik, w którym mieści się część główna tabeli.
3. <thead>...</thead> - znacznik, w którym mieści się nagłówek tabeli.
4. <tfoot>...</tfoot> - znacznik, w którym mieści się stopka tabeli.
5. <tr>...</tr> - znacznik wiersza tabeli, w nim umieszczamy komórki.
6. <th>...</th> - znacznik pojedynczej komórki w nagłówku, w nim jest zawarta treść, lub grafika. Komórki nagłówka mogą być ułoŜone
poziomo, pionowo lub w sposób mieszany. Tekst w komórkach nagłówkowych będzie pogrubiony.
4. <td>...</td> - znacznik pojedynczej komórki, w nim jest zawarta treść, lub grafika.
Znaczniki powinny być umieszczane właśnie w takiej kolejności. Stopka zaraz po nagłówku. Patrz wyŜej schemat budowy tabeli.
W znacznikach tabeli moŜna umieszczać dodatkowe atrybuty, takie jak: <table border="n" cellpadding="m" cellspacing="z" align="sposób"
width="x" height="y" bgcolor="kolor" background="adres">...</table>
Atrybuty: align, height, bgcolor, background są zdeprecjonowane, ale tu z nich skorzystamy...
n:
1. grubość obramowania tabeli podana w pikselach
m:
1. szerokość marginesów w komórkach podana w pikselach
z:
1. szerokość odstępu między sąsiednimi komórkami podana w pikselach
sposób:
1. "left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu
2. "right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu
3. "center" - wyśrodkowanie tabeli
x:
1. szerokość tabeli podana w pikselach
2. lub w procentach - koniecznie ze znakiem: %
y:
1. wysokość tabeli podana w pikselach
2. lub w procentach - koniecznie ze znakiem: %
kolor:
1.
2.
3.
4.
5.
6.
kolor tła w tabeli - nazwa po angielsku
aby uzyskać dokładny kolor i odcień to wartość szesnastkową
#rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru
w systemie szesnastkowym jest szesnaście podstawowych cyfr:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
przykładowe kolory:
nazwa
#rrggbb kolor
black
#000000
silver
#c0c0c0
gray
#808080
white
#ffffff
maroon
#800000
red
#ff0000
purple
#800080
fuchsia
#ff00ff
green
#008000
lime
#00ff00
olive
#808000
yellow
#ffff00
navy
#000080
blue
#0000ff
teal
#008080
aqua
#00ffff
adres:
1.
2.
3.
4.
5.
6.
względna ścieŜka dostępu do pliku graficznego
jako tła obrazkowego w tabeli
naleŜy wpisać drogę uwzględniając wszystkie foldery
wchodząc do folderu wpisujemy jego nazwę/
wychodząc z folderu wpisujemy ../
na końcu podajemy nazwę pliku z rozszerzeniem
W znacznikach wiersza moŜna umieszczać takie atrybuty jak: <tr align="sposób" valign="ustawienie" bgcolor="kolor">...</tr>. Align i bgcolor
są zdeprecjonowane, ale tu z nich skorzystamy...
sposób:
1. "left" - wyrównanie zawartości wiersza do lewej strony (domyślnie)
2. "right" - wyrównanie zawartości wiersza do prawej strony
3. "center" - wyśrodkowanie zawartości wiersza
ustawienie:
1. "top" - ustawienie zawartości wiersza u góry
2. "bottom" - ustawienie zawartości wiersza na dole
3. "middle" - ustawienie zawartości wiersza po środku (domyślnie)
kolor:
1.
2.
3.
4.
5.
6.
kolor tła w wierszu - nazwa po angielsku
aby uzyskać dokładny kolor i odcień to wartość szesnastkową
#rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru
w systemie szesnastkowym jest szesnaście podstawowych cyfr:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
przykładowe kolory (tabela powyŜej)
W znacznikach komórki moŜna umieszczać takie atrybuty jak: <td align="sposób" valign="ustawienie" width="x" height="y"
bgcolor="kolor" colspan="c" rowspan="r">...</td>. Align, height i bgcolor są zdeprecjonowane, ale tu z nich skorzystamy...
sposób:
1. "left" - wyrównanie zawartości komórki do lewej strony (domyślnie)
2. "right" - wyrównanie zawartości komórki do prawej strony
3. "center" - wyśrodkowanie zawartości komórki
ustawienie:
1. "top" - ustawienie zawartości komórki u góry
2. "bottom" - ustawienie zawartości komórki na dole
3. "middle" - ustawienie zawartości komórki po środku (domyślnie)
x:
1. szerokość komórki podana w pikselach
2. lub w procentach - koniecznie ze znakiem: %
y:
1. wysokość komórki podana w pikselach
2. lub w procentach - koniecznie ze znakiem: %
kolor:
1.
2.
3.
4.
5.
6.
kolor tła w komórce - nazwa po angielsku
aby uzyskać dokładny kolor i odcień to wartość szesnastkową
#rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru
w systemie szesnastkowym jest szesnaście podstawowych cyfr:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
przykładowe kolory:
c:
1.
2.
3.
4.
ilość komórek do połączenia w poziomie
zamiast kilku komórek będzie jedna rozciągająca się na te kilka
wszystkie nadmiarowe komórki naleŜy usunąć z tabeli
c-1 komórek usuwamy
r:
1.
2.
3.
4.
ilość komórek do połączenia w pionie
zamiast kilku komórek będzie jedna rozciągająca się na te kilka
wszystkie nadmiarowe komórki naleŜy usunąć z tabeli
r-1 komórek usuwamy
Do tabeli moŜna równieŜ dodać tytuł. SłuŜy do tego znacznik <caption>...</caption>. Znacznik <caption>...</caption> naleŜy umieścić
zaraz za znacznikiem <table>. MoŜna uŜyć w nim atrybutu <caption align="sposób">...</caption>. Atrybut align jest zdeprecjonowany, ale tu z
niego korzystamy...
sposób:
1.
2.
3.
4.
5.
"top" - tytuł górny (domyślnie)
"bottom" - tytuł dolny
"left" - ustawienie przy lewej krawędzi tabeli
"right" - ustawienie przy prawej krawędzi tabeli
"center" - ustawienie na środku tabeli
Zadania do wykonania to kolejno tabele:
Krok 1. Zwykła tabela 5 wierszy na 5 kolumn, bez Ŝadnych atrybutów.
Krok 2. Tabela 5 wierszy na 5 kolumn, z obramowaniem.
Krok 3. Tabela 5 wierszy na 5 kolumn, z obramowaniem i odstępem między komórkami.
Krok 4. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami i marginesami w komórkach.
Krok 5. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i dowolnym kolorem tła.
Krok 6. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i róŜnym kolorem tła w
wierszach.
Krok 7. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i róŜnym kolorem tła w
komórkach.
Krok 8. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i tłem obrazkowym z
pliku tlo.jpg. Spakowane pliki do zadań do pobrania ze strony: pliki_cw4.zip
Krok 9. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i tytułem u góry.
Krok 10. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach, tytułem u dołu i
szerokością i wysokością określoną w pikselach.
Krok 11. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach, tytułem u dołu i
szerokością i wysokością określoną w procentach. W przypadku 100% tabela rozciąga się od krawędzi do krawędzi przeglądarki i i na wysokość
tekstu w komórce (wraz z ewentualnymi marginesami w komórce).
Krok 12. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach, tytułem u dołu i
szerokością i wysokością w komórce 3 określoną w pikselach.
Krok 13. Wyrównanie tekstu w komórkach w róŜny sposób:
1.
2.
3.
4.
5.
6.
zawartość komórek w pierwszym wierszu wyrównana do prawej
zawartość komórek w drugim wierszu wyrównana do prawej i do dołu
zawartość komórki 11 na środku
zawartość komórki 12 wyrównana do prawej
zawartość komórki 13 na środku i do dołu
zawartość komórki 14 wyrównana do prawej i do góry
Krok 14. Łączenie komórek w poziomie i pionie. Nie zapomnieć usunąć nadmiarowych komórek z tabeli.
1. komórka 1 składa się z dwóch poziomych komórek
2. komórka 17 składa się z dwóch pionowych komórek
Krok 15. Jeszcze jedno łączenie komórek:
1.
2.
3.
4.
komórka 1 z dwóch w poziomie
komórka 7 z dwóch w pionie
komórka 10 z czterech w pionie
komórka 16 z czterech w poziomie
Krok 16. Kolejne tabela do wykonania to zwykła tabela bez Ŝadnych atrybutów, ale z nagłówkami i stopkami. Przypominam o strukturze tabeli,
która znajduje się na stronie 1.
Krok 17. ZagnieŜdŜanie tabeli. Kolejne tabele moŜna umieszczać w komórkach tabel. NaleŜy wykonać taką konstrukcję:
Krok 18. Tabele zagnieŜdŜone moŜna wykorzystać (choć nie zaleca się tego) do budowy struktury strony WWW z kilkoma stałymi panelami:
górnym, lewym, prawym, głównym i stopką strony. Konstrukcję naleŜy wykonać tak:
1. główna tabela:
2. 2 kolumny na 3 wiersze
3. szerokość tabeli na 100%
4. odstępy między komórkami na 5 pikseli
5. marginesy w komórkach na 5 pikseli
6. komórki w 1 wierszu połączone
7. komórki w 3 wierszu połączone
8. szerokość pierwszej komórki w drugim wierszu na 100 pikseli
9. wyrównanie w pierwszej komórce w drugim wierszu do góry
10. wyrównanie w drugiej komórce w drugim wierszu do góry
1.
2.
3.
4.
5.
6.
tabela zagnieŜdŜona w pierwszym wierszu głównej tabeli:
jeden wiersz i jedna komórka
szerokość tabeli na 100%
odstępy między komórkami na 5 pikseli
marginesy w komórkach na 5 pikseli
wyrównanie i ustawienie zawartości komórki na środku
1.
2.
3.
4.
5.
tabela zagnieŜdŜona w drugim wierszu, w pierwszej komórce:
jeden wiersz i jedna komórka
szerokość tabeli na 100%
odstępy między komórkami na 5 pikseli
marginesy w komórkach na 5 pikseli
1.
2.
3.
4.
5.
6.
7.
tabela zagnieŜdŜona w drugim wierszu, w drugiej komórce:
jeden wiersz i jedna komórka
szerokość tabeli na 100%
odstępy między komórkami na 5 pikseli
marginesy w komórkach na 5 pikseli
wysokość komórki na 100%
wyrównanie zawartości komórki do góry
1.
2.
3.
4.
5.
6.
tabela zagnieŜdŜona w trzecim wierszu:
jeden wiersz i jedna komórka
szerokość tabeli na 100%
odstępy między komórkami na 5 pikseli
marginesy w komórkach na 5 pikseli
wyrównanie i ustawienie zawartości na środku
Gotowa zagnieŜdŜona tabela wygląda tak:
Krok 19. Kolejne zadanie to zmodyfikowanie wyglądu naszej strony internetowej (dowolnie):
Krok 20. Ostatnie zadanie z tabelami to galeria zdjęć - miniatur w tabeli z łączami do duŜych zdjęć. Spakowane pliki do galerii znajdują się w
pliku : pliki_cw4.zip
Oceniany będzie plik tabele.html z wykonanymi wszystkimi krokami to znaczy ze wszystkimi tabelami,
wykonanymi po kolei, zgodnie z instrukcjami. Plik naleŜy przesłać do mnie drogą mailową.
Powodzenia.