HTML/Tabele

Od czego zacząć?

Tabele można tworzyć na dwa sposoby:

- za pomocą znacznika pre
- za pomocą znacznika table

Na początek spróbujmy zrobić swoją pierwszą tabelę za pomocą znaczników

<pre></pre>

Jak wiemy, HTML ignoruje białe spacje. Na przykład chcemy stworzyć taką tabelę:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Gdy napiszemy:

<p>
Imię             Nazwisko
Super            Programista
Jasiek           Kowalski
</p>

zostanie wypisane:

Imię Nazwisko Super Programista Jasiek Kowalski

Niezupełnie nam o to chodziło. Jak widzimy, HTML całkiem zignorował białe spacje. Jednak wcześniej wymieniona instrukcja

<pre></pre>

pomija tą niedogodność.

W takim razie użyjmy ją! Zapisując:

<pre>
Imię             Nazwisko
Super            Programista
Jasiek           Kowalski
</pre>

Otrzymamy:

Imię             Nazwisko
Super            Programista
Jasiek           Kowalski

O to nam chodziło! Właśnie stworzyliśmy swoją pierwszą tabelę! Tylko zastanówmy się wówczas, co się stanie, gdybyśmy chcieli dodać więcej wierszy lub kolumn? Czy w taki sposób będziemy robić naszą tabelę? Niezupełnie. Po pierwsze jest to tzw. "bałaganiarstwo" w kodzie. Po drugie, uwzględniamy białe spacje, co nie jest dobrym pomysłem. W takim razie jak zrobimy naszą tabelę? Istnieje znaczny prostszy sposób - użycie znacznika

<table></table>

Znacznik table

Aby rozpocząć tworzenie nowej tabeli, najpierw musimy poinformować przeglądarkę o tym, że będziemy tworzyć tabelę. W takim razie zróbmy to! Wystarczy napisać:

<table>
</table>

Teraz musimy stworzyć nowy wiersz. Służy do tego instrukcja tr. Tak wygląda nasz kod:

<table>
<tr></tr>
</table>

Gdy mamy stworzony już wiersz, trzeba stworzyć komórkę za pomocą intrukcji td. Kod:

<table>
<tr><td></td></tr>
</table>

Brawo! Jeżeli rozumiesz ten kod, to znaczy, że umiesz już tworzyć tabele. Teraz wystarczy wstawić tekst pomiędzy komorki! Zróbmy to więc! Gdy napiszemy:

<table>
<tr><td>Imię</td><td>Nazwisko</td></tr>
</table>

zostanie wypisane:

Imię

Nazwisko

Dodajmy trochę więcej komórek. Pisząc:

<table>
<tr>
<td>Imię</td><td>Nazwisko</td>
</tr>
<tr>
<td>Super</td><td>Programista</td>
</tr>
<tr><td>Jasiek</td><td>Kowalski</td></tr>
</table>

otrzymasz:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Niestety, nie wygląda to zbyt ładnie. Może dodamy obramowanie? Czemu nie? Służy do tego instrukcja border. Jeżeli chcemy obramowanie dla całej tabeli, instrukcję border dopisujemy tylko do znacznika table. Czyli po zapisaniu:

<table border="1">
<tr>
<td>Imię</td><td>Nazwisko</td>
</tr>
<tr>
<td>Super</td><td>Programista</td>
</tr>
<tr><td>Jasiek</td><td>Kowalski</td></tr>
</table>

naszym oczom ukaże się:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Nie wiem jak dla ciebie, ale dla mnie te napisy w tabeli są zbyt blisko siebie, są ściśnięte. Naprawmy to. Aby zrobić trochę wolnego miejsca wokół komórek, użyjemy instrukcji cellpadding. Dodamy ją oczywiście do znacznika table. Tak więc pisząć:

<table border="1" cellpadding="6">
<tr>
<td>Imię</td><td>Nazwisko</td>
</tr>
<tr>
<td>Super</td><td>Programista</td>
</tr>
<tr><td>Jasiek</td><td>Kowalski</td></tr>
</table>

zobaczymy:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Od razu lepiej! Istnieje jeszcze instrukcja cellspacing - jest to odstęp pomiędzy komórkami.

Scalanie komórek

Umiesz już tworzyć proste tabele. Co wówczas, gdy chcesz stworzyć taką tabelę:

Nagłówek		Nagłówek
Komórka	Komórka	Komórka	Komórka
Komórka	Komórka	Komórka	Komórka

Wtedy musimy scalić komórki. Istnieje taka zasada: -jeżeli chcemy scalać komórki w poziomie, używamy instrukcji colspan -jeżeli chcemy scalać komórki w pionie, używamy instrukcji rowspan

Jak tego użyć? Przedstawiam kod:

<table border="1">
<tr><td colspan="2"><center>Nagłówek</center></td><td colspan="2"><center>Nagłówek</center></td></tr>
<tr><td>Komórka</td><td>Komórka</td><td>Komórka</td><td>Komórka</td></tr>
<tr><td>Komórka</td><td>Komórka</td><td>Komórka</td><td>Komórka</td></tr>
</table>

Jak widzimy została tutaj użyta instrukcja colspan, by scalić komórki w poziomie. Liczba oznacza ile komórek ma być scalonych. Pomiędzy tekstem został użyty znacznik center by wyśrodkować tekst. Radzę trochę poeksperymentować z kodem i spróbować zrobić własną tabelę z komórkami scalonymi w pionie. Miłej zabawy!