docTemat 2: Tabela jako szablon strony Zadanie 4:
download 
Reklamacja Transkrypt
Temat 2: Tabela jako szablon strony Zadanie 4:
Temat 2: Tabela jako szablon strony Tabela Struktura tabeli: <table> <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> </tr> </table> Porada: Ilość komórek w każdym wierszu musi być taka sama! Przykład 7: 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 4: Skopiuj przykład 8 do programu Notatnik. Zapisz plik pod nazwą tabela.html i obejrzy efekt. Przykład 8: szkielet 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 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. 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 9: 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 5: Do poprzedniego pliku dopisz atrybuty tabeli (zapisane czerwoną czcionką I zobacz jaka jest szerokość I wysokość tabeli oraz odległości w komórkach. Przykład 10: atrybuty dla rzędów i komórek o height - wysokość rzędu o bgcolor - kolor tła Porada: Ustawienia dotyczą wszystkich komórek wewnątrz rzędu. 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 6: Skopiuj przykład 10, 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 11: łą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 zaliczeniowe nr 2: 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.
