selektor { caption-side: ustawienie }
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:
komórka1 | komórka2 |
komórka3 | komórka4 |
komórka1 | komórka2 |
komórka3 | komórka4 |
komórka1 | komórka2 |
komórka3 | komórka4 |
komórka1 | komórka2 |
komórka3 | komórka4 |
selektor { table-layout: rozplanowanie }
Nie obsługuje MSIE do wersji 4 włącznie.
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:
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:
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:
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:
komórka1 | Szerokość komórek zależy od zawartości | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka1 | Szerokość komórek zależy od zawartości | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka1 | Wszystkie kolumny tej tabeli mają jednakową szerokość | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka1 | width: 100px | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka1 | 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 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka1 | komórka3 | |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
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:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka4 |
komórka7 | komórka8 | komórka9 |
Do tabel (<table>...</table>) oraz ich komórek (<td>...</td>
) można stosować wszystkie parametry dotyczące obramowania.
Przykład:
komórka1 | komórka2 |
komórka3 | komórka4 |
komórka1 | komórka2 |
komórka3 | <td style="border: 3mm ridge yellow"> |
selektor { border-spacing: 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:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
selektor { empty-cells: sposób }
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.
komórka1 | komórka2 |
Następna komórka jest pusta |
komórka1 | komórka2 |
Następna komórka jest pusta |
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:
komórka1 | komórka2 |
komórka3 | komórka4 |
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | <td style="width: 20em; height: 10em"> |
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
<tr style="height: 10em"> |
<colgroup style="width: 20em"> | komórka1 | komórka2 |
komórka3 | komórka4 | |
komórka5 | komórka6 |