Tabele (2)
Tomasz Bartuś
Lekcję 1 zakończyliśmy na:...
<table>
<tr>
<td>Iza</td>
</tr>
</table>
...co dało nam następujący efekt:
Po pierwsze zobaczmy wreszcie naszą tabelę. Dodajmy jej ramkę. Każdorazowo gdy chcesz w przeglądarce WWW zobaczyć zmiany, które wprowadziłeś do pliku html, możesz skorzystać z klawisza funkcyjnego F5 lub skrótu klawiaturowego ctrl+r.
<table border="1">
<tr>
<td>Iza</td>
</tr>
</table>
Co gdy chcemy grubszą ramkę?
<table border="5">
<tr>
<td>Iza</td>
</tr>
</table>
A co jeśli jeszcze grubszej?
<table border="25">
<tr>
<td>Iza</td>
</tr>
</table>
A co jeżeli chcemy aby ramka była niewidoczna?
<table border="0">
<tr>
<td>Iza</td>
</tr>
</table>
Jak widać domyślną wartością zmiennej border jest wartość "0"
Ustalmy wielkość ramki na "3".
<table border="3">
<tr>
<td>Iza</td>
</tr>
</table>
Jeżeli nie zadeklarujemy wielkości tabeli, będzie ona tak szeroka, jak treść, która jest w niej zdeponowana.
<table border="3">
<tr>
<td>Iza, Marek i Rysiek</td>
</tr>
</table>
Deklaracja szerokości tabeli pozwala na zmianę wartości domyślnej.
<table border="3" width="100%">
<tr>
<td>Iza, Marek i Rysiek</td>
</tr>
</table>
A co z 75%
<table border="3" width="75%">
<tr>
<td>Iza, Marek i Rysiek</td>
</tr>
</table>
Skasujmy teraz przyjaciół Izaa.
<table border="3" width="75%">
<tr>
<td>Iza</td>
</tr>
</table>
Zmniejszmy szerokość tabeli do 50% szerokości okna przeglądarki.
<table border="3" width="50%">
<tr>
<td>Iza</td>
</tr>
</table>
Teraz usuńmy znak "%" z deklaracji szerokości. Deklaracja zmieni się z względnej (wyrażonej w procentach), na bezwzględną (wyrażoną w pikselach).
<table border="3" width="50">
<tr>
<td>Iza</td>
</tr>
</table>
Zmieńmy na 100.
<table border="3" width="100">
<tr>
<td>Iza</td>
</tr>
</table>
Jak widać szerokość tabeli wyrażona w pikselach, nie zależy od szerokości treści zawartej w tabeli ani od wielkości okna przeglądarki (jest miarą bezwzględną).
Podobnie możemy postąpić z wysokością tabeli (height).
<table border="3" width="100" height="75">
<tr>
<td>Iza</td>
</tr>
</table>
Potrafimy także kontrolować położenie zawartości pojawiającej się w komórkach tabeli.
<table border="3" width="100" height="75">
<tr>
<td align="center">Iza</td>
</tr>
</table>
<table border="3" width="100" height="75">
<tr>
<td align="right">Iza</td>
</tr>
</table>
<table border="3" width="100" height="75">
<tr>
<td align="left">Iza</td>
</tr>
</table>
Jak można zauważyć, domyślną wartością przyjmowaną przez przeglądarkę, gdy nie ma innej deklaracji jest align="left".
Możemy także kontrolować położenie treści komórek w pionie.
<table border="3" width="100" height="75">
<tr>
<td align="left" valign="top">Iza</td>
</tr>
</table>
<table border="3" width="100" height="75">
<tr>
<td align="left" valign="bottom">Iza</td>
</tr>
</table>
<table border="3" width="100" height="75">
<tr>
<td align="left" valign="middle">Iza</td>
</tr>
</table>
Domyślną wartością jest middle.
A teraz spróbujemy podmienić tekst "Iza" innym rodzajem treści. Wstawimy do komórki tabeli mały obrazek o nazwie ed.gif i spróbujemy manipulować jego położeniem. Skopiuj go do folderu tabela. Następnie za pomocą tagu img wstaw obrazek do komórki tabeli.
<table border="3" width="100" height="75">
<tr>
<td align="left" valign="middle">
<img src="iza.gif" width="32" height="32">
</td>
</tr>
</table>
