Kurs XHTML - część szósta
Tabele
Dość często zdarza się, że na stronie należy umieścić dane tabelaryczne, na przykład tabelę kursów walut, czy prezentację wyników jakiegoś doświadczenia. W XHTML istnieje możliwość stworzenia tabeli, jednak jej kod, w przeciwieństwie do innych elementów strony, jest bardzo nieczytelny. Wynika to z faktycznej budowy tabelki, która przecież jest niczym innym jak komórkami połączonymi w wiersze i kolumny.
"Skład" tabeli
Całą zawartość tabeli należy ująć pomiędzy znaczniki <table> oraz </table>.
Tabele zawierają nagłówek (<thead>), stopkę (<tfoot>) oraz ciało (<tbody>). Jedną z ważnych zasad, które żądzą tabelami jest konieczność wystąpienia stopki tabeli przed jej ciałem - przeglądarka i tak wyświetli stopkę w jej prawidłowym miejscu. Chociaż rozróżnienie zawartości tabeli na bloki nagłówka, stopki i ciała jest opcjonalne lepiej jest używać chociażby samego oznaczenia ciała (<tbody>).
Tabela podzielona jest na wiersze (<tr>), a wiersze na komórki (<td>). Istnieje również specjalny typ komórki - komórka nagłówka (<th>).
Tabela może posiadać tytuł, który jest definiowany przy pomocy znaczników <caption> oraz </caption>. Dodatkowo można (a nawet powinno się) streścić tabelę przy pomocy parametru summary w znaczniku <table>.
Przykład prostej tabeli:
<table summary="Wyniki moich badań nad populacją mrówek"> <caption>Ilość zaobserwowanych mrówek w zależności od pory dnia</caption> <thead> <tr><th>Pora dnia</th><th>Rano</th><th>Po południu</th><th>W nocy</th></tr> </thead> <tfoot> <tr><th>Średnio:</th><td>200</td><td>100</td><td>400</td></tr> </tfoot> <tbody> <tr><th>Dzień 1</th><td>190</td><td>110</td><td>450</td></tr> <tr><th>Dzień 2</th><td>200</td><td>90</td><td>350</td></tr> <tr><th>Dzień 3</th><td>210</td><td>100</td><td>400</td></tr> </tbody> </table>
Powyższa tabela powinna zostać zaprezentowana w podobny sposób:
| Pora dnia | Rano | Po południu | W nocy |
|---|---|---|---|
| Średnio: | 200 | 100 | 400 |
| Dzień 1 | 190 | 110 | 450 |
| Dzień 2 | 200 | 90 | 350 |
| Dzień 3 | 210 | 100 | 400 |
Jak zapewne zauważyliście, kod tabeli jest bardzo trudny do analizy. W takich tabelach jak ta powyżej, gdzie komórki zawierają mało znaków, należy solidnie wysilać wzrok, by móc oddzielić znaczniki od zawartości komórek.
Na koniec jeszcze jedna ważna uwaga: tabele nie służą do tworzenia layoutów stron!
