Ćwiczenie 4 - Tabele

Transkrypt

1 Ć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:

2 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

3 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. kolor tła w tabeli - nazwa po angielsku 2. aby uzyskać dokładny kolor i odcień to wartość szesnastkową 3. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru 4. w systemie szesnastkowym jest szesnaście podstawowych cyfr: 5. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 6. przykładowe kolory: nazwa #rrggbb kolor black # silver #c0c0c0 gray # white #ffffff maroon # red #ff0000 purple #800080

4 fuchsia #ff00ff green # lime #00ff00 olive # yellow #ffff00 navy # blue #0000ff teal # aqua #00ffff adres: 1. względna ścieŝka dostępu do pliku graficznego 2. jako tła obrazkowego w tabeli 3. naleŝy wpisać drogę uwzględniając wszystkie foldery 4. wchodząc do folderu wpisujemy jego nazwę/ 5. wychodząc z folderu wpisujemy../ 6. 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

5 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. kolor tła w wierszu - nazwa po angielsku 2. aby uzyskać dokładny kolor i odcień to wartość szesnastkową 3. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru 4. w systemie szesnastkowym jest szesnaście podstawowych cyfr: 5. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 6. 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: %

6 kolor: 1. kolor tła w komórce - nazwa po angielsku 2. aby uzyskać dokładny kolor i odcień to wartość szesnastkową 3. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru 4. w systemie szesnastkowym jest szesnaście podstawowych cyfr: 5. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 6. przykładowe kolory: c: 1. ilość komórek do połączenia w poziomie 2. zamiast kilku komórek będzie jedna rozciągająca się na te kilka 3. wszystkie nadmiarowe komórki naleŝy usunąć z tabeli 4. c-1 komórek usuwamy r: 1. ilość komórek do połączenia w pionie 2. zamiast kilku komórek będzie jedna rozciągająca się na te kilka 3. wszystkie nadmiarowe komórki naleŝy usunąć z tabeli 4. 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. "top" - tytuł górny (domyślnie) 2. "bottom" - tytuł dolny 3. "left" - ustawienie przy lewej krawędzi tabeli 4. "right" - ustawienie przy prawej krawędzi tabeli 5. "center" - ustawienie na środku tabeli

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

8 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.

9 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.

10 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.

11 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.

12 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).

13 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.

14 Krok 13. Wyrównanie tekstu w komórkach w róŝny sposób: 1. zawartość komórek w pierwszym wierszu wyrównana do prawej 2. zawartość komórek w drugim wierszu wyrównana do prawej i do dołu 3. zawartość komórki 11 na środku 4. zawartość komórki 12 wyrównana do prawej 5. zawartość komórki 13 na środku i do dołu 6. zawartość komórki 14 wyrównana do prawej i do góry

15 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

16 Krok 15. Jeszcze jedno łączenie komórek: 1. komórka 1 z dwóch w poziomie 2. komórka 7 z dwóch w pionie 3. komórka 10 z czterech w pionie 4. komórka 16 z czterech w poziomie

17 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ę:

18 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. tabela zagnieŝdŝona w pierwszym wierszu głównej tabeli: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 6. wyrównanie i ustawienie zawartości komórki na środku 1. tabela zagnieŝdŝona w drugim wierszu, w pierwszej komórce: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 1. tabela zagnieŝdŝona w drugim wierszu, w drugiej komórce: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 6. wysokość komórki na 100% 7. wyrównanie zawartości komórki do góry

19 1. tabela zagnieŝdŝona w trzecim wierszu: 2. jeden wiersz i jedna komórka 3. szerokość tabeli na 100% 4. odstępy między komórkami na 5 pikseli 5. marginesy w komórkach na 5 pikseli 6. wyrównanie i ustawienie zawartości na środku Gotowa zagnieŝdŝona tabela wygląda tak:

20 Krok 19. Kolejne zadanie to zmodyfikowanie wyglądu naszej strony internetowej (dowolnie):

21 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.