Prezentacja danych w tabelach

Co nieco o strukturze tabeli

Tabela jest uniwersalną formą dwuwymiarowej prezentacji danych, zwłaszcza tekstowych i liczbowych. Podstawową jednostką budowy tabeli jest komórka, czyli rubryka. Rozróżniamy komórki przeznaczone na dane i komórki nagłówkowe, które zawierają opis danych. Nie jest przy tym powiedziane, że opisy muszą znajdować się w nagłówku tabeli.

Komórki łączą się w wiersze. Każda komórka musi wchodzić w skład pewnego wiersza, choć może się rozciągać także na kilka wierszy następnych.

Wszystkie komórki zajmujące tę samą pozycję w kolejnych wierszach kolumnę tabeli. Jedna komórka może rozciągać się w poprzek jednej kolumny lub większej ich liczby. Mimo, że w zasadzie tabela ma układ wierszowy, można zarządzać również jej kolumnami.

W tradycyjnym ujęciu wiersz tabeli jest rekordem, czyli jednostką zapisu o ustalonej z góry budowie. Każda taka jednostka służy do przechowywania sformalizowanej informacji o pewnym obiekcie. W takiej interpretacji rubryka służy do przechowywania pojedynczej cechy obiektu, zaś kolumna zawiera opisy danej cechy wszystkich ujętych w tabeli obiektów.

Kolumny można grupować w grupy kolumn, czyli grupy pionowe. Wiersze tabeli można grupować w grupy wierszy, czyli grupy poziome. Szczególnym przypadkiem grup poziomych są: główka tabeli oraz jej stopka. Powinny one zawierać takie opisy (np. nagłówki kolumn), które należałoby powtórzyć w razie podziału tabeli na części (np. przy wydruku).

Tabela może być opatrzona stowarzyszonym z nią podpisem. Podpis powinien wskazywać na zawartość tabeli, może również zawierać jej automatycznie nadany numer.

Podział tabeli na wiersze, kolumny i grupy może wpływać na sposób jej przedstawiania. Siatka tabeli obejmuje linie oddzielające komórki i grupy od siebie; zależnie od preferencji można sterować ich grubością.

Niżej omówimy na przykładach zasady prezentacji danych w tabelach i techniki tworzenia tabel w dokumentach HTML.

Budowa tabel HTML

Tabele tworzymy, korzystając z elementu table.

<table>zawartość-tabeli</table>

Tabele mają strukturę wierszową. Wiersz tabeli umieszczamy w elemencie tr (ang. table row).

<table>
<caption>podpis tabeli</caption>
<tr>wiersz tabeli</tr>
<tr>wiersz tabeli</tr>
<tr>wiersz tabeli</tr>
<tr>wiersz tabeli</tr>
<tr>wiersz tabeli</tr>
<tr>wiersz tabeli</tr>
</table>

Tytuł (podpis) tabeli umieszczamy w zakresie elementu caption. Wiersze składają się z komórek. Komórki mogą zawierać dane przeznaczone do prezentacji lub ich opis. Komórkę z danymi tworzymy za pomocą elementu td (table data). Opisy danych umieszczamy w komórkach nagłówkowych. Komóki takie tworzymy korzystając z elementu th (table head). Rozróżnienie między rodzajami komórek umożliwia automatyczne różnicowanie wyglądu danych i ich opisu. Czasami możemy mieć trudności ze stwierdzeniem, co zawiera rubryka: dane czy opis — role te mogą się nakładać na siebie. Zawartość takich „wątpliwych” komórek najlepiej potraktować jako dane (czyli td). Komórki nagłówkowe, mimo ich nazwy, można umieszczać w dowolnym miejscu tabeli, niekoniecznie nad kolumną, np.:

<table>
<caption>podpis tabeli</caption>
<tr>
<th />
<th>nagłówek kolumny 1</th>
<th>nagłówek kolumny 2</th>
</tr>
<tr>
<th>nagłówek wiersza 1</th>
<td>dane</td>
<td>dane</td>
</tr>
<tr>
<th>nagłówek wiersza 2</th>
<td>dane</td>
<td>dane</td>
</tr>
</table>

W najprostszych tabelach wszystkie wiersze składają się z tej samej liczby komórek. I tak, pierwsze komórki wszystkich wierszy tworzą kolumnę pierwszą, następne — kolumnę drugą, itd. Układ tabeli może być bardziej złożony; stosowne przykłady omówimy w dalszej części rozdziału.

Tabela może mieć niewidoczne lub widoczne wszystkie albo niektóre linie siatki:

Zauważmy, że jeżeli komórki nagłówkowe są formatowane inaczej, niż komórki danych, to dzieje się tak ze względu na ich rolę, a nie jawnie określone cechy wyglądu.

W tabelach, których wydruk będzie podzielony między strony, warto zadbać o zdefiniowanie nagłówka (thead) i stopki (tfoot) tabeli, które będą automatycznie rozpoczynać i kończyć każdą część podzielonej tabeli.

Więcej informacji dostarczą przykłady z dalszych stron tego opracowania.

Sterowanie sposobem prezentacji danych w tabeli

Elementom tabeli: komórkom i wierszom (a także kolumnom) można nadawać cechy dotyczące sposobu formatowania, np.:

• wyrównywania poziomego align o dozwolonych wartościach: left, center, justify, right lub char^(a) (wyrównywanie według znaku wiodącego, np. kropki dziesiętnej),
• wyrównywania pionowego valign o dozwolonych wartościach: top, middle, bottom lub baseline,
• szerokości bezwzględnej lub względem tabeli (width).

Wewnątrz komórek można umieszczać polecenia formatowania; w szczególności komórka tabeli może zawierać inną tabelę. Można też sterować sposobem umieszczenia tabeli względem otaczającego tekstu.

Wiersze czy kolumny?

Elementom th i td (oznaczających róznego typu komórki), tr (oznaczających wiersze) i col (służących do zarządzania kolumnami) można przypisywać atrybuty wyrównywania poziomego (align="sposób-wyrównania") i pionowego (valign="sposób-wyrównania"). Najprostszym sposobem wymuszenia wyrównania jest nadanie odpowiedniego atrybutu komórce (komórkom):

<table border="1">
<caption>Sposób wyrównywania zadany za pomocą atrybutów pojedynczych komórek</caption>
<tr><th align="left">opis</th><td align="center">dane</td><td align="right">dane</td></tr>
<tr><th align="left">inny opis</th><td align="center">inne dane</td><td align="right"> inne dane</td></tr>
<tr><th align="left">jeszcze inny opis</th><td align="center">jeszcze inne dane</td><td align="right">jeszcze inne dane</td></tr>
</table>

Sposób ten jest mało elastyczny: w wielu typowych sytuacjach układ kolumn tabeli jest stały, a modyfikacje polegają na dodawaniu lub usuwaniu wierszy. Taka przebudowa tabeli będzie wymagała umieszczania atrybutów przy każdym znaczniku nowego wiersza. Będzie więc pracochłonna i mało odporna na pomyłki.

Mimo, że tabela HTML składa się z wierszy, dostępne są narzędzia pozwalające traktować ją jak zespół kolumn. Z konieczności narzędzia te muszą działać nieco inaczej, niż zwykłe znaczniki: o ile wiersz tabeli tworzy obszar nadający się do objęcia znacznikami, to jedna kolumna składa się z wielu niepołączonych ze sobą obszarów, zatem nie da się jej umieścić między pojedynczym znacznikiem otwierającym i zamykającym. Dlatego element col działa inaczej, niż zwykłe elementy HTML: nie obejmuje żadnego zakresu, a mimo to wpływa na sposób prezentacji kolumn. Układ kolumn deklaruje się umieszczając elementy col w zakresie elementu (lub elementów) colgroup, przed rozpoczęciem wierszowej struktury tabeli. Oto ta sama co poprzednio tabela, z danymi wyrównanymi za pomocą mechanizmów związanych z deklaracją kolumn:

<table border="1">
<caption>Sposób wyrównywania zadany za pomocą atrybutów kolumn</caption>
<colgroup>
<col align="left" />
<col align="center" />
<col align="right" />
</colgroup>
<tr><th>opis</th><td>dane</td><td>dane</td></tr>
<tr><th>inny opis</th><td>inne dane</td><td> inne dane</td></tr>
<tr><th>jeszcze inny opis</th><td>jeszcze inne dane</td><td>jeszcze inne dane</td></tr>
</table>

Ten sposób jest znacznie odporniejszy: nowe wiersze powinny zostać wyrównane zgodnie z wzorcem bez żadnych dodatkowych poleceń. Jednak trzeba go używać ostrożnie, gdyż wiele popularnych przeglądarek nie potrafi go zrealizować.

Tabele zawierające dane liczbowe

Dokładność prezentacji danych liczbowych

Dane liczbowe przedstawiamy z ustaloną dokładnością, zwykle taką samą dla wszystkich danych porównywalnych ze sobą. Różnice w liczbie miejsc dziesiętnych mogą oznaczać różnice w dokładności pomiarów lub obliczeń. Błędem jest pomijanie ostatniej cyfry ułamka dziesiętnego tylko dlatego, że jest ona zerem.

Dane całkowitoliczbowe (np. numery porządkowe, indeksy, rangi) przedstawiamy zawsze jako liczby całkowite: bez części dziesiętnej i bez kropki bądź przecinka.

Wyrównywanie kolumn danych liczbowych

Kolumnę danych liczbowych wolno centrować tylko wtedy, kiedy wszystkie dane mają tę samą ilość cyfr całkowitych i tę samą ilość cyfr dziesiętnych. W przeciwnym razie centrowanie jest niedopuszczalne, gdyż uniemożliwia szybkie czytanie i porównywanie danych. Dane wyrównujemy do prawego marginesu (jeżeli liczba miejsc dziesiętnych jest w całej kolumnie taka sama) lub — jeszcze lepiej — do znaku separatora dziesiętnego.

1. Wyrównywanie według znaku wiodącego w kolumnie, mimo że zgodne z definicją języka HTML, jak dotąd (rok 2008) nie zostalo zaimplementowane w żadnej przeglądarce. Analogiczny mechanizm wyrównywania kolumn dostępny w kaskadowych arkuszach stylów (CSS) został z nich wycofany wskutek braku implementacji. Środowiska oparte na innych standardach, a także niestandardowe sposoby użycia standardu XHTML, pozwalają w pełni wykorzystać zalety wyrównywania kolumn.

Z uwagi na różnice wysokości tekstów w komórkach jednego wiersza (indeksy górne!) dobrze jest wymusić wyrównywanie pionowe w tym wierszu według linii wiodącej. Służy do tego atrybut valign z wartością baseline, umieszczony w znaczniku rozpoczynającym wiersz: <tr valign="baseline">, lub odpowiedni styl.

Komórki obejmujące więcej niż jedną kolumnę lub wiersz

Rozważmy tabelę utworzoną na podstawie następującego tekstu źródłowego:

<table align="center" border="1">
<caption>Liczebniki główne i&nbsp;porządkowe</caption>
<tr><td>jeden</td><td>one</td><td>pierwszy</td><td>first   </td></tr>
<tr><td>dwa</td><td>two</td><td>drugi</td><td>second       </td></tr>
<tr><td>trzy</td><td>three</td><td>trzeci</td><td>third    </td></tr>
<tr><td>cztery</td><td>four</td><td>czwarty</td><td>fourth </td></tr>
<tr><td>pięć</td><td>five</td><td>piąty</td><td>fifth      </td></tr>
<tr><td>sześć</td><td>six</td><td>szósty</td><td>sixth     </td></tr>
</table>

(Techniki efektywnego tworzenia poleceń budujących tabele zostaną omówione w następnym rozdziale.) Jeżeli polecenia te są już zapisane w pliku źródłowym, możemy zobaczyć efekt naszej pracy:

Teraz uzupełnimy teraz tabelę o nagłówek, tak by nadać jej postać:

Pierwszy wiersz nagłówka tabeli składa się z jednej komórki nagłówkowej, rozciągającej się w poprzek czterech kolumn. Oto tekst źródłowy tego wiersza:

<tr><th colspan="4">Liczebniki</th></tr>

Następny wiersz składa się z dwóch komórek nagłówkowych, z których każda zajmuje szerokość dwóch kolumn:

<tr><th colspan="2">główne</th><th colspan="2">porządkowe</th></tr>

Na trzeci wiersz nagłówka składają się cztery „zwykłe” komórki nagłówkowe:

<tr><th>polskie</th><th>angielskie</th><th>polskie</th><th>angielskie</th></tr>

Trzy opisane wyżej wiersze nagłówka umieszczamy wewnątrz elementu thead. Ma to sprawić, że w razie podziału tabeli na strony każda nowa część rozpocznie się od nagłówka. Całą dotychczasową zawartość tabeli umieszczamy wewnątrz elementu tbody. Na zakończenie przytaczamy kompletny tekst źródłowy w ostatecznej postaci:

<table border="1">
<caption>Liczebniki główne i&nbsp;porządkowe</caption>
<thead>
<tr><th colspan="4">Liczebniki</th></tr>
<tr><th colspan="2">główne</th><th colspan="2">porządkowe</th></tr>
<tr><th>polskie</th><th>angielskie</th><th>polskie</th><th>angielskie</th></tr>
</thead>
<tbody>
<tr><td>jeden</td><td>one</td><td>pierwszy</td><td>first   </td></tr>
<tr><td>dwa</td><td>two</td><td>drugi</td><td>second       </td></tr>
<tr><td>trzy</td><td>three</td><td>trzeci</td><td>third    </td></tr>
<tr><td>cztery</td><td>four</td><td>czwarty</td><td>fourth </td></tr>
<tr><td>pięć</td><td>five</td><td>piąty</td><td>fifth      </td></tr>
<tr><td>sześć</td><td>six</td><td>szósty</td><td>sixth     </td></tr>
</tbody>
</table>

Przy budowie następnej tabeli czytelnik może skorzystać z podobieństwa atrybutów colspan i rowspan.

Ta tabela obejmuje pięć kolumn. Pierwsza komórka pierwszego wiersza rozciąga się także na wiersz następny. Dlatego w drugim wierszu są tylko cztery komórki, z których pierwsza będzie umieszczona w drugiej kolumnie tabeli (bo pierwsza kolumna w tym wierszu jest „zajęta”).

Pionowe i poziome grupowanie komórek

Element thead (oznaczający główkę tabeli), elementy tbody (które mogą występować wielokrotnie jeden po drugim) i element tfoot (który nie występuje w naszym przykładzie) dzielą tabelę na grupy poziome. Kolumny można łączyć w grupy pionowe za pomocą elementów colgroup. Niewielka modyfikacja znacznika otwierającego, nadająca mu postać

<table border="1" rules="groups">

sprawi, że linie siatki tabeli będą rozgraniczać tylko obszary grup (poziomych i pionowych):

Inne możliwe wartości atrybutu groups to: all (wszystkie linie), rows (linie rozdzielają wiersze), cols (linie rozdzielają kolumny) lub none (usunięcie linii siatki).

Kolumnom i grupom kolumn tabeli można nadawać określoną szerokość względną lub bezwzględną. Służy do tego atrybut width, który może dotyczyć całej tabeli, grupy kolumn lub pojedynczej kolumny. Wartości bezwzględne podaje się w pikselach; wartości względne (procentowe) odnoszą się do szerokości jednostki nadrzędnej — tzn. do tabeli jako całości albo do grupy obejmującej daną kolumnę.

Uwagi praktyczne

Tworzenie tabel za pomocą edytora plików znakowych

Ręczne wpisywanie poleceń formatowania tabel do pliku źródłowego HTML jest nieco kłopotliwe z uwagi na ich ilość. Wiele pracy można oszczędzić, wpisując do pliku znakowego treść przyszłej tabeli w formacie z separatorami. Separatorem może być znak tabulacji lub dowolny inny znak nie występujący w treści komórek:

jeden	one	pierwszy	first
dwa	two	drugi	second
trzy	three	trzeci	third
cztery	four	czwarty	fourth
pięć	five	piąty	fifth
sześć	six	szósty	sixth

Teraz używając funkcji „wyszukaj i zamień” (search and replace) edytora zastąpimy separatory tekstowe HTML-owymi separatorami komórek:

jeden</td><td>one</td><td>pierwszy</td><td>first
dwa</td><td>two</td><td>drugi</td><td>second
trzy</td><td>three</td><td>trzeci</td><td>third
cztery</td><td>four</td><td>czwarty</td><td>fourth
pięć</td><td>five</td><td>piąty</td><td>fifth
sześć</td><td>six</td><td>szósty</td><td>sixth

Jak widać, tabela nie jest jeszcze gotowa — trzeba dołożyć znaczniki otwarcia i zakończenia wierszy. Można to zrobić za pomocą edytora operującego na kolumnach tekstu (możliwości takie ma na przykład edytor pakietu programistycznego Virtual Pascal oraz edytory wielofunkcyjne, takie jak SciTE lub GNU Emacs).

<table class="ekspozycja-danych" border="1" rules="all">
<caption>Liczebniki główne i&nbsp;porządkowe</caption>
<tr><td>jeden</td><td>one</td><td>pierwszy</td><td>first   </td></tr>
<tr><td>dwa</td><td>two</td><td>drugi</td><td>second       </td></tr>
<tr><td>trzy</td><td>three</td><td>trzeci</td><td>third    </td></tr>
<tr><td>cztery</td><td>four</td><td>czwarty</td><td>fourth </td></tr>
<tr><td>pięć</td><td>five</td><td>piąty</td><td>fifth      </td></tr>
<tr><td>sześć</td><td>six</td><td>szósty</td><td>sixth     </td></tr>
</table>

A oto efekt naszej pracy:

Można też oznaczyć początki wierszy odpowiednim znacznikiem, innym niż separator komórek, np.:

.jeden, one, pierwszy, first;
.dwa, two, drugi, second;
.trzy, three, trzeci, third;
.cztery, four, czwarty, fourth;
.pięć, five, piąty, fifth;
.sześć, six, szósty, sixth;

W tym przypadku znak „.” trzeba zastąpić poleceniem rozpoczęcia wiersza i otwarcia (pierwszej) komórki, czyli <tr><td>; znak „,” — poleceniem zamknięcia komórki i otwarcia następnej komórki, czyli </td><td>; wreszcie znak „;” — poleceniem zamknięcia komórki (ostatniej w wierszu) i zakończenia wiersza, czyli </td></tr>.

Po chwili namysłu zauważymy, że w przedstawionej wyżej procedurze oznaczanie początku i końca wiersza nie jest konieczne. Przecież początek wiersza tabeli pokrywa się z początkiem wiersza pliku znakowego, a koniec wiersza tabeli — z końcem wiersza pliku (nie zawsze tak jest — po prostu o to zadbaliśmy dla ułatwienia sobie życia). Wstępnie przygotowaną zawartość tabeli

jeden	one	pierwszy	first
dwa	two	drugi	second
trzy	three	trzeci	third
cztery	four	czwarty	fourth
pięć	five	piąty	fifth
sześć	six	szósty	sixth

moglibyśmy doprowadzić do ostatecznej postaci stosując ciąg zamian:

(początek wiersza) → (początek wiersza)<tr><td>
(znak tabulacji) → </td><td>
(koniec wiersza) → </td></tr>(koniec wiersza)

czyli w notacji wyrażeń regularnych:

^  →  <tr><td>
\t →  </td><td>
$  →  </td></tr>

Tworzenie tabel za pomocą wizualnego procesora dokumentów

Półautomatyczne tworzenie tabel wspomagają również wizualne środowiska edycji dokumentów, takie jak np. Corel Word Perfect, Microsoft Word, Sun StarWriter czy też OpenOffice Writer, a także graficzne środowiska edycji dokumentów HTML, takie jak Mozilla Composer lub Netscape Composer. Na żądanie użytkownika utworzą one tabelę z przygotowanego fragmentu dokumentu, w którym zawartość wierszy rozdzielono znakami końca akapitu, a zawartość komórek w wierszu — znakami tabulacji (lub innymi separatorami). Możliwe jest także wykonanie czynności odwrotnej, tzn. rozformowania tabeli i przekształcenia jej w tekst rozdzielany znakami tabulacji.

Poniższy dokument, zrealizowany za pomocą użytkowego procesora dokumentów OpenOffice Writer ma za zadanie wskazać, jak opisane wyżej reguły tworzenia tabel zastosować podczas projektowania i formatowania dokumentów w środowiskach użytkowych.

© Copyright 2001–2008 by Jan Jełowicki, Katedra Matematyki Uniwersytetu Przyrodniczego we Wrocławiu
✉ janj@aqua.ar.wroc.pl
⌂ http://karnet.up.wroc.pl/~jasj