Tabele (4)
Tomasz Bartuś
Usuńmy deklarację atrybutów: cellpadding i cellspacing i powróćmy do prostej tabeli.
<table border="3">
<tr>
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Równolegle z deklaracjami komórek <td> funkcjonuje także deklaracja nagłówków tabeli <th>.
<table border="3">
<tr>
<th>Iza</th>
<th>Marek</th>
<th>Rysiek</th>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Co prawda nie widać żadnej różnicy ale zalety deklaracji nagłówków <th> będą bardziej czytelne gdy tworzone tabele powiążemy z kaskadowymi arkuszami styli css. W ten sposób można "wyróżnić" dowolny zestaw komórek tabeli.
Jedną z ciekawszych funkcjonalności tabel jest możliwość deklaracji koloru komórki, rzędu, a nawet całej tabeli. Używamy do tego zmiennej bgcolor - tej samej, jaką używaliśmy do deklaracji koloru całej strony, wewnątrz tagu <body>.
<table border="3" bgcolor="#FFCC66">
<tr>
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
<table border="3">
<tr bgcolor="#FF9999">
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr bgcolor="#99CCCC">
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
<table border="3">
<tr bgcolor="#FFCCFF">
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td bgcolor="#FF0000">Asia</td>
<td>Emilia</td>
<td bgcolor="#3366FF">Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Oto przydatny podręczny schemat kolorów, którego można użyć do wyboru kolorów tła.
Jeszcze jedna rzecz dotycząca kolorów tła tabeli... Zadeklarowane tło <td> (komórki) nadpisuje tło <tr> (rzędu). Natomiast tło rzędu <tr> nadpisuje deklarację tła dla tagu <table>. Popatrz na przykład:
<table border="3" bgcolor="#FF6633">
<tr bgcolor="#009900">
<td bgcolor="#9999FF">Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Przeglądarka stara się, w możliwie najlepszy sposób interpretować instrukcje kodu html. Jeśli coś nie zostało zadeklarowane, większość przeglądarek będzie starała się sama zinterpretować brakującą część deklaracji. Niestety czasami zdaża się, że interpretacja nie jest zgodna z naszym pierwotnym zamysłem. Dlatego należy starać się zadeklarować mośżliwie dużo elementów kodu, a zwłaszcza te części, które są najważniejsze dla wyglądu strony WWW. Ważne jest również, aby przed opublikowaniem strony, obejrzeć ją za pośrednictwem różnych przeglądarek.
Inną, ważną kwestią jest rozdzielczość ekranu monitora. Różni użytkownicy Internetu pracują na sprzęcie o różnych rozdzielczościach ekranu (640×480, 800×600, 1024×768 i innych). Dobrym pomysłem będzie więc, aby różnice w interpretacji kodu wynikające z używania różnych przeglądarek WWW, uzupełnić o testy wyglądu strony w różnych rozdzielczościach ekranowych.
Teraz zajmiemy się dwoma bardzo ważnymi zmiennymi: colspan (łączenie kolumn) i rowspan (łączenie rzędów). Przypuśćmy, że chcemy polączyć komorkę Izaa z komorką Marka. Usuwamy komórkę Marka.
<table border="3">
<tr>
<td>Iza</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Rysiek |
| Asia |
Emilia |
Wojciech |
Na końcu pierwszego rzędu tabeli pojawiło się puste miejsce, a komórka Ryśka uległa przesunięciu w lewo, w miejsce komórki Marka.
Jeżeli chcemy aby komórka Iza została połączona z byłą komórką Marka (aby scalić te komórki), należy użyć deklaracji colspan.
<table border="3">
<tr>
<td colspan="2">Iza</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Rysiek |
| Asia |
Emilia |
Wojciech |
Dobrą ilustracją tego co wcześniej zostało powiedziane o staraniach przeglądarek aby, pomimo uchybień poprawnie zinterpretować kod html, będzie następujące ćwiczenie. Pozostawmy komórkę Iza jako składająca się z dwóch sąsiednich komórek, ale dodajmy z powrotem komórkę Marka. Zobaczmy, jak przeglądarka poradzi sobie z tym niewątpliwym błędem.
<table border="3">
<tr>
<td colspan="2">Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Podsumowanie:
- Przeglądarki są bardzo wyrozumiałe. Starają się zinterpretować kod w taki sposób aby strona wyglądała jak najlepiej.
- Bardzo ważne jest, aby starać się określić wszystkie najważniejsze deklaracje warunkujące wygląd strony. Uniemiożliwi to przeglądarkom możliwość ewentualnych nadinterpretacji.
OK..., ponownie usuńmy komórkę Marka.
<table border="3">
<tr>
<td colspan="2">Iza</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Rysiek |
| Asia |
Emilia |
Wojciech |
Usuńmy komórkę Ryśka i jednocześnie zadeklarujmy, że komorka Izy ma się składać z trzech komórek. W ten sposób komórka Izy zostanie rozciągnięta na szerokość całej tabeli. Dodatkowo wyjustujmy jej treść do środka.
<table border="3">
<tr>
<td colspan="3" align="center">Iza</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
Wszystkie dodatkowe fragmenty kodu html umieszczamy wewnątrz komórki tabeli. Możemy np. zboldować napis Iza za pomocą tagu <strong>.
<table border="3">
<tr>
<td colspan="3" align="center"><strong>Iza</strong></td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
Utwórzmy jeszcze ze słowa "Iza" link html do strony głównej AGH.
<table border="3">
<tr>
<td colspan="3" align="center">
<a href="http://www.agh.edu.pl/">Iza</a></td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
Pozbądźmy się wszystkich niepotrzebnych deklaracji i z powrotem przywróćmy komórki Marka i Ryśka. Zajmiemy się teraz łączeniem komórek w rzędach <rowspan>.
<table border="3">
<tr>
<td>Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Asia</td>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Asia |
Emilia |
Wojciech |
Jak można się domyślić, <rowspan> działa jak <colspan>, tyle, że jego działanie obejmuje wiersze zamiast kolumn.
Usuńmy komórkę Asi i połączmy ją z komórką Izy. Oto efekt:
<table border="3">
<tr>
<td rowspan="2">Iza</td>
<td>Marek</td>
<td>Rysiek</td>
</tr>
<tr>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
Rysiek |
| Emilia |
Wojciech |
Oczywiście oba atrybuty można łączyć w różnych kombinacjach.
<table border="3">
<tr>
<td rowspan="2">Iza</td>
<td colspan="2">Marek</td>
</tr>
<tr>
<td>Emilia</td>
<td>Wojciech</td>
</tr>
</table>
| Iza |
Marek |
| Emilia |
Wojciech |
