doc1. Tabele 2. Podpis tabeli 3. Wyrównywanie tabeli i zawartości
download 
Reklamacja Transkrypt
1. Tabele 2. Podpis tabeli 3. Wyrównywanie tabeli i zawartości
1 Tabele HTML <html> 1. Tabele Jednym z podstawowych elementów słuŜących do formatowania tekstu są tabele. Mają one dwojakie zastosowanie. Po pierwsze umoŜliwiają tworzenie obszarów składających się z wierszy i kolumn. Drugim zastosowaniem tabel jest organizacja wyglądu strony m.in. w połączeniu z obrazkami i formularzami. Do zdefiniowania tabeli słuŜy znacznik <TABLE>...</TABLE>. Najpopularniejszym atrybutem znacznika <TABLE> jest atrybut BORDER. Atrybut ten jest odpowiedzialny za wyświetlenie obramowania (krawędzi) tabeli. Pomiędzy znacznikami rozpoczynającymi definiowanie tabeli umieszcza się jej zawartość. W języku HTML tabele definiowane są wiersz po wierszu, a kaŜdy z wierszy zawiera definicje wszystkich komórek w nim zawartych. Kolumny obliczane są automatycznie, w oparciu o liczbę komórek w kaŜdym z wierszy. Wiersz tworzony jest za pomocą znacznika <TR>...</TR>. Z kolei kaŜdy z wierszy ma swoje komórki, które definiowane są za pomocą pary znaczników <TH>...</TH> (w przypadku komórek nagłówka) i pary <TD>...</TD> (dla komórek danych). Zarówno liczba komórek w wierszu, jak liczba wierszy w tabeli są dowolne. Najczęściej ogranicza się jednak liczbę kolumn w taki sposób, aby cała tabela mieściła się na ekranie. Najprostszy przypadek tabeli wygląda następująco: <TABLE BORDER> <TR><TH>Nagłówek<TH>Nagłówek <TR><TD>Dane<TD>Dane <TR><TD>Dane<TD>Dane <TR><TD>Dane<TD>Dane </TABLE> 2. Podpis tabeli Podpis tabeli informuje czytelnika o tym, czego dotyczy tabela. SłuŜy do tego znacznik <CAPTION>...</CAPTION>. Znacznik ten powinien pojawić się w obrębie znacznika <TABLE>, przed definicjami wierszy, gdyŜ zawiera tytuł tabeli. Znacznik uŜywany jest wraz ze znacznikiem zamykającym. <TABLE> <CAPTION>Tytuł tabeli</CAPTION> <TR>... Opcjonalny atrybut ALIGN znacznika <CAPTION> określa sposób wyrównania tekstu podpisu. W większości przeglądarek dostępne są dwie wartości: TOP i BOTTOM. 3. Wyrównywanie tabeli i zawartości komórek Tabela na stronie wyrównana jest domyślnie do lewej krawędzi. Za pomocą atrybutu ALIGN moŜna wyrównać tabelę następująco: • • • ALIGN=„left” (wyrównanie do lewej); ALIGN=„right” (wyrównanie do prawej); ALIGN=„center” (wyśrodkowanie). W podobny sposób moŜemy wyrównać zawartości komórek w tabeli. Dane moŜna wyrównać w obrębie komórki w poziomie - atrybut ALIGN i w pionie - atrybut VALIGN. Wartości atrybutów ALIGN i VALIGN przedstawia tabela 7. Andrzej Mazur – [email protected] 2 Tabele HTML Atrybut Wartość Znaczenie ALIGN Center wyśrodkowanie, Left wyrównanie do lewej, Right wyrównanie do prawej. Middle wyśrodkowanie w pionie, Bottom wyrównanie ku dołowi, Baseline wyrównanie do linii bazowej tekstu. VALIGN źródło: materiały własne 4. Scalanie komórek tabeli w pionie i poziomie <html> Tabela 7 Wartości atrybutów ALIGN i VALIGN JeŜeli w którymś wierszu zdefiniowano mniejszą liczbę komórek (kolumn), to na jego końcu pozostaje wolne, nie wykorzystane miejsce. JeŜeli zachodzi potrzeba „rozciągnięcia” komórki na kilka kolumn lub wierszy, jako atrybut znacznika <TH> lub <TD> naleŜy wykorzystać ROWSPAN lub COLSPAN, określając, ile komórek ma być złączonych w pionie lub w poziomie. Atrybut COLSPAN naleŜy dodać wtedy do definicji komórki wysuniętej najbardziej w lewo. Spowoduje to scalenie (złączenie) komórek znajdujących się w danym wierszu. <TABLE BORDER> <TR><TH COLSPAN="2">Płeć <TR><TH>MęŜczyzna<TH>Kobieta <TR><TD>28<TD>36 </TABLE> W przypadku złączenia komórek znajdujących się w kilku wierszach (scalenie w pionie), naleŜy dodać do komórki pierwszej od góry atrybut ROWSPAN. <TABLE BORDER> <TR><TH ROWSPAN="2">Płeć<TH>MęŜczyzna<TD>28 <TR><TH>Kobieta<TD>36 </TABLE> 5. Definiowanie szerokości tabeli i kolumn Wszystkie z dotychczas omówionych przykładów tabel, przybierały domyślną szerokość na ekranie przeglądarki. Za pomocą atrybut WIDTH znacznika <TABLE> moŜemy zdefiniować szerokości tabeli w pikselach lub w procentach względem szerokości okna. Ten sam atrybut WIDTH moŜemy wstawić przy definiowaniu szerokości poszczególnych komórek <TH> i <TD>. Tak jak w przypadku całej tabeli moŜemy podać dokładną szerokość kolumny w pikselach lub procentach względem szerokości całej tabeli. MoŜliwość definiowania szerokości kolumn moŜe być przydatna, gdy chcemy ustawić jednakową ich szerokość. Andrzej Mazur – [email protected] 3 Tabele HTML <html> 6. Definiowanie szerokości obramowania tabeli Aby tabela zawierała obramowanie, wystarczy rozszerzyć definicję znacznika <TABLE> o atrybut BORDER. Wartość atrybutu określamy w pikselach, przy czym BORDER=”1” jest wartością domyślną. Nie chcąc, więc definiować szerokości obramowania moŜemy zrezygnować z podawania jej wartości i zapisać: <TABLE BORDER="0"> Zapis BORDER=”0” oznacza brak obramowania - taki sam efekt uzyskamy rezygnując z tego atrybutu. 7. Odstępy między komórkami Odstępy między komórkami pozwalają na określenie szerokości obramowań poszczególnych komórek. Atrybutem umoŜliwiającym definiowanie tych szerokości jest atrybut CELLSPACING. Domyślną wartością tego atrybutu jest 2. 8. Odstęp między zawartością komórki a jej obramowaniem Jeśli uznamy, Ŝe odstęp między zawartością komórki, a jej obramowaniem jest zbyt mały, moŜemy uŜyć atrybutu CELLPADDING (domyślnie wynosi on 1). Wartość atrybutu określamy w pikselach. 9. Kolory w tabelach Chcąc zmienić tło tabeli, wiersza lub komórki, do znacznika <TABLE>, <TR>, <TH> lub <TD> naleŜy dodać atrybut BGCOLOR. Wartość tego atrybutu to definicja koloru podana w postaci heksadecymalnej (np. #FF0000) lub nazwa koloru w języku angielskim. Ustawienia dotyczące koloru tła dominują nad ustawieniami koloru tła elementu nadrzędnego. Oznacza to, Ŝe ustawienia koloru tła tabeli dominują nad ustawieniami tła strony, ustawienia koloru wiersza dominują nad ustawieniami koloru tła tabeli, a ustawienia dotyczące koloru komórki nad wszelkimi innymi. W przypadku tabel zagnieŜdŜanych w komórkach, kolor tła zagnieŜdŜonej tabeli będzie identyczny z kolorem tła mieszczącej ją komórki. Internet Explorer i Mozilla Firefox interpretują takŜe kolor obramowania tabeli. W definicji tabeli naleŜy wstawić atrybut BORDERCOLOR, np.: <TABLE BORDER="5" BORDERCOLOR="red"> Istnieje równieŜ moŜliwość określenia koloru cienia obramowania tabeli. Cień konkretnego brzegu komórki dzieli się na dwie części: jasną - z lewej lub u góry, oraz ciemną - z prawej lub u dołu. Mamy optyczne wraŜenie, jakbyśmy patrzyli na komórkę z lewej strony i od góry. MoŜemy nadać odrębną barwę cieniowi lewemu i górnemu oraz odrębną prawemu i dolnemu. <TABLE BORDER="5" BORDERCOLORDARK="black" BORDERCOLORLIGHT="white"> Andrzej Mazur – [email protected]
