Tabele

W tym rozdziale dowiesz się...

• W jaki sposób ustalić położenie podpisu (tytułu) tabeli?
• W jaki sposób przeglądarka oblicza rozmiary poszczególnych komórek tabeli? W jaki sposób wyświetlić tabelę bardzo wydajnym algorytmem?
• Jak dodać efektowne obramowanie tabeli i jej komórek? Jak wprowadzić nowy, estetyczny model obramowania w tabeli za pomocą pojedynczych linii?
• Jak zmienić odstępy pomiędzy sąsiednimi komórkami tabeli? Jak ustawić pionowy odstęp inny niż poziomy?
• Co zrobić, aby wokół pustych komórek tabeli wyświetlało się obramowanie?
• Jak zmieniać rozmiary elementów tabeli: wierszy, kolumn, komórek?

Podpis

selektor { caption-side: ustawienie }

Określa ustawienie podpisu tabeli (znacznik <caption>...</caption>).

UWAGA! Niestety Internet Explorer 6 nie interpretuje tego polecenia.

Przykład:

Rozplanowanie

(interpretuje Mozilla/Firefox, Opera, Internet Explorer 5, ale nie Internet Explorer 4)

selektor { table-layout: rozplanowanie }

Rozplanowanie automatyczne (table-layout: auto)

Jest to domyślny algorytm renderowania tabel. Szerokość tabeli zależy od szerokości poszczególnych kolumn. Aby ustalić ostateczne rozplanowanie, przeglądarka musi odczytać całą zawartość tabeli. Dlatego algorytm ten jest mniej efektywny. Najpierw wyznaczane są tzw. minimalne i maksymalne możliwe szerokości poszczególnych kolumn.

Minimalna możliwa szerokość to najmniejszy rozmiar, do którego można ścieśnić komórkę tak, aby jej zawartość mieściła się jeszcze w jej obrębie. Jeżeli w komórce znajduje się tylko obrazek lub inny element o ustalonych rozmiarach, to określa on minimalną możliwą szerokość takiej komórki. Natomiast w przypadku tekstu będzie to zwykle szerokość najdłuższego wyrazu (biorąc pod uwagę, że tekst może się zawijać do następnych linii).

Maksymalna możliwa szerokość to największy rozmiar, do którego można rozszerzyć komórkę tak, aby nie powstały wolne przestrzenie po lewej lub/i po prawej jej stronie. Jeżeli w komórce znajduje się tylko obrazek lub inny element o ustalonych rozmiarach, to określa on maksymalną możliwą szerokość takiej komórki. Natomiast w przypadku tekstu będzie to długość całego tekstu zapisanego w jednej linii (bez zawijania).

Przebieg pierwszej części algorytmu jest następujący:

1. Obliczana jest minimalna i maksymalna możliwa szerokość każdej komórki tabeli. Jeżeli określono szerokość komórki, wartość ta stanowi minimalną jej szerokość.
2. Na podstawie wyznaczonych wartości, obliczana jest minimalna i maksymalna szerokość każdej kolumny. Wartość minimalną określa komórka z wyznaczoną największą szerokością minimalną, która znajduje się w danej kolumnie tabeli. Analogicznie wartość maksymalną określa komórka z wyznaczoną największą szerokością maksymalną.
3. Dla każdej komórki, która rozciąga się na więcej niż jedną kolumnę, minimalne szerokości kolumn są zwiększane tak, że w sumie będą przynajmniej tak szerokie, jak ta komórka. To samo odbywa się dla szerokości maksymalnych. Jeżeli to możliwe, kolumny połączone są poszerzane w zbliżonym stosunku.

Wyznaczone wartości możliwych minimalnych i maksymalnych szerokości poszczególnych kolumn wpływają na ostateczną szerokość tabeli w następujący sposób:

1. Jeżeli tabela ma zdefiniowaną szerokość inną niż "auto", ostateczna szerokość tabeli jest określona przez większą z wartości: odgórnie ustalona szerokość tabeli oraz suma minimalnych szerokości poszczególnych kolumn powiększona o odstępy między komórkami i obramwanie. Jeżeli odgórnie ustalona szerokość tabeli jest większą wartością, poszczególne kolumny są poszerzane w odpowiednich proporcjach.
2. Jeżeli tabela nie ma określonej szerokości albo szerokość ta ma przypisaną wartość "auto", na ostateczną szerokość tabeli wpływa większa z wartości: szerokość bloku obejmującego tabeli oraz suma minimalnych szerokości poszczególnych kolumn powiększona o odstępy między komórkami i obramowanie. Jednakże, jeżeli suma wyznaczonych maksymalnych możliwych szerokości kolumn plus odstępy między komórkami i obramowanie jest mniejsza niż szerokość bloku obejmującego, tabela przyjmuje właśnie tą szerokość, a nie rozmiar bloku obejmującego.

Rozplanowanie ustalone (table-layout: fixed)

W tym algorytmie poziome rozplanowanie tabeli nie zależy od zawartości komórek, ale od szerokość tabeli, kolumn oraz odstępów między komórkami i obramowania. Dlatego też takie tabele są renderowane szybciej. Szerokość tabeli w tym algorytmie powinna być określona odgórnie. Jeżeli nie zostanie to zrobione albo przypiszemy wartość "auto", oznacza to, że tabela zostanie wyrenderowana przy użyciu table-layout: auto. Jednakże w takim przypadku przeglądarka może (choć nie musi) spróbować określić tą szerokość za pomocą równania opisującego rozmiar poziomy elementów blokowych, nie-zastępowalnych. Szerokość każdej kolumny jest wyznaczana następująco:

1. Odgórne określenie szerokości danej kolumny (nie komórki), ostatecznie ustala szerokość takiej kolumny.
2. W przeciwnym razie, jeżeli w pierwszym wierszu znajduje się komórka z ustaloną szerokością, określa ona szerokość całej kolumny. Jeżeli taka komórka rozciąga się na więcej niż jedną kolumnę, jej szerokość jest dzielona na poszczególne kolumny.
3. Wszystkie inne kolumny dzielą pozostałą szerokość tabeli (minus odstępy między komórkami i obramowanie).

Ostateczna szerokość tabeli jest wyznaczona przez większą z wartości: szerokość tabeli określona odgórnie oraz suma szerokości poszczególnych kolumn plus odstępy między komórkami i obramowanie. Jeżeli odgórnie ustalona szerokość tabeli jest większa niż opisana suma, to ta dodatkowa szerokość jest dzielona pomiędzy kolumnami.

Tworząc tabelę w jeżyku HTML, można pomijać końcowe komórki z dowolnego wiersze, tzn. poszczególne wiersze mogą zawierać inną liczbę komórek, nawet jeżeli żadne komórki nie zostały jawnie połączone. Nie jest to błąd. W takim przypadku przeglądarka ma obowiązek automatycznie dopełnić "luki" pustymi komórkami. Jednak w przypadku użycia table-layout: fixed przeglądarka może zacząć wyświetlać tabelę już po odczytaniu pierwszego jej wiersza, dlatego nie zostało zdefiniowane, co się stanie, kiedy w pierwszym wierszu tabeli będzie brakowało komórek.

Stosując table-layout: fixed nie opuszczaj żadnych komórek w pierwszym wierszu tabeli!

Zachowanie przeglądarek:
W Microsoft Internet Explorerze 6 w przypadku użycia table-layout: fixed bez odgórnego określenia szerokości tabeli, zwykle będzie ona miała szerokość całej strony, bez względu na treść zawartą w komórkach. Dodatkowo wszystkie kolumny takiej tabeli mają wtedy jednakową szerokość. Jeżeli tekst w komórce nie będzie mógł zostać przełamany, część treści zostanie ukryta!
Netscape 7/Mozilla/Firefox i Opera 8 nie stosują algorytmu table-layout: fixed, jeśli jawnie nie zostanie określona szerokość tabeli. W takim przypadku przyjmowany jest algorytm domyślny, tzn. table-layout: auto.

Aby uniknąć problemów zawsze ustalaj szerokość tabel, które mają być wyświetlane za pomocą algorytmu table-layout: fixed!

Ponadto przeglądarki oparte na silniku Gecko (Netscape/Mozilla/Firefox) inaczej wyświetlają treść, która nie mieści się w komórkach tabeli renderowanej algorytmem table-layout: fixed. Mianowicie o ile w MSIE 6 oraz Operze 8 taka treść jest po prostu ucinana, to przeglądarki oprate na Gecko wyświetlają ją na ekranie ponad pozostałą treścią tabeli i strony. Wygląda to oczywiście niezbyt estetycznie. Tej przykrej właściwości można się pozbyć, określając odpowiednie przepełnienie dla treści w takich komórkach.

Przykład:

Obramowanie

Model obramowania

selektor { border-collapse: model }

Polecenie określa model wyświetlania obramowania tabeli pomiędzy komórkami. Możliwe jest użycie obramowania w postaci pojedynczej linii (collapse) albo obramowania dla każdej komórki osobno, które będą od siebie odseparowane (separate).

UWAGA! MSIE 4 oraz Netscape 6 nie interpretują tego polecenia. W MSIE 5 mogą wystąpić pewne trudności przy przewijaniu tabeli z modelem collapse (czasem znikają linie obramowania). Natomiast w MSIE 6, Netscape 7 oraz Operze 6 wszystko jest w porządku.
Poza tym Opera 7 w przypadku collapse całkowicie ukrywa obramowanie poszczegółnych komórek tabeli (można je pokazać określając obramowanie przy użyciu selektora TD).

Przykład:

Styl, szerokość i kolor obramowania

Do tabel (<table>...</table>) oraz ich komórek (<td>...</td>) można stosować wszystkie parametry dotyczące obramowania.

Przykład:

Odstępy między komórkami

(interpretuje Netscape 6/Mozilla/Firefox i Opera 6)

selektor { border-spacing: odstęp }

Ustala poziomy i pionowy odstęp między komórkami.

UWAGA! Niestety Internet Explorer 6 nie interpretuje tego polecenia.

Przykład:

Puste komórki

(interpretuje Netscape 6/Mozilla/Firefox i Opera 6)

selektor { empty-cells: sposób }

Polecenie określa czy obramowanie wokół pustych komórek tabeli ma zostać pokazane czy ukryte.

UWAGA! Niestety Internet Explorer 6 nie interpretuje tego polecenia.

Rozmiary

Do tabel (<table>...</table>), ich komórek (<td>...</td>), wierszy (<tr>...</tr>) oraz kolumn (<colgroup>...</colgroup>) można stosować parametry dotyczące szerokości i wysokości. Odnośnie komórek oraz całej tabeli można ustawić zarówno ich szerokość jak i wysokość. Natomiast dla wiersza możliwe jest określenie tylko wysokości, ponieważ szerokość jest jednocześnie szerokością tabeli. Podobnie dla kolumny można ustalić jedynie jej szerokość, bo wysokość jest wysokością tabeli.

Przykład:

• Rozmiary
• Pozycjonowanie

• Do góry
• Strona główna