| Tabela | |
Najprostsza tabela "wygląda" tak:
<table border=1>
<tr>
<td>Pierwsza komórka</td>
<td>Druga komórka</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
</tr>
</table>
Po wyświetleniu będzie wyglądała na stronie następująco:
| Pierwsza komórka | Druga komórka | | 5 | 10 |
|
| Znaczniki | |
Poszczególne elementy tabeli mają następujące znaczenie:
<table border=1>
Otwarcie tabeli, obrys o grubości 1 piksla
<tr>
Otwarcie wiersza
<td>
Otwarcie komórki
tutaj wpisujemy zawartość komórki
</td>
Zamknięcie komórki
Jeżeli chcemy teraz wstawić drugą komórkę, to ponawiamy ciąg <td></td>
</tr>
Zamknięcie wiersza
Jeżeli chcemy teraz wstawić drugi wiersz, to ponawiamy ciąg <tr><td></td></tr>
</table>
Zamknięcie tabeli
|
| Formatowanie tabeli |
| Odstępy | |
Parametr <table cellpadding=10> ustala odstęp wpisów od krawędzi wewnętrznej komórki na 10 piksli
| Pierwsza komórka | Druga komórka | | 5 | 10 |
Parametr <table cellspacing=10> ustala odstęp między komórkami na 10 piksli
| Pierwsza komórka | Druga komórka | | 5 | 10 |
|
| Wyrówanie | |
Wyrównujemy elementy w komórce w poziomie za pomocą parametru align i w pionie za pomocą parametru valign
|
| ALIGN | |
Parametr <td align="right"> ustala wyrównanie liczb do prawej krawędzi np. liczby.
Podobnie wyrównujemy do lewej (ustawienie domyślne) align="left" i wyśrodkowujemy align="center"
| Długa pierwsza komórka | Długa druga komórka | Długa trzecia komórka |
| align="left" |
align="center" |
align="right" |
|
| VALIGN | |
Parametr <td valign="top"> ustala wyrównanie liczb w pionie do górnej krawędzi.
Podobnie wyrównujemy do środka valign="middle" i do krawędzi dolnej komórki valign="bottom"
| Pierwsza komórka | Druga komórka | Trzecia komórka | valign="top"
| valign="middle" | valign="bottom" |
Możemy łączyć te elementy:
<td align="center" valign="middle">
|
| ŁĄCZENIE KOMÓREK |
| COLSPAN | |
Parametr <td colspan="3"> spowoduje połączenie trzech kolejnych komórek w poziomie.
| Pierwsza i ostatnia komórka colspan="3" |
| 1 | 2 | 3 |
|
| ROWSPAN | |
Parametr <td rowspan="2"> spowoduje połączenie dwóch komórek w pionie.
Pierwsza komórka
rowspan="2" | Druga komórka | Trzecia komórka |
| 2 | 3 |
UWAGA:
Pamiętajmy, żeby w wierszu poniżej wstawiać o jedną komórkę mniej, inaczej będziemy mieli wiersz dłuższy.
|
| WYMIARY KOMÓREK I TABELI |
| WIDTH | |
Parametr <td width=150 > ustala szerokość komórki na 150 piksli.
|
| HEIGHT | |
Parametr <td height=125 > ustala minimalną wysokość wiersza na 300 piksli. Jeżeli elementy nie zmieszczą się w komórce w tej wysokości, to wysokość zostanie zwiększona.
| width=200 | width=150 | width=100 |
| height=125 | 2 | 3 |
UWAGA:
Można stosować parametry procentowe, np. tabela o szerokości 50% szerokości strony
<table width="50%">
Albo komórka o szerokości 10%
<td width="10%">
Albo tabela zajmująca całą stronę (100%)
Trzeba wtedy ustawić również marginesy na stronie na 0 w znaczniku BODY:
<BODY margin="0" leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%">
<tr><td></td></tr>
</table>
</BODY>
|
| INNE ELEMENTY |
| BGCOLOR | |
Parametr <table bgcolor="gray"> ustala tło tabeli na szary. Podobnie można ustalić kolor komórki np. <td bgcolor="blue">
UWAGA:
Żeby zobaczyć efekt, musimy wpisać cokolwiek do komórki, choćby niełamliwą spację . W przeciwnym przypadku obrys się nie pojawia!
|
| BACKGROUND | |
Parametr <table background="img/grochy.gif"> ustawia rysunek grochów jako tło tabeli.
UWAGA:
1) Zobacz, że kolor tła przykrywa wypełnienie wzorem.
2) Jeżeli rysunek się nie pojawi, zobacz czy dobrze wpisałeś ścieżkę do pliku z rysunkiem.
3) Największe różnice między przeglądarkami NETSCAPE i INTERNET EXPLORER występują między innymi w sposobie wyświetlania i formatowania tabel!
|
| CAPTION | |
Tytuł tabeli wstawiamy przez znacznik <caption align="left" valign="top"> Tabela nr 1</caption>. Tutaj tytuł nad tabelą, wyrównany do lewej. Znacznik caption wstawiamy po znaczniku table, czyli po "otwarciu" tabeli.
Przykład tabeli, odsetki od kredytów
| Bank |
Dolary |
Marki |
a'
vista |
miesiące |
a'
vista |
miesiące |
| 3 |
6 |
12 |
24 |
36 |
3 |
6 |
12 |
24 |
36 |
| Banki z gwarancjami Bankowego Funduszu Gwarancyjnego |
| Bank Zachodni |
2,50 |
3,30 |
3,60 |
3,90 |
4,10 |
4,10 |
2,00 |
2,40 |
2,50 |
2,70 |
2,90 |
2,90 |
| Bank Staropolski |
2,00 |
4,00 |
4,20 |
4,75 |
4,50 |
4,50 |
2,00 |
2,80 |
3,00 |
3,75 |
3,50 |
3,50 |
| Bank Śląski |
3,00 |
3,29 |
3,79 |
4,27 |
4,51 |
--- |
1,90 |
2,00 |
2,00 |
2,00 |
2,25 |
--- |
|
