HTML cz.3 Tabele cd. oraz ramki Marcin Blachnik
Tabele przypomnienie <table> </table> Atrybut Wartość Opis align Left Center right Położenie tabeli bgcolor rgb(x,x,x) #xxxxxx colorname Tło tabeli border pixels Grubość obramowania tabeli (border=„0” brak obramowania) cellpadding pixels % Specifies the space between the cell walls and contents cellspacing Specifies the space between cells width % pixels Szerokość tabeli
Tabele przypomnienie <td> </td> - nowa kolumna <tr> </tr> - nowy wiersz Przykład: Żródło Wynik <table border = "1"> <tr> <td>Cell A1</td> <td>Cell B1</td> </tr> <tr> <td>Cell A2</td> <td>Cell B2</td> </tr> </table> Cell A1 Cell B1 Cell A2 Cell B2
Scalanie komórek Parametry - colspan – scalanie komórek w poziomie - rowspan – scalanie komórek w pionie Przykład: <table border = "1"> <tr> <td colspan=2> Cell A1 Cell B1</td> <td>Cell C1</td> </tr> <tr> <td>Cell A2</td> <td>Cell B2</td> <td rowspan=2> Cell C2 Cell C3</td> </tr> <tr> <td>Cell A3</td> <td>Cell B3</td> </table> Cell A1 Cell B1 Cell C1 Cell A2 Cell B2 Cell C2 Cell C3 Cell A3 Cell B3
Ramki podstawy Ramki pozwalają na podział okna przeglądarki, tak by móc w nim wyświetlić jednocześnie kilka niezależnych stron (pojedynczych plików html) Ramki tworzy się w osobnym pliku, definiując sposób podziału okna na ramki. Powoduje to brak sekcji <body> </body> W przypadku pliku definicji ramek mamy jedynie <html> <head> </head> Tu definiujemy ramki </html>
Znacznik <frameset> Znacznik <frameset> używany jest do definicji podziału na ramki – określa parametry oraz liczbę ramek. Atrybut Wartość Opis cols pixels % * Definiuje liczbę i rozmiar kolumn rows Definuje liczbę i rozmiar wierszy
Znacznik <frame> Określa parametry pojedynczej ramki: Atrybut Wartość opis frameborder 0 1 Określa czy wyświetlać granice wokół ramek longdesc URL A URL to a long description of the frame contents. Use it for browsers that do not support frames marginheight pixels Definiuje góry i dolny margines ramki marginwidth Definiuje lewy i prawy margines ramki name Definiuje nazwę ramki noresize Blokuje możliwość zmiany rozmiaru ramki scrolling yes no Auto Definiuje czy mają być wyświetlane paski przewijania src Określa adres URL strony wyświetlanej w ramce
Przykład użycia ramek <html> <head> <title>Strona z ramkami</title> </head> <frameset cols="150,*"> <frame name="lewa" scrolling="no" noresize src="1.htm"> <frameset rows="20%,*"> <frame name="prawagórna" src="2.htm"> <frame name="prawadolna" marginwidth="0" scrolling="auto" src="3.htm"> </frameset> <noframes> <body> <p>Ta strona używa ramek, ale ta przeglądarka nie obsługuje ich.</p> </body> </noframes> </html>
<iframe> </iframe> Ramka pływająca – pozwala na otwieranie strony html wewnątrz innej strony Parametr Wartość Objaśnienie align Left / Right / Top / Middle / Bottom Położenie frameborder 1 / 0 Obramowanie wokół ramki height Pixels / % Wysokość marginheight Pixels Definiuje górny i dolny margines ramki marginwidth Definiuje lewy i prawy margines ramki name frame_name Snazwa ramki scrolling Yes / no / auto Czy mają być paki przewijania src URL Domyślne źródło strony width szerokość
parametr <a target=„?”> _blank – otwarcie linku w nowym oknie _self – otwarcie linku w tej samej ramce w której został kliknięty _parent – otwarcie linku w ramce rodzica -> poziom wyżej _top - link będzie otwarty w tym samym oknie „nazwa” – nazwa ramki w której ostrona będzie otwarta
Koniec cz.3 Tabele i ramki