Optymizm i pesymizm różnią się jedynie w dacie końca świata
Ćwiczenie 5 - Tabele
Zadania do wykonania:
- spakowane pliki do zadań: pliki_5.zip (1,26MB)
W ćwiczeniu 5 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.
7. <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 Krok 1.
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:
- grubość obramowania tabeli podana w pikselach
-
m:
- szerokość marginesów w komórkach podana w pikselach
-
z:
- szerokość odstępu między sąsiednimi komórkami podana w pikselach
-
sposób:
- "left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu
- "right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu
- "center" - wyśrodkowanie tabeli
-
x:
- szerokość tabeli podana w pikselach
- lub w procentach - koniecznie ze znakiem: %
-
y:
- wysokość tabeli podana w pikselach
- lub w procentach - koniecznie ze znakiem: %
-
kolor:
- 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:
- 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:
- "left" - wyrównanie zawartości wiersza do lewej strony (domyślnie)
- "right" - wyrównanie zawartości wiersza do prawej strony
- "center" - wyśrodkowanie zawartości wiersza
-
ustawienie:
- "top" - ustawienie zawartości wiersza u góry
- "bottom" - ustawienie zawartości wiersza na dole
- "middle" - ustawienie zawartości wiersza po środku (domyślnie)
-
kolor:
- 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:
| 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 |
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:
- "left" - wyrównanie zawartości komórki do lewej strony (domyślnie)
- "right" - wyrównanie zawartości komórki do prawej strony
- "center" - wyśrodkowanie zawartości komórki
-
ustawienie:
- "top" - ustawienie zawartości komórki u góry
- "bottom" - ustawienie zawartości komórki na dole
- "middle" - ustawienie zawartości komórki po środku (domyślnie)
-
x:
- szerokość komórki podana w pikselach
- lub w procentach - koniecznie ze znakiem: %
-
y:
- wysokość komórki podana w pikselach
- lub w procentach - koniecznie ze znakiem: %
-
kolor:
- 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:
| 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 |
-
c:
- 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:
- 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:
- "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:
1. Zwykła tabela 5 wierszy na 5 kolumn, bez żadnych atrybutów.
2. Tabela 5 wierszy na 5 kolumn, z obramowaniem.
3. Tabela 5 wierszy na 5 kolumn, z obramowaniem i odstępem między komórkami.
4. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami i marginesami w komórkach.
5. Tabela 5 wierszy na 5 kolumn, z obramowaniem, odstępem między komórkami, marginesami w komórkach i kolorem tła.
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.
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.
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ń: pliki_5.zip (1,26MB).
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.
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.
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).
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.
13. Wyrównanie tekstu w komórkach w różny sposób:
- 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
14. Łączenie komórek w poziomie i pionie. Nie zapomnieć usunąć nadmiarowych komórek z tabeli.
- komórka 1 składa się z dwóch poziomych komórek
- komórka 17 składa się z dwóch pionowych komórek
15. Jeszcze jedno łączenie komórek:
- 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
16. Kolejne tabela do wykonania to zwykła tabela bez żadnych atrybutów, ale z nagłówkami i stopkami. Przypominam o strukturze tabeli - patrz Krok 1.
17. Zagnieżdżanie tabeli. Kolejne tabele można umieszczać w komórkach tabel. Należy wykonać taką konstrukcję:
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:
-
główna tabela:
- 2 kolumny na 3 wiersze
- szerokość tabeli na 100%
- odstępy między komórkami na 5 pikseli
- marginesy w komórkach na 5 pikseli
- komórki w 1 wierszu połączone
- komórki w 3 wierszu połączone
- szerokość pierwszej komórki w drugim wierszu na 100 pikseli
- wyrównanie w pierwszej komórce w drugim wierszu do góry
- wyrównanie w drugiej komórce w drugim wierszu do góry
-
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
-
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
-
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
-
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
źródło: www.kurshtml.boo.pl
Gotowa zagnieżdżona tabela:
Kolejne zadanie to zmodyfikowanie wyglądu serwisu:
Ostatnie zadanie z tabelami to galeria zdjęć - miniatur w tabeli z łączami do dużych zdjęć. Spakowane pliki do zadań: pliki_5.zip (1,26MB).
Oceniany będzie plik tabele.html z wykonanymi wszystkimi krokami to znaczy ze wszystkimi tabelami, wykonanymi po kolei, zgodnie z instrukcjami.
Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.