|
Lekcja 3 - tabela organizująca układ strony.
Aby uzyskać pożądane rozmieszczenie elementów (tekstu, menu, grafiki) na stronie
internetowej można zastosować wiele różnych sposobów. My wykorzystamy do tego celu tabelę
o odpowiednio zaprojektowanej strukturze. W tym celu musimy najpierw poznać znaczniki,
które są odpowiedzialne za wyświetlanie tabeli na stronie WWW. Są to:
<TABLE>...</TABLE> - znacznik otwierający i zamykający strukturę tabeli,
<TR>...</TR> - znacznik otwierający i zamykający wiersz tabeli,
<TD>...</TD> - znacznik otwierający i zamykający pojedynczą komórkę tabeli.
Aby tabela była widoczna na stronie jej znaczniki umieszczamy wewnątrz znaczników <BODY>,
do komórek wpisujemy jakiś tekst, a znacznik otwierający <TABLE> uzupełniamy o parametr BORDER="1". Parametr ten odpowiada za wyświetlanie krawędzi. W kolejnej lekcji go
wyzerujemy, aby ukryć linie obramowania. Na razie jednak pozwoli nam on na łatwą
orientację w układzie tabelki. Strukturę jednowierszowej tabeli budujemy w sposób
przedstawiony poniżej. Jak widać na przykładzie usuwamy wpisany w poprzedniej lekcji
przykładowy tekst "Tu będzie treść naszej strony".
...
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="0" TOPMARGIN="0"
MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>komórka 1</TD>
<TD>komórka 2</TD>
</TR>
</TABLE>
</BODY>
...
Po zapisaniu zmian i otworzeniu pliku w przeglądarce (odświeżeniu widoku) na stronie
powinniśmy zobaczyć następujący efekt:
Zobacz
Aby móc w pełni dostosować tabelę do naszych potrzeb musimy poznać parametry wpływające na
jej wygląd:
BORDER - parametr ustalający grubości linii zewnętrznej obramowania tabeli. Gdy do
parametru jest przypisana wartość "0" linie obramowania nie są wyświetlane.
PRZYKŁADY:
| BORDER="0" |
BORDER="1" |
BORDER="10" |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
CELLSPACING - parametr ustalający oddalenie (w pikselach) pomiędzy obramowaniem
poszczególnych komórek i obramowaniem tabeli. W zasadzie jest to odległość pomiędzy
poszczególnymi komórkami tabeli.
PRZYKŁADY:
| CELLSPACING="0" |
CELLSPACING="2" |
CELLSPACING="10" |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
CELLPADDING - parametr ustalający margines komórek, tj. oddalenie (w pikselach) tekstu w
komórce od jej krawędzi.
PRZYKŁADY:
| CELLPADDING="0" |
CELLPADDING="2" |
CELLPADDING="10" |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
| komórka 1 | komórka 2 | komórka 3 | komórka 4 |
|
WIDTH - parametr ustalający szerokość całej tabeli lub jej pojedynczej komórki (w zależności od tego, w którym znaczniku go umieścimy). Zazwyczaj
maksymalna szerokość tabeli będzie równa wartości przypisanej do tego parametru tylko
wtedy, gdy wszystkie znaczniki opisane powyżej będą miały wartość "0". Przypisanie im
innej wartości może spowodować zwiększenie szerokości tabeli.
HEIGHT - parametr, któremu można przypisać wysokość tabeli lub komórki, na razie nie
będziemy go używać.
ALIGN - parametr sterujący wyrównaniem zawartości wiersza lub pojedynczej komórki możemy
mu przypisać następujące wartości: "left" - wyrównaj do lewej, "right" - wyrównaj do
prawej, "center" -wyśrodkuj.
VALIGN - parametr sterujący pionowym wyrównaniem zawartości wiersza lub pojedynczej komórki.
Można mu przypisać następujące wartości: "top" - wyrównaj do góry, "middle" - wyrównaj na
środek, "bottom" - wyrównaj do dołu.
BGCOLOR - parametr ustalający kolor tła tabeli, wiersza lub pojedynczej komórki. Parametr
ten wystąpił już przy omawianiu znacznika <BODY>.
Utworzoną tabelę zmodyfikujemy tak, aby przystosować ją do potrzeb naszej strony.
W znaczniku <TABLE> dodajemy parametry
CELLSPACING="0", CELLPADDING="0" oraz WIDTH="780".
Tym samym zerujemy wszelkie możliwe odstępy i ustawiamy maksymalną szerokość tabeli.
Wybraliśmy liczbę 780 ponieważ jest to maksymalna szerokość, jaką może pokazać przeglądarka
Internet Explorer przy rozdzielczości monitora 800x600 pikseli. Szersza strona także może
być wyświetlona, ale pojawi się wtedy (przy rozdzielczości 800x600) pasek poziomego
suwaka, co będzie znacznym utrudnieniem w jej oglądaniu. Nasza tabela ma ustawiony
parametr BORDER="1" jak pamiętamy w pewnych sytuacjach może zwiększyć on jej szerokość, a
tym samym może spowodować wyświetlenie poziomego suwaka. Suwak zniknie w momencie
wyzerowania parametru BORDER.
W następnej kolejności zwiększamy liczbę komórek do 5 i wpisujemy parametry dotyczące ich
szerokości (WIDHT) oraz tam gdzie to będzie potrzebne pionowego wyrównania zawartości
(VALIGN). Komórki, które będą pełnić rolę pustych przestrzeni, rozdzielających elementy
strony pozostawiamy puste. Chwilowo spowoduje to, nieco dziwne ich wyświetlanie. Do
komórki drugiej wpisujemy tekst "Tu będzie menu", do komórki czwartej "Tu będzie treść",
przed zapisaniem zmian musimy dokonać konwersji znaków. Ostateczny kod tabeli (przed
konwersją) powinien wyglądać następująco:
...
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="0" TOPMARGIN="0"
MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="780">
<TR>
<TD WIDTH="5"></TD>
<TD WIDTH="110" VALIGN="top">Tu będzie menu</TD>
<TD WIDTH="5"></TD>
<TD WIDTH="655" VALIGN="top">Tu będzie treść</TD>
<TD WIDTH="5"></TD>
</TR>
</TABLE>
</BODY>
...
Zobacz
Ćwiczenia:
Możemy poeksperymentować zmieniając wybrane parametry tabeli.
Po zakończeniu ćwiczeń wracamy do pierwotnego formatowania tabeli.
|
