Tabele

W tym rozdziale dowiesz się...

Podpis

selektor { caption-side: ustawienie }
Selektorem może być element CAPTION [zobacz: Wstawianie stylów].

Natomiast jako "ustawienie" należy podać:
  • top - podpis na powyżej tabeli
  • bottom - poniżej tabeli
  • left - (wycofano w CSS 2.1) po lewej (interpretuje Opera 6)
  • right - (wycofano w CSS 2.1) po prawej

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

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

caption-side: top
komórka1komórka2
komórka3komórka4


caption-side: bottom
komórka1komórka2
komórka3komórka4


caption-side: left
komórka1komórka2
komórka3komórka4


caption-side: right
komórka1komórka2
komórka3komórka4

Rozplanowanie

selektor { table-layout: rozplanowanie }
Selektorem może być element TABLE [zobacz: Wstawianie stylów].

Natomiast jako "rozplanowanie" należy podać:
  • auto - szerokość tabeli zależy od zawartości komórek (domyślnie)
  • fixed - szerokość tabeli nie zależy od zawartości komórek

Nie obsługuje MSIE do wersji 4 włącznie.

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 ani 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ępowanych (pkt nr 3). 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 języku HTML, można pomijać końcowe komórki z dowolnego wiersza, 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 i 7.0 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, Opera i Chrome 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) oraz Chrome i Opera 9 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 i 7.0 oraz Operze 8 taka treść jest po prostu ucinana, to przeglądarki oprate na Gecko oraz Chrome i Opera 9 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:

table-layout: auto
komórka1Szerokość komórek zależy od zawartościkomórka3
komórka4komórka5komórka6
komórka7komórka8komórka9


table-layout: auto; width: 100%
komórka1Szerokość komórek zależy od zawartościkomórka3
komórka4komórka5komórka6
komórka7komórka8komórka9


table-layout: fixed; width: 100%
komórka1Wszystkie kolumny tej tabeli mają jednakową szerokośćkomórka3
komórka4komórka5komórka6
komórka7komórka8komórka9


table-layout: fixed; width: 100%
komórka1width: 100pxkomórka3
komórka4komórka5komórka6
komórka7komórka8komórka9


table-layout: fixed; width: 100%
komórka1Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórcekomórka3
komórka4komórka5komórka6
komórka7komórka8komórka9


table-layout: fixed; width: 100%
komórka1
Sposób na Netscape/Mozillę/Firefoxa i Operę 9:
<div style="overflow: hidden">
Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce
</div>
komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9

Obramowanie

Model obramowania

selektor { border-collapse: model }
Selektorem może być element TABLE [zobacz: Wstawianie stylów].

Natomiast jako "model" należy podać:
  • collapse - pojedyncze obramowanie
  • separate - komórki są od siebie odseparowane

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:

border-collapse: separate
komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9


border-collapse: collapse
komórka1komórka2komórka3
komórka4komórka5komórka4
komórka7komórka8komórka9

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:

<table style="border: 3mm ridge yellow">
komórka1komórka2
komórka3komórka4


komórka1komórka2
komórka3<td style="border: 3mm ridge yellow">

Odstępy między komórkami

selektor { border-spacing: odstęp }
Selektorem może być element TABLE [zobacz: Wstawianie stylów].

Natomiast jako "odstęp" należy podać wartość, korzystając z jednostek długości. Przy czy możliwe jest podanie:
  • jednej wartości określającej wszystkie odstępy
  • dwóch wartości (rozdzielonych spacją) określających kolejno poziomy oraz pionowy odstęp

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

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

border-spacing: 5mm
komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9


border-spacing: 5mm 2mm
komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9

Puste komórki

selektor { empty-cells: sposób }
Selektorem może być element TABLE, TD lub TH [zobacz: Wstawianie stylów].

Natomiast jako "sposób" należy podać:
  • show - pokaż obramowanie wokół pustych komórek
  • hide - schowaj obramowanie wokół pustych komórek

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

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

empty-cells: hide
komórka1komórka2
Następna komórka jest pusta


empty-cells: show
komórka1komórka2
Następna komórka jest pusta

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:

<table style="width: 80%; height: 15em">
komórka1komórka2
komórka3komórka4


komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8<td style="width: 20em; height: 10em">


Nie można ustawić szerokości wiersza...
komórka1komórka2komórka3
komórka4komórka5komórka6
<tr style="height: 10em">


Nie można ustawić wysokości kolumny...
<colgroup style="width: 20em">komórka1komórka2
komórka3komórka4
komórka5komórka6