[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

Transkrypt

1 [ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników <table> </table>. W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach. Wiersz tabeli definiuje się znacznikami <tr> <tr> i jest on wewnętrznym opisem tabeli. On sam tworzy ramy dla komórek wewnątrz których znajdują się dane. W tabeli można umieszczad dowolną ilośd wierszy, np.: <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> W powyższym przykładzie utworzona została tabela zawierająca 3 wiersze. W następnym kroku należy w każdym z wierszy zdefiniowad komórki. Komórkę w wierszu definiuje się znacznikami <td> <td>. Każda komórka powinna zawierad dane, np. w postaci tekstu lub grafiki. Komórki umieszcza się między znacznikami wybranego wiersza tabeli, np.: <table> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table>

2 co przyjmie następujący wygląd: 2. Obramowanie, margines, szerokośd oraz wysokośd tabeli i komórek W celu dodania do tabeli obramowania należy wykorzystad do tego atrybut BORDER w znaczniku table. W przypadku braku wartości obramowania tabeli, brana jest jej wartośd domyślna, tj. 0. Składnia wygląda następująco: <table BORDER=x> </table> Oto przykład tabeli, której obramowanie jest równe 5:

3 <table BORDER=5> przyjmie następujący wygląd: W celu odsunięcia od siebie poszczególnych komórek w tabeli należy posłużyd się atrybutem CELLSPACING. Przykład: <table BORDER=5 CELLSPACING=10> i przyjmie postad:

4 Jeśli okaże się, że odstęp między krawędzią komórki a jej zawartością jest zbyt mała to można posłużyd się atrybutem CELLPADDING. Składnia: <table CELLPADDING=x> </table> Przykład: <table BORDER=5 CELLPADDING=20> przyjmie wygląd:

5 Jeśli zaistniałaby koniecznośd zmiany szerokości tabeli, należałoby posłużyd się atrybutem WIDth. Składnia wyglądad powinna następująco: <table WIDth=x> </table> gdzie x może przyjąd wartośd numeryczną lub procentową w odniesieniu do szerokości ekranu przeglądarki. Przykład: <table BORDER=5 WIDth=50%>

6 Ten sam atrybut może posłużyd do określenia szerokości komórki (kolumny) w tabeli. Wartośd może byd w postaci numerycznej lub procentowej w odniesieniu do szerokości tabeli. Składnia wygląda następująco: <td WIDth=x> </td> Przykład: <td WIDth=100> wygląda następująco:

7 W celu określenia wysokości tabeli należy użyd atrybutu HEIGHT, a jego wartośd wyrazid w pikselach lub procentach widocznej strony. Konstrukcja ma postad: <table HEIGHT=x> </table> Przykład: <table BORDER=5 HEIGHT=200>

8 3. Pozycjonowanie tabel oraz danych w komórkach W celu wyrównania tabeli w stosunku do marginesów strony lub otaczających ją elementów (tekst, grafika) można posłużyd się atrybutem ALIGN w znaczniku table. Może on przyjąd wartości LEFT, RIGHT lub center. Przykład: <table BORDER=5 ALIGN=RIGHT> </table> wygląda następująco:

9 Atrybut ALIGN można także wykorzystad do poziomego wyrównania zawartości komórki. W tym celu należy użyd konstrukcji: <td ALIGN=...> </td> Przykłady, gdzie atrybuty tabeli wyglądają następująco <table BORDER=5 WIDth=50%>: <table BORDER=5 WIDth=50%> : <td ALIGN=center> <td ALIGN=RIGHT>

10 W celu wyrównania pionowego zawartości komórki należy posłużyd się atrybutem VALIGN. Może on przyjąd wartości TOP, MIDDLE oraz BOTTOM. Składnia wygląda następująco: <td VALIGN=...> </td> Przykłady, gdzie atrybuty tabeli wyglądają następująco <table BORDER=5 HEIGHT=200>: <td VALIGN=TOP>

11 <td VALIGN=BOTTOM> 4. Wypełnienie tabeli (tło) Przeglądarka Internet Explorer pozwala wypełnid tabelę dowolnym kolorem - kolorem tła tabeli. W tym celu należy w definicji tabeli wykorzystad atrybut BGCOLOR. Składnia jest następująca: <table BGCOLOR=kolor> gdzie kolor może przyjąd postad wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua).

12 Przykład: <table BORDER=5 BGCOLOR=RED> Istnieje również możliwośd zmiany kolorów tła poszczególnych komórek tabeli. Składnia jest następująca: <td BGCOLOR=kolor> </td> gdzie kolor może przyjąd postad wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua). Przykład:

13 Jako tła tabeli lub poszczególnych komórek można także użyd gotowego obrazka. W tym celu należy użyd składni: <table BACKGROUND="plik_graficzny"> Przykład: <table BACKGROUND=" tworzy tabelę jak poniżej:

14 Przeglądarka Internet Explorer interpretuje także kolor obramowania tabeli. W tym celu należy użyd atrybutu BORDERCOLOR. Składnia: <table BORDERCOLOR=kolor> gdzie kolor może przyjąd postad wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua). Przykład: <table BORDER=5 BORDERCOLOR=GREEN>

15 Oprócz tego Internet Explorer pozwala określid kolor cienia obramowania tabeli. Cieo brzegu komórki lub tabeli dzieli się na dwie części: jasną z lewej i u góry oraz ciemną z prawej i u dołu. Można nadad odrębną barwę obu cieniom, np.: <table BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white> i wyglądad to będzie następująco:

16 Przykład w przypadku komórki: <td BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow> Tabela może zawierad tytuł, wyjaśniający jej treśd. Należy umieścid go zaraz za ogólną definicją tabeli (za znacznikiem <table>), np.:

17 <table BORDER> <CAPTION ALIGN=TOP>Napis na górze</caption> będzie wyglądad: Napis na górze