docPorada:
download 
Reklamacja Transkrypt
Porada:
Tabela jako szablon strony Tabela Struktura tabeli: <table> <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> </tr> </table> Oznaczenia: <table>....</table> <tr>...</tr> <td>komórka</td> <th> </th> znacznik początku i końca tabeli znacznik początku i końca wiersza znacznik początku i końca komórki znacznik początku i końca nagłówka tabeli Porada: Ilość komórek w każdym wierszu musi być taka sama! Przykład 1: struktura tabeli <table border=”1”> <tr> <td>komórka1</td> <td>komórka2</td> </tr> <tr> <td>komórka3</td> <td>komórka4<</td> </tr> </table> Otrzymamy: Tabele wykorzystamy do podzielenia strony na obszary. Zadanie: Skopiuj przykład 1 do programu Notatnik. Zapisz plik pod nazwą tabela.html i obejrzyj efekt. Przykład 2: Tabela jako szkielet strony www <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <table border=”1”> <tr> <td>Baner</td> <td>Logo</td> </tr> <tr> <td>Zapraszam na moją stronę</td> <td>Moja fotka</td> </tr> <tr> <td>Panel wyświetlania podstron</td> <td>Linki</td> </tr> <tr> <td colspan=”2”>Adres pocztowy autora strony</td> </tr> </table> </body> </html> Strona została podzielona na obszary tematyczne, w których uporządkujesz wprowadzane treści. Zadanie: Skopiuj przykład 2 do programu Notatnik i zmodyfikuj poprzednią tabelkę. Zapisz plik i obejrzyj efekt. Szkielet może wyglądać różnie, zależnie od potrzeb. W dalszej części zobaczysz inne propozycje. Teraz poznamy atrybuty tabeli. Atrybuty tabeli o border - do określenia ramki wokół całej tabelki o cellspacing - do określenia odstępu między komórkami o cellpadding - do określenia odstępu między zawartością komórki a jej brzegiem o width i height - do określenia rozmiaru tabeli Przykład 3: atrybuty tabeli <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <table cellspacing=3 cellpadding=5 width=100% height=100% border=”1”> <tr> <td>Baner</td> <td>Logo</td> </tr> <tr> <td>Zapraszam na moją stronę</td> <td>Moja fotka</td> </tr> <tr> <td>Panel wyświetlania podstron</td> <td>Linki</td> </tr> <tr> <td colspan=”2”>Adres pocztowy autora strony</td> </tr> </table> </body> </html> Zadanie: Do poprzedniego pliku dopisz atrybuty tabeli. Przykład 4: atrybuty dla rzędów i komórek o o height - wysokość rzędu bgcolor - kolor tła Dla komórek możemy określić: o width - szerokość komórki o bgcolor - kolor tła o align - sposób wyrównywania zawartości komórki (left, center, right) o valign - sposób wyrównywania zawartości komórki w pionie (top, center, bottom) <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <table cellspacing=0 cellpadding=2 width=100% height=100% border=”1”> <tr bgcolor=#ffffcc height=60px> <td>Baner</td> <td>Logo</td> </tr> <tr> <td bgcolor=#fff9e5 valign=bottom align=center width=80% height=50px>Zapraszam na moją stronę</td> <td>Moja fotka</td> </tr> <tr> <td valign=top>Panel wyświetlania podstron</td> <td>Linki</td> </tr> <tr> <td colspan=”2” height=20px valign=middle align=center >Adres pocztowy autora strony</td> </tr> </table> </body> </html> Zadanie: Skopiuj przykład 4 do poprzedniej tabeli, zapisz i obejrzyj efekt. Zauważ różnice w wielkości komórek i w rozmieszczeniu w nich tekstu. Łączenie komórek Ostatnia komórka zbudowana jest z dwóch połączonych razem. Połączenie uzyskujemy przy użyciu wartości: o colspan - to połączenia kilku komórek znajdujących się w sąsiadujących kolumnach np. colspan=”2” o rowspan - to połączenia kilku komórek znajdujących się w sąsiadujących rzędach Przykład 5: łączenie komórek <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <table cellspacing=2 cellpadding=2 border=1 width=100% height=100%> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan=2>3</td> <td rowspan=2>4</td> </tr> </table> </body> </html> Zadanie: Wykonaj łączenia komórek, tak aby otrzymać następujący efekt; Zadanie zaliczeniowe: Na podstawie materiału zawartego w lekcji zbuduj szkielet strony w postaci tabeli wg wzoru. Ustawienie i łączenie komórek wg własnego pomysłu.
