17.1 Wprowadzenie do tabel

Niniejszy rozdział opisuje model przetwarzania tabel w CSS. Część tego modelu stanowi układ tabeli. Rozdział ten wprowadza dwa algorytmy ustalania układu tabeli. Pierwszy z nich to tzw. algorytm układu stałego tabeli. Jest on w pełni zdefiniowany. Natomiast drugi to algorytm automatycznego układu tabeli. Ten algorytm nie jest w pełni zdefiniowany w tej specyfikacji.

Jeśli chodzi o algorytm automatycznego układu tabeli, kilka popularnych implementacji uzyskało względnie dobre wyniki w zakresie współpracy pod tym kątem.

Układ tabelaryczny służy do reprezentowania wzajemnie powiązanych danych. Autorzy określają te powiązania za pomocą języka dokumentu. Natomiast ich prezentację mogą określić za pomocą CSS 2.1.

W mediach wizualnych tabele można również wykorzystywać do tworzenia układów stron. Elementów tabeli nie należy jednak wykorzystywać do takich celów. Do tego służą własności CSS w połączeniu z elementami strukturalnymi.

Tabelę można wizualnie sformatować jako prostokątną siatkę komórek. Wiersze i kolumny tabeli można łączyć w grupy wierszy i kolumn. Wokół wierszy, kolumn, grup wierszy, grup kolumn oraz komórek można rysować obramowanie (w CSS 2.1 istnieją dwa modele obramowania). Dane w komórce można wyrównać zarówno w pionie jak i poziomie. Dane można także wyrównać we wszystkich komórkach wiersza lub kolumny.

<TABLE>
<CAPTION>Prosta tabela o wymiarach 3x3</CAPTION>
<TR id="row1">
   <TH>Nagłówek 1  <TD>Komórka 1  <TD>Komórka 2
<TR id="row2">
   <TH>Nagłówek 2  <TD>Komórka 3  <TD>Komórka 4
<TR id="row3">
   <TH>Nagłówek 3  <TD>Komórka 5  <TD>Komórka 6
</TABLE>

th { text-align: center; font-weight: bold }

th { vertical-align: baseline }
td { vertical-align: middle }

table   { border-collapse: collapse }
tr#row1 { border: 3px solid blue }
tr#row2 { border: 1px solid black }
tr#row3 { border: 1px solid black }

caption { caption-side: top }

Powyższe przykłady ilustrują sposób współpracy CSS z elementami HTML 4. W języku tym semantyka rozmaitych elementów tabeli (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH oraz TD) jest dobrze zdefiniowana. W innych językach dokumentu (np. aplikacjach XML) może nie być zdefiniowanych elementów tabeli. Dlatego CSS 2.1 pozwala na określanie elementów języka dokumentu jako elementów tabeli za pomocą własności ‚display’. Na przykład poniższe reguły sprawiają, że element FOO będzie pełnił rolę elementu HTML TABLE, a element BAR — elementu CAPTION:

Różne elementy tabeli zostaną opisane w następnym podrozdziale. W tej specyfikacji określenie element tabeli oznacza każdy element wykorzystany do budowy tabeli. "Wewnętrzny" element tabeli to element tworzący wiersz, grupę wierszy, kolumnę, grupę kolumn lub komórkę.

17.2 Model tabel CSS

Model tabel w CSS został oparty na modelu języka HTML 4, w którym struktura tabeli jest ściśle powiązana z jej wizualnym układem. W modelu tym tabela składa się z opcjonalnego podpisu i dowolnej liczby wierszy i komórek. Ten model tabel jest określany jako "wierszowy", ponieważ w języku dokumentu bezpośrednio definiuje się wiersze, nie kolumny. Kolumny są tworzone po zdefiniowaniu wszystkich wierszy — pierwsza komórka każdego wiersza należy do pierwszej kolumny, druga — do drugiej kolumny itd. Wiersze i kolumny można grupować, a tak powstałe grupy oznaczać prezentacyjnie (można np. narysować obramowanie wokół grupy wierszy).

Zatem model składa się z tabel, podpisów, wierszy, grup wierszy, kolumn, grup kolumn oraz komórek.

Model CSS nie wymaga, aby język dokumentu zawierał elementy odpowiadające każdemu z tych składników. W przypadku języków dokumentu (np. aplikacji XML), w których nie ma z góry zdefiniowanych elementów tabeli konieczne jest zdefiniowanie wybranych elementów języka jako elementów tabeli. Do tego służy własność ‚display’. Poniższe wartości własności ‚display’ przypisują zasady formatowania tabelarycznego dowolnym elementom:

table (w języku HTML: TABLE)

Oznacza, że element definiuje tabelę blokową: jest to prostokątny blok biorący udział w kontekście formatowania blokowego.

inline-table (w języku HTML: TABLE)

Oznacza, że element definiuje tabelę śródliniową: jest to prostokątny blok biorący udział w kontekście formatowania śródliniowego.

table-row (w języku HTML: TR)

Oznacza, że element jest wierszem komórek.

table-row-group (w języku HTML: TBODY)

Oznacza, że element tworzy grupę wierszy (może zawierać tylko jeden wiersz).

table-header-group (w języku HTML: THEAD)

Podobne działanie do ‚table-row-group’, ale w formatowaniu wizualnym taka grupa wierszy jest zawsze wyświetlana przed innymi wierszami i grupami wierszy oraz po podpisach tabeli umiejscowionych na górze. W druku wiersz nagłówkowy może zostać powtórzony na każdej stronie objętej przez tabelę. Jeśli tabela zawiera kilka elementów z deklaracją ‚display: table-header-group’, tylko pierwszy z nich zostanie zaprezentowany jako nagłówek. Pozostałe będą potraktowane tak, jakby miały deklarację ‚display: table-row-group’.

table-footer-group (w języku HTML: TFOOT)

Podobne działanie do ‚table-row-group’, ale w formatowaniu wizualnym taka grupa wierszy jest zawsze wyświetlana po innych wierszach i grupach wierszy oraz przed podpisami tabeli umiejscowionymi na dole. W druku wiersz stopki może zostać powtórzony na każdej stronie objętej przez tabelę. Jeśli tabela zawiera kilka elementów z deklaracją ‚display: table-footer-group’, tylko pierwszy z nich zostanie zaprezentowany jako stopka. Pozostałe będą potraktowane tak, jakby miały deklarację ‚display: table-row-group’.

table-column (w języku HTML: COL)

Oznacza, że element jest kolumną komórek.

table-column-group (w języku HTML: COLGROUP)

Oznacza, że element tworzy grupę kolumn (może zawierać tylko jedną kolumnę).

table-cell (w języku HTML: TD, TH)

Oznacza, że element reprezentuje komórkę tabeli.

table-caption (w języku HTML: CAPTION)

Określa podpis tabeli. Wszystkie elementy, których własność ‚display’ jest ustawiona na table-caption’ muszą zostać zaprezentowane, zgodnie z podrozdziałem 17.4.

Elementy zastępowany mające te wartości własności ‚display’ są traktowane tak, jak wartości te określają. Na przykład obraz mający własność ‚display’ ustawioną na ‚table-cell’ wypełni dostępną przestrzeń komórkową, a jego wymiary mogą zostać użyte przez algorytmy obliczające wymiary tabeli, tak jak się to dzieje w przypadku zwykłych komórek.

Elementy, których własność ‚display’ jest ustawiona na ‚table-column’ lub ‚table-column-group’ nie są prezentowane (tak, jakby miały własność ‚display’ ustawioną na none’). Są one jednak przydatne, ponieważ mogą posiadać atrybuty definiujące styl kolumn, które reprezentują.

Zastosowanie tych wartości w języku HTML ilustruje domyślny arkusz stylów dla języka HTML 4 znajdujący się w dodatku:

Aplikacje klienckie mogą ignorować te wartości własności ‚display’ zdefiniowane dla elementów HTML, ponieważ tabele HTML mogą być prezentowane przy użyciu innych algorytmów zapewniających zgodność wsteczną w zakresie prezentacji tabel. Nie oznacza to jednak, że nie należy stosować własności ‚display: table’ na rzecz innych, nietabelarycznych, elementów HTML

17.2.1 Anonimowe obiekty tabel

Niektóre inne niż HTML języki dokumentu mogą nie udostępniać wszystkich elementów dostępnych w modelu tabel CSS 2.1. Wówczas, aby model działał, konieczne jest niejawne utworzenie "brakujących" elementów. Każdy element tabeli automatycznie generuje wokół siebie potrzebne obiekty tabel. Następujące trzy zagnieżdżone obiekty są tworzone zawsze: element ‚table’ lub ‚inline-table’, element ‚table-row’ oraz element ‚table-cell’. Brakujące elementy generują obiekty anonimowe (np. pola anonimowe w wizualnym układzie tabeli) według następujących zasad:

1. Jeśli rodzic P pola typu ‚table-cell’ T nie jest typu ‚table-row’, między P i T zostanie wygenerowane pole odpowiadające typowi ‚table-row’. Pole to będzie obejmowało wszystkie kolejne siostrzane pola typu ‚table-cell’.
2. Jeśli rodzic P pola typu ‚table-row’ T nie jest polem typu ‚table’, ‚inline-table’, ‚table-header-group’, ‚table-footer-group’ lub ‚table-row-group’, między P i T zostanie wygenerowany element odpowiadający typowi ‚table’. Jeśli P jest polem typu ‚inline’, wygenerowane pole musi być typu ‚inline-table’. Pole to będzie obejmować wszystkie kolejne pola siostrzane pola T wymagające rodzica typu ‚table': ‚table-row’, ‚table-row-group’, ‚table-header-group’, ‚table-footer-group’, ‚table-column’, ‚table-column-group’ oraz ‚table-caption’. Pole T i jego pola siostrzane mogą również być anonimowymi polami typu ‚table-row’ wygenerowanymi wg zasady 1.
3. Jeśli rodzic P pola typu ‚table-column’ T nie jest polem typu ‚table’, ‚inline-table’ lub ‚table-column-group’, między P i T zostanie wygenerowany element odpowiadający typowi ‚table’. Jeśli P jest polem typu ‚inline’, wygenerowane pole musi być typu ‚inline-table’. Pole to będzie obejmować wszystkie kolejne pola siostrzane pola T wymagające rodzica typu ‚table': ‚table-row’, ‚table-row-group’, ‚table-header-group’, ‚table-footer-group’, ‚table-column’, ‚table-column-group’ oraz ‚table-caption’, włącznie z anonimowymi polami typu ‚table-row’ wygenerowanymi wg zasady 1.
4. Jeśli rodzic P pola typu ‚table-row-group’ (lub ‚table-header-group’, ‚table-footer-group’ lub ‚table-column-group’ albo ‚table-caption’) T nie jest polem typu ‚table’ lub ‚inline-table’, między P i T zostanie wygenerowany element odpowiadający typowi ‚table’. Jeśli P jest polem typu ‚inline’, wygenerowane pole musi być typu ‚inline-table’. Pole to będzie obejmować wszystkie kolejne pola siostrzane pola T wymagające rodzica typu ‚table': ‚table-row’, ‚table-row-group’, ‚table-header-group’, ‚table-footer-group’, ‚table-column’, ‚table-column-group’ oraz ‚table-caption’, włącznie z anonimowymi polami typu ‚table-row’ wygenerowanymi wg zasady 1.
5. Jeśli dziecko T pola typu ‚table’, ‚inline-table’, ‚table-row-group’, ‚table-header-group’, ‚table-footer-group’ lub ‚table-row’ jest anonimowym polem śródliniowym zawierającym tylko białe znaki, jest traktowane tak, jakby jego własność ‚display’ była ustawiona na ‚none’.
6. Jeśli dziecko T pola typu ‚table’ (lub ‚inline-table’) P nie jest typu ‚table-row-group’, ‚table-header-group’, ‚table-footer-group’, ‚table-caption’, ‚table-column’, ‚table-column-group’ lub ‚table-row’, między P i T zostanie wygenerowane pole odpowiadające elementowi typu ‚table-row’. Pole to będzie obejmowało wszystkie kolejne pola siostrzane pola T nie będące typu ‚table-row-group’, ‚table-header-group’, ‚table-footer-group’, ‚table-caption’, ‚table-column’, ‚table-column-group’ lub ‚table-row’.
7. Jeśli dziecko T pola typu ‚table-row-group’ (lub ‚table-header-group’ albo ‚table-footer-group’) P nie jest typu ‚table-row’, między P i T zostanie wygenerowane pole odpowiadające elementowi typu ‚table-row’. Pole to będzie obejmować wszystkie kolejne pola siostrzane pola T nie będące typu ‚table-row’.
8. Jeśli dziecko T pola typu ‚table-row’ P nie jest typu ‚table-cell’, między P i T zostanie wygenerowane pole odpowiadające elementowi typu ‚table-cell’. Pole to będzie obejmować wszystkie kolejne pola siostrzane pola T nie będące typu ‚table-cell’.

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

<STACK>
  <ROW>To jest <D>pierwszy</D> wiersz.</ROW>
  <ROW>To jest <D>drugi</D> wiersz.</ROW>
  <ROW>To jest <D>trzeci</D> wiersz.</ROW>
</STACK>

17.3 Kolumny

Komórki tabeli mogą być zaliczane do jednego z dwóch kontekstów: wierszowego i kolumnowego. Jednak w kodzie źródłowym dokumentu komórki zawsze są potomkami wierszy. Niemniej jednak istnieje możliwość modyfikowania pewnych własności komórek poprzez ustawianie własności kolumn.

Poniższe własności dotyczą kolumn i grup kolumn:

‚border’

Własności obramowania mają zastosowanie wobec kolumn tylko wówczas, gdy własność ‚border-collapse’ elementu tabeli jest ustawiona na ‚collapse’. Jeśli warunek ten zostanie spełniony, własności obramowania kolumn zostają przekazane do algorytmu rozstrzygania konfliktów, który dobierze styl obramowania każdej krawędzi wszystkich komórek.

‚background’

Własności tła służą do ustawiania tła komórek w kolumnach, ale tylko pod warunkiem, że tło komórki i wiersza są przezroczyste. Zobacz "Warstwy tabeli i przezroczystość".

‚width’

Własność ‚width’ służy do określania minimalnej szerokości kolumny.

‚visibility’

Jeśli własność ‚visibility’ kolumny zostanie ustawiona na ‚collapse’, żadna z komórek tej kolumny nie zostanie zaprezentowana, a komórki rozciągające się na inne kolumny zostaną obcięte. Ponadto szerokość tabeli zostanie zmniejszona o tyle, ile zajęłaby ta usunięta kolumna. Zobacz "efekty dynamiczne" poniżej. Pozostałe wartości własności ‚visibility’ nie działają.

col { border-style: none solid }
table { border-style: hidden }
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }

17.4 Tabele w modelu formatowania wizualnego

W kontekście modelu formatowania wizualnego tabela może zachowywać się jako element blokowy (‚display: table’) lub śródliniowy (‚display: inline-table’).

W obu przypadkach pole tabeli generuje anonimowe pole zawierające samo pole tabeli oraz pola podpisów (w kolejności z dokumentu). Pola podpisu to pola blokowe zachowujące własne obszary treści, dopełnienia, marginesów oraz obramowania i prezentowane jako w tych polach anonimowych jako normalne bloki. To, czy pola podpisów zostaną umieszczone pod, czy nad polem tabeli zależy od ustawienia własności ‚caption-side’.

Pole anonimowe jest polem blokowym, jeśli tabela jest blokowa lub blokiem śródliniowym, jeśli tabela jest śródliniowa. Pole anonimowe ustanawia kontekst formatowania blokowego. Pole tabeli (nie anonimowe) jest używane przy pionowym wyrównywaniu linii bazowej w elementach typu ‚inline-table’. Szerokość pola anonimowego jest równa szerokości od krawędzi do krawędzi obramowania znajdującego się w nim pola tabeli (zobacz podrozdział 17.5.2). Wartości procentowe własności ‚width’ i ‚height’ tabeli są odnoszone do bloku zawierającego pola anonimowego, nie samego pola anonimowego.

Wartości obliczone własności ‚position’, ‚float’, ‚margin-*’, ‚top’, ‚right’, ‚bottom’ oraz ‚left’ pola tabeli są stosowane na rzecz pola anonimowego zamiast samego pola tabeli. Dla pola tabeli własności te mają wartości domyślne.

17.4.1 Położenie i wyrównanie podpisu tabeli

Własność ta służy do definiowania położenia pola podpisu w odniesieniu do pola tabeli. Opis wartości:

top

Ustawia pole podpisu nad polem tabeli.

bottom

Ustawia pole podpisu pod polem tabeli.

Do określenia poziomego wyrównania zawartości pola podpisu należy użyć własności ‚text-align’.

caption { caption-side: bottom;
          width: auto;
          text-align: left }

17.5 Układ wizualny zawartości tabeli

Elementy wewnętrzne tabeli generują prostokątne pola zawierające treść i mające obramowanie. Komórki również mają dopełnienie. Wewnętrzne elementy tabeli nie mają marginesów.

Układ wizualny tych pól jest ustalany przez prostokątną nieregularną siatkę wierszy i kolumn. Każde pole zajmuje całkowitą liczbę komórek tej siatki określana wg poniższych zasad: Zasady te nie dotyczą języka HTML 4 i jego wcześniejszych wersji. Język ten ma własne ograniczenia dotyczące rozpiętości wierszy i kolumn.

1. Każde pole wiersza zajmuje jeden rząd komórek siatki. Pola wierszy wypełniają tabelę od góry do dołu w kolejności, w jakiej znajdują się w dokumencie (tzn. tabela obejmuje tyle wierszy siatki, ile jest elementów wierszy).
2. Grupa wierszy obejmuje komórki siatki obejmowane przez znajdujące się w niej wiersze.
3. Pole kolumny zajmuje jedną lub więcej kolumn komórek siatki. Pola kolumn są umieszczane obok siebie w kolejności, w jakiej występują. Pierwsze pole kolumny może znajdować się po lewej lub prawej stronie, w zależności od ustawienia własności ‚direction’ tabeli.
4. Grupa kolumn obejmuje komórki siatki obejmowane przez znajdujące się w niej kolumny.
5. Komórki mogą rozciągać się na kilka wierszy lub kolumn. (Mimo że specyfikacja CSS 2.1 nie definiuje sposobu określania liczby obejmowanych wierszy lub kolumn, aplikacja kliencka może mieć specjalne informacje na temat dokumentu źródłowego. W przyszłych wersjach CSS może zostać dodana możliwość wyrażania tych informacji za pomocą składni CSS.) Zatem każda komórka jest prostokątnym polem o szerokości i wysokości jednej lub większej liczby komórek siatki. Górny wiersz tego prostokąta znajduje się w wierszu określonym przez rodzica komórki. Prostokąt ten musi być przesunięty maksymalnie w lewo, ale część komórki znajdująca się w pierwszej zajmowanej przez nią kolumnie nie może nachodzić na żadne inne pole komórki (tzn. komórkę obejmującą wiersz zaczynającą się w poprzednim wierszu) oraz musi znajdować się po prawej stronie wszystkich komórek znajdujących się w tym samym wierszu, ale przed nią w źródle dokumentu. Jeśli tak położona komórka obejmująca kolumnę nachodziłaby na komórkę obejmującą wiersz z poprzedniego wiersza, wynik tego w CSS jest niezdefiniowany: implementacje mogą pozwolić na wzajemne nakładanie się komórek (tak jest w implementacjach HTML) lub przesunąć drugą komórkę w prawo, aby uniknąć nałożenia. (Warunek ten dotyczy tabel, w których własność ‚direction’ ma wartość ‚ltr’. Jeśli własność ta ma wartość ‚rtl’, należy słowa "prawo" i "lewo" w poprzednich dwóch zdaniach zamienić miejscami.)
6. Pole komórki nie może wychodzić poza ostatnie pole wiersza tabeli lub grupy wierszy. Aplikacje klienckie muszą je odpowiednio skrócić.

Krawędzie wierszy, kolumn, grup wierszy oraz grup kolumn w modelu scalania krawędzi pokrywają się z hipotetycznymi liniami siatki, na których krawędzie komórek są wycentrowane. (Dzięki temu, w tym modelu, wiersze dokładnie pokrywają tabelę, nie pozostawiając żadnych luk; to samo dotyczy kolumn.) W modelu oddzielania obramowań krawędzie pokrywają się z krawędziami obramowania komórek. (W tym modelu między wierszami, kolumnami, grupami wierszy i grupami kolumn mogą występować luki odpowiadające własności ‚border-spacing’.)

<table>
<tr><td>1 </td><td rowspan="2">2 </td><td>3 </td><td>4 </td></tr>
<tr><td colspan="2">5 </td></tr>
</table>

17.5.1 Warstwy tabeli i przezroczystość

W celu odnalezienia tła każdej komórki tabeli, poszczególne elementy tej tabeli można wyobrazić sobie tak, jakby znajdowały się na jednej z sześciu pionowa ułożonych warstw. Tło elementu znajdującego się na jednej z tych warstw będzie widoczne tylko wówczas, gdy wszystkie warstwy znajdujące się wyżej będą przezroczyste.

1. Najniższa warstwa to płaszczyzna reprezentująca pole tabeli. Tak jak wszystkie pola, może być przezroczysta.
2. Następna warstwa zawiera grupy kolumn. Każda grupa kolumn rozciąga się od górnej krawędzi komórek znajdujących się w górnym wierszu do dolnej krawędzi komórek znajdujących się w dolnym wierszu oraz od lewej krawędzi pierwszej kolumny z lewej strony do prawej krawędzi ostatniej kolumny po prawej stronie. Tło pokrywa cały obszar wszystkich komórek mających swój początek w grupie kolumn, nawet jeśli wychodzą one poza tę grupę. Ta różnica obszarów nie wpływa na pozycjonowanie obrazu tła.
3. Nad grupami kolumn znajdują się obszary reprezentujące pola kolumn. Wysokość każdej kolumny jest równa wysokości grup kolumn, a szerokość — szerokości normalnej (obejmującej jedną kolumnę) komórki w kolumnie. Tło pokrywa cały obszar wszystkich komórek mających swój początek w kolumnie, nawet jeśli wychodzą one poza tę kolumnę. Ta różnica obszarów nie wpływa na pozycjonowanie obrazu tła.
4. Wyżej znajduje się warstwa grup wierszy. Każda grupa wierszy rozciąga się od górnego lewego rogu swojej najwyżej położonej komórki w pierwszej kolumnie do dolnego prawego rogu swojej najniżej położonej komórki w ostatniej kolumnie.
5. Przedostatnia warstwa zawiera wiersze. Szerokość każdego wiersza jest równa szerokości grup wierszy, a wysokość — wysokości normalnej (obejmującej jeden wiersz) komórki w wierszu. Tło (podobnie jak w przypadku kolumn) pokrywa cały obszar wszystkich komórek mających swój początek w wierszu, nawet jeśli wychodzą one poza ten wiersz, ale ta różnica obszarów nie wpływa na pozycjonowanie obrazu tła.
6. Ostatnia warstwa zawiera komórki. Jak widać na rysunku, mimo że wszystkie wiersze zawierają tę samą liczbę komórek, nie każda z nich może mieć treść. W modelu oddzielania obramowań (własność ‚border-collapse’ ma wartość ‚separate’), jeśli ich własność ‚empty-cells’ ma wartość ‚hide’, te puste komórki są przezroczyste przez wszystkie warstwy do warstwy tabeli, której tło przez nie prześwituje.

Brakująca komórka to taka, komórka siatki wiersza lub kolumny, której nie zajmuje żaden element ani pseudoelement. Brakujące komórki są prezentowane tak, jakby ich miejsce w siatce zajmowało anonimowe pole typu ‚table-cell’.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Przykład tabeli</TITLE>
    <STYLE type="text/css">
      TABLE  { background: #ff0; border: solid black;
               empty-cells: hide }
      TR.top { background: red }
      TD     { border: solid black }
    </STYLE>
  </HEAD>
  <BODY>
    <TABLE>
      <TR CLASS="top">
        <TD> 1
        <TD rowspan="2"> 2
        <TD> 3
        <TD> 4
      <TR>
        <TD> 5
        <TD>
    </TABLE>
  </BODY>
</HTML>

Należy zauważyć, że jeśli własność ‚border-collapse’ tabeli jest ustawiona na wartość ‚separate’, tło obszaru zdefiniowanego przez własność ‚border-spacing’ jest zawsze takie samo, jak elementu tabeli. Zobacz model oddzielania obramowań.

17.5.2 Algorytmy wyznaczania szerokości tabeli: własność ‚table-layout’

Specyfikacja CSS nie definiuje "optymalnego" układu tabeli, ponieważ w wielu przypadkach jest to zależne od osobistych preferencji. CSS nie definiuje warunków, które muszą zostać spełnione przez aplikacje klienckie budujące układ tabeli. Aplikacje klienckie mogą użyć do tego celu dowolnego algorytmu oraz mogą przedkładać szybkość prezentowania nad precyzję. Wyjątkiem jest sytuacja wybrania "stałego układu tabeli".

Zasady opisane w tym podrozdziale zastępują zasady dotyczące obliczania szerokości opisane w podrozdziale 10.3. W szczególności, jeśli marginesy tabeli zostaną ustawione na ‚0’, a szerokość na ‚auto’, tabela nie będzie automatycznie zmieniać rozmiaru, aby dopasować się do bloku zawierającego. Jednak po określeniu wartości obliczonej własności ‚width’ tabeli (przy użyciu algorytmów opisanych poniżej lub, gdy jest to uzasadnione, innych algorytmów aplikacji klienckich) pozostałe części podrozdziału 10.3 mają zastosowanie. W związku z tym tabelę można wyśrodkować przy użyciu wartości ‚auto’ lewego i prawego marginesu.

W przyszłych wersjach CSS mogą zostać dodane mechanizmy umożliwiające automatyczne dopasowywanie rozmiaru tabel do ich bloków zawierających.

Własność ‚table-layout’ służy do wybierania algorytmu rozmieszczenia komórek, wierszy i kolumn tabeli. Opis wartości:

fixed

Algorytm układu stałego tabeli

auto

Algorytm automatycznego układu tabeli

Algorytmy te zostały opisane poniżej.

17.5.2.1 Stały układ tabeli

W tym (szybkim) algorytmie poziomu układ tabeli nie zależy od zawartości komórek, tylko szerokości tabeli, szerokości kolumn oraz obramowania lub odstępów komórkowych.

Szerokość tabeli można określić bezpośrednio za pomocą własności ‚width’. Wartość ‚auto’ (zarówno przy własności ‚display: table’ jak i ‚display: inline-table’) oznacza użycie algorytmu automatycznego układu tabeli. Jeśli natomiast tabela jest blokiem (‚display: table’) w układzie normalnym, aplikacja kliencka może (ale nie musi) użyć algorytmu z podrozdziału 10.3.3 do obliczenia szerokości i zastosować stały układ tabeli, nawet mimo szerokości ustawionej na ‚auto’.

table { table-layout: fixed;
        margin-left: 2em;
        margin-right: 2em }

W algorytmie układu stałego tabeli szerokości kolumn są określane następująco:

1. Szerokość kolumny określa element, którego własność ‚width’ ma wartość inną niż ‚auto’.
2. Inaczej, szerokość kolumny określa komórka z pierwszego wiersza, której własność ‚width’ ma wartość inną niż ‚auto’. Jeśli komórka obejmuje więcej niż jedną kolumnę, szerokość zostanie podzielona między te kolumny.
3. Pozostała pozioma przestrzeń tabeli (po odjęciu obramowania lub przestrzeni komórkowych) zostaje rozdzielona po równo między pozostałe kolumny.

Szerokość tabeli jest równa większej z dwóch wartości: wartości własności ‚width’ elementu tabeli lub sumie szerokości kolumn (plus przestrzenie komórkowe lub obramowanie). Jeśli tabela jest szersza niż suma szerokości kolumn, ta dodatkowa przestrzeń powinna zostać rozdzielona między kolumny.

Jeśli następny wiersz ma więcej kolumn niż większa z następujących wartości: liczba elementów kolumn tabeli i liczba określona przez pierwszy wiersz, dodatkowe kolumny mogą nie zostać zaprezentowane. Specyfikacja CSS 2.1 nie definiuje szerokości kolumn i tabeli jeśli są one prezentowane. Autorzy używający własności ‚table-layout: fixed’ nie powinni opuszczać kolumn w pierwszym wierszu.

W ten sposób aplikacje klienckie mogą zacząć budowę układu tabeli po odebraniu całego pierwszego wiersza. Komórki w kolejnych wierszach nie mają wpływu na szerokości kolumn. Jeśli treść komórki nie mieści się w komórce, o jej potraktowaniu decyduje ustawienie własności ‚overflow’.

17.5.2.2 Automatyczny układ tabeli

W tym algorytmie (który zwykle wymagania nie więcej niż dwóch przejść) szerokość tabeli jest określana przez szerokości jej kolumn (i ich obramowań). Algorytm ten ilustruje sposób działania kilku popularnych aplikacji klienckich HTML (w chwili pisania tej specyfikacji). Aplikacje klienckie nie muszą implementować tego algorytmu, aby określać układ tabeli, gdy własność ‚table-layout’ ma wartość ‚auto. Mogą używać innych algorytmów, nawet jeśli wynik ich działania jest inny.

Do algorytmu automatycznego układu tabeli może zostać przekazana tylko szerokość bloku zawierającego oraz treść, i wszystkie własności CSS, tabeli i jej wszystkich potomków.

Dalsza część tego podrozdziału nie jest normatywna.

Algorytm ten może być mało efektywny, ponieważ do określenia ostatecznego układu tabeli wymaga wczytania przez aplikację kliencką całej treści tabeli oraz może wymagać więcej niż jedno przejście.

Szerokość kolumn jest określana w następujący sposób:

1. Obliczenie minimalnej szerokości treści (MST) każdej komórki: sformatowana treść może obejmować dowolną liczbę linii, ale nie może wychodzić poza pole komórki. Jeśli wartość własności ‚width’ (W) komórki jest większa od MST, minimalna szerokość komórki wynosi W. Wartość ‚auto’ oznacza, że minimalną szerokością komórki jest MST.

   Obliczana jest również "maksymalna" szerokość każdej komórki: formatowanie treści bez złamań wiersza w innych miejscach, niż te, w których znajdują się jawne instrukcje złamania.

2. Określenie maksymalnej i minimalnej szerokości każdej kolumny na podstawie komórek obejmujących tę kolumnę. Wartość minimalna to wartość minimalna wymagana przez komórkę o największej minimalnej szerokości (lub szerokość kolumny, w zależności, która wartość jest większa). Wartość maksymalna to wartość maksymalna wymagana przez komórkę o największej maksymalnej szerokości (lub szerokość kolumny, w zależności, która wartość jest większa).

3. Dla każdej komórki obejmującej więcej niż jedną kolumnę, minimalne szerokości tych kolumn zostają zwiększone o tyle, aby suma ich szerokości była przynajmniej równa szerokości tej komórki. To samo dotyczy szerokości maksymalnych. Jeśli jest to możliwe, wszystkie obejmowane kolumny powinny zostać poszerzone o mniej więcej tę samą wartość.

4. Dla każdego elementu grupy kolumn o szerokości innej niż ‚auto’ minimalna szerokość obejmowanych przez niego kolumn zostaje zwiększona o tyle, aby suma ich szerokości była przynajmniej równa szerokości tej grupy kolumn.

W ten sposób są wyznaczane maksymalne i minimalne szerokości kolumn. Szerokości kolumn mają następujący wpływ na ostateczną szerokość tabeli:

1. Jeśli własność ‚width’ elementu typu ‚table’ lub ‚inline-table’ ma wartość obliczoną (W) inną niż ‚auto’, wartość tej własności używana do budowania układu jest większą wartością z następujących: W lub minimalna szerokość wymagana przez wszystkie kolumny plus przestrzeń komórkowa lub obramowania (MIN). Jeśli wartość W jest większa od MIN, dodatkowa przestrzeń powinna zostać rozdzielona między kolumny.
2. Jeśli element typu ‚table’ lub ‚inline-table’ ma własność ‚width: auto’, szerokość tabeli używana do budowania układu jest równa szerokości bloku zawierającego tabeli lub wartości MIN, w zależności, która z tych dwóch jest większa. Jeśli jednak maksymalna szerokość wymagana przez kolumny plus przestrzeń komórkowa lub obramowanie (MAX) są mniejsze od szerokości bloku zawierającego, zostanie użyta wartość MAX.

Wartość procentowa określająca szerokość kolumny jest odnoszona do szerokości tabeli. Jeśli tabela ma własność ‚width: auto’, wartość procentowa stanowi warunek dotyczący szerokości kolumny, który aplikacje klienckie powinny próbować spełnić. (Oczywiście nie zawsze jest to możliwe. Jeśli szerokość kolumny wynosi ‚110%’, warunku tego nie da się spełnić.)

17.5.3 Algorytmy wyznaczania wysokości tabeli

Wysokość tabeli tworzonej przez elementy typu ‚table’ i ‚inline-table’ jest określana przez własność ‚height’. Wartość ‚auto’ oznacza, że wysokość stanowi suma wysokości wierszy plus przestrzenie komórkowe lub obramowanie. Wszystkie inne wartości są traktowane jako wysokość minimalna. Specyfikacja CSS 2.1 nie określa co dzieje się z dodatkową przestrzenią powstałą, gdy własność ‚height’ określa większą wysokość niż byłaby, gdyby tej własności nie zastosowano. Uwaga: W przyszłych wersjach CSS może to zostać uściślone.

Wysokość pola elementu typu ‚table-row’ jest obliczana po otrzymaniu przez aplikację kliencką wszystkich komórek danego wiersza. Jest to większa z następujących dwóch wartości: wysokość wiersza określona przez własność ‚height’ lub wysokość minimalna (MIN) wymagana przez komórki. Wartość ‚auto’ własności ‚height’ pola typu ‚table-row’ oznacza, że wysokość wiersza w układzie wynosi MIN. Wartość MIN zależy od wysokości pól komórek i ich wyrównania (podobnie jak w obliczaniu wysokości pól liniowych). Specyfikacja CSS 2.1 nie definiuje sposobu obliczania procentowych wysokości komórek i wierszy tabeli. Specyfikacja CSS 2.1 nie definiuje znaczenia własności ‚height’ dla grup wierszy.

W CSS 2.1 wysokość pola komórki jest równa większej z następujących wartości: wartość własności ‚height’ komórki tabeli lub minimalna wysokość wymagana przez treść (MIN). Wartość ‚auto’ własności ‚height’ implikuje użycie wartości MIN.

Specyfikacja CSS 2.1 nie definiuje wpływu komórek obejmujących więcej niż jeden wiersz na obliczenia wysokości wiersza z tym wyjątkiem, że suma wysokości obejmowanych wierszy nie może być mniejsza od wysokości obejmującej je komórki.

Własność ‚vertical-align’ komórki tabeli określa jej wyrównanie w wierszu. Treść każdej komórki ma linię bazową, krawędź górną, linię środkową oraz krawędź dolną, tak jak sam wiersz. W kontekście tabel wartości własności ‚vertical-align’ mają następujące znaczenie:

baseline

Linia bazowa komórki mieści się na tej samej wysokości, co linia bazowa pierwszego obejmowanego przez nią wiersza (definicje linii bazowych komórek i wierszy znajdują się poniżej).

top

Krawędź górna pola komórki pokrywa się z krawędzią górną pierwszego obejmowanego przez nią wiersza.

bottom

Krawędź dolna pola komórki pokrywa się z krawędzią dolną ostatniego obejmowanego przez nią wiersza.

middle

Linia środkowa komórki pokrywa się z linią środkową wierszy, które komórka ta obejmuje.

sub, super, text-top, text-bottom, <length>, <percentage>

Te wartości nie dotyczą komórek. Komórka zostanie wyrównana do linii bazowej.

Linia bazowa komórki to linia bazowa pierwszego pola liniowego należącego do układu w tej komórce lub pierwszego wiersza tabeli należącego do układu w komórce, w zależności, co jest pierwsze. Jeśli nie ma takiego pola liniowego lub wiersza tabeli, linią bazową jest krawędź dolna treści pola komórki. Na potrzeby określania linii bazowej, pola należące do układu zawierające mechanizmy przewijania (zobacz własność ‚overflow’) muszą być używane w stanie jakby były przewinięte do oryginalnego położenia. Należy zauważyć, że linia bazowa komórki może wypaść poza jej dolną krawędzią obramowania (zobacz przykład poniżej).

Do ustawiania linii bazowej wiersza wykorzystywana jest największa odległość między górną krawędzią pola komórki, a linią bazową komórki spośród wszystkich komórek mających własność ‚vertical-align: baseline’. Oto przykład:

Pola komórek 1 i 2 są wyrównane do linii bazowych. Pole komórki 2 ma największą wysokość nad linią bazową, a więc określa linię bazową wiersza.

Jeśli w wierszu nie ma ani jednego pola komórki wyrównanego do linii bazowej, jego linią bazową jest dolna krawędź treści najniżej położonej komórki w tym wierszu.

W celu uniknięcia wieloznaczności, wyrównywanie komórek odbywa się w następującej kolejności:

1. Jako pierwsze pozycjonowane są komórki wyrównane do linii bazowej. W ten sposób zostanie ustanowiona linia bazowa wiersza. Następnie pozycjonowane są komórki z własnością ‚vertical-align: top’.
2. Na tym etapie wiersz ma określoną krawędź górną, możliwe, że ma linię bazową oraz tymczasową wysokość równą odległości od krawędzi górnej do krawędzi dolnej najniżej położonej komórki z dotychczas ułożonych komórek. (Zobacz poniższe podrozdziały o dopełnieniu w komórkach.)
3. Jeśli którakolwiek z pozostałych komórek, wyrównanych do krawędzi dolnej lub linii środkowej, jest wyższa niż aktualnie wiersz, wysokość wiersza zostanie powiększona do maksimum spośród tych komórek poprzez obniżenie krawędzi dolnej.
4. Następnie zostaje ustalone położenie pozostałych komórek.

Pola komórek, które są niższe od wiersza zostają uzupełnione dopełnieniem od góry lub dołu.

div { height: 0; overflow: hidden; }
<table>
 <tr>
  <td>
   <div> Test </div>
  </td>
 </tr>
</table>

17.5.4 Wyrównanie w poziomie w kolumnie

Wyrównanie poziome treści śródliniowej komórki można ustawić za pomocą własności ‚text-align’ tej komórki.

17.5.5 Dynamiczne efekty wierszy i kolumn

Własność ‚visibility’ przyjmuje wartość ‚collapse’ dla wierszy, grup wierszy, kolumn oraz grup kolumn. Wartość ta powoduje całkowite usunięcie wiersza lub kolumny z widoku i udostępnienie miejsca, które ten wiersza lub ta kolumna by zajmowała innej treści. Zawartość obejmowanych wierszy i kolumn przecinających się z usuniętą kolumną zostaje obcięta. Takie wyłączenie kolumny lub wiersza nie ma jednak żadnego innego wpływu na tabelę. Dzięki temu można dynamicznie usuwać wiersze i kolumny tabeli nie wymuszając zmiany jej układu.

17.6 Obramowanie

W CSS istnieją dwa modele ustawiania obramowania komórek tabeli. Jeden z nich najlepiej nadaje się do ustawiania tzw. obramowań oddzielonych poszczególnych komórek. Natomiast drugi odpowiada ciągłym obramowaniom biegnącym od jednego końca tabeli do drugiego. Wiele stylów obramowania można uzyskać przy użyciu każdego z tych modeli. Dlatego wybór jednego z nich często jest kwestią gustu.

Ta własność służy do wybierania modelu obramowania tabeli. Wartość ‚separate’ oznacza model obramowań oddzielonych. Wartość ‚collapse’ oznacza model obramowań scalonych. Poniżej znajduje się opis tych modeli.

17.6.1 Model obramowań oddzielonych

*) Uwaga: aplikacje klienckie mogą także stosować własność ‚border-spacing’ wobec elementów typu ‚frameset’. To, które elementy są typu ‚frameset’ nie jest przedmiotem niniejszej specyfikacji, lecz języka dokumentu. Na przykład w języku HTML 4 jest to element <FRAMESET>, a w XHTML 1.0 — <frameset>. Zatem własności ‚border-spacing’ dla elementów ‚frameset’ można używać jako poprawnego zastępnika niestandardowego atrybutu ‚framespacing’.

Wartości określają odległość dzielącą obramowania przylegających do siebie komórek. Jeśli zostanie podana tylko jedna wartość, będzie ona oznaczać odstęp pionowy i poziomy. Jeśli zostaną podane dwie wartości, pierwsza określa odstęp poziomy, a druga — pionowy. Wartości te nie mogą być ujemne.

Odległość między obramowaniem tabeli a obramowaniami komórek od strony obramowania tabeli jest równa dopełnieniu tabeli powiększonemu o odstęp ustawiony krawędziowy. Na przykład po prawej stronie odległość ta jest równa prawemu dopełnieniu + poziomy odstęp krawędziowy.

Szerokość tabeli jest równa odległości od krawędzi wewnętrznej lewego dopełnienia do krawędzi wewnętrznej prawego dopełnienia (wliczając odstęp krawędziowy, ale bez dopełnienia i obramowania).

Jednak w językach HTML i XHTML 1 szerokością elementu <table> jest odległość od lewej krawędzi obramowania do prawej krawędzi obramowania.

Uwaga: W CSS 3 ten osobliwy warunek zostanie zdefiniowany w odniesieniu do reguł arkusza stylów aplikacji klienckiej i własności ‚box-sizing’.

W tym modelu każda komórka ma własne obramowanie. Własność ‚border-spacing’ określa odstęp między obramowaniami sąsiadujących komórek. W tych przestrzeniach tła wiersza, kolumny, grupy wierszy i grupy kolumn są niewidoczne, dzięki czemu prześwituje tło tabeli. Wiersze, kolumny, grupy wierszy oraz grupy kolumn nie mogą mieć obramowania (tzn. aplikacje klienckie muszą ignorować własności obramowania zdefiniowane dla tych elementów).

table      { border: outset 10pt;
             border-collapse: separate;
             border-spacing: 15pt }
td         { border: inset 5pt }
td.special { border: inset 10pt }  /* Komórka w lewym górnym rogu */

17.6.1.1 Obramowanie i tło pustych komórek: własność ‚empty-cells’

W modelu obramowań oddzielonych własność ta pozwala kontrolować prezentację obramowań i tła wokół komórek, które nie mają widocznej treści. Treści widocznej nie mają komórki puste oraz komórki, których własność ‚visibility’ została ustawiona na ‚hidden’. Komórka jest pusta, jeśli nie zawiera treści żadnego z poniższych rodzajów:

• treść pływająca (także elementy puste),
• treść należąca do układu (wliczając elementy puste) inna niż białe znaki scalone przez odpowiednio ustawioną własność ‚white-space’.

Jeśli własność ta zostanie ustawiona na wartość ‚show’, obramowanie i tło pustych komórek będą rysowane, tak jak w przypadku zwykłych komórek.

Wartość ‚hide’ oznacza, że obramowanie i tło pustych komórek nie będą rysowane (zobacz punkt 6 w podrozdziale 17.5.1). Ponadto, jeśli wszystkie komórki w wierszu mają wartość ‚hide’ i nie mają widocznej treści, wiersz taki ma zerową wysokość i pionowy odstęp krawędziowy jest ustawiany tylko z jednej jego strony.

table { empty-cells: show }

17.6.2 Model obramowań scalonych

W modelu obramowań scalonych można zdefiniować obramowanie otaczające całą komórkę, wiersz, grupę wierszy, kolumnę lub grupę kolumn lub tylko jej część. W ten sposób można określić obramowanie dla atrybutu "rule" języka HTML.

Krawędzie obramowania są wyrównane na środku linii siatki między komórkami. Aplikacje klienckie muszą stosować jednolitą zasadę zaokrąglania nieparzystych liczb dyskretnych jednostek (pikseli ekranowych, punktów drukarki).

Poniższy schemat przedstawia interakcje zachodzące między szerokością tabeli, szerokościami obramowań, dopełnieniem i szerokością komórek. Relacje te wyraża poniższe równanie, które opisuje każdy wiersz tabeli:

szerokość-wiersza = (0.5 * szerokość-obramowania₀) + dopełnienie-lewe₁ + szerokość₁ + dopełnienie-prawe₁ + szerokość-obramowania₁ + dopełnienie-lewe₂ +…+ dopełnienie-prawe_n + (0.5 * szerokość-obramowania_n)

W równaniu tym n oznacza liczbę komórek w wierszu, dopełnienie-lewe_i i dopełnienie-prawe_i oznaczają lewe i prawe dopełnienie komórki i, natomiast szerokość-obramowania_i oznacza obramowanie między komórkami i oraz i + 1.

Aplikacje klienckie muszą wstępnie obliczyć szerokość lewej i prawej krawędzi obramowania tabeli poprzez sprawdzenie pierwszej i ostatniej komórki w pierwszym wierszu tabeli. Szerokość lewej krawędzi obramowania tabeli jest równa połowie scalonej lewej krawędzi obramowania pierwszej komórki. Szerokość prawej krawędzi obramowania tabeli jest równa połowie scalonej prawej krawędzi obramowania ostatniej komórki. Jeśli dalsze wiersze mają szersze scalone lewą i prawą krawędź obramowania, nadwyżki zostają zaliczone do obszaru marginesu tabeli.

Szerokość górnej krawędzi obramowania tabeli jest obliczana poprzez sprawdzenie wszystkich komórek, których górne krawędzie obramowania są scalane z górną krawędzią obramowania tabeli. Szerokość górnej krawędzi obramowania tabeli jest równa połowie najszerszej po scaleniu górnej krawędzi obramowania. Szerokość krawędzi dolnej obramowania jest obliczana poprzez sprawdzenie wszystkich komórek, których dolne krawędzie obramowania są scalane z dolną krawędzią obramowania tabeli. Szerokość dolnej krawędzi obramowania tabeli jest równa połowie najszerszej po scaleniu górnej krawędzi obramowania.

Krawędzie obramowania nachodzące na obszar marginesu są brane pod uwagę przy sprawdzaniu czy tabela wychodzi poza obszar jednego ze swoich przodków (zobacz ‚overflow’).

Należy zauważyć, że w tym modelu do szerokości tabeli zaliczana jest połowa obramowania tabeli. Ponadto w modelu tym tabela nie ma dopełnienia (ale ma marginesy).

Specyfikacja CSS 2.1 nie określa położenia krawędzi tła elementu tabeli.

17.6.2.1 Rozwiązywanie konfliktów obramowań

W modelu obramować scalonych każda krawędź obramowania każdej komórki może być określona przez własności obramowania różnych elementów, które się w danym miejscu spotykają (komórek, wierszy, grup wierszy, kolumn, grup kolumn i samej tabeli). Obramowania te mogą różnić się szerokością, stylem i kolorem. Podstawowa zasada jest taka, że w każdym przypadku wybierany jest styl obramowania, który "najbardziej rzuca się w oczy". Wyjątkiem jest sytuacja, w której dana krawędź jest bezwarunkowo wyłączona przez styl ‚hidden’.

W przypadku konfliktu, styl wybierany jest wg następujących zasad:

1. Obramowanie, którego własność ‚border-style’ ma wartość ‚hidden’ ma pierwszeństwo przed wszystkimi innymi uczestnikami konfliktu. Krawędź obramowania mająca taką własność zagłusza wszystkie pozostałe krawędzie znajdujące się w tym samym miejscu.
2. Obramowania o stylu ‚none’ mają najniższy priorytet. Jeśli własności wszystkich elementów spotykających się przy danej krawędzi mają styl ‚none’, krawędź zostanie opuszczona (należy zauważyć, że wartość ‚none’ jest domyślną wartością stylu obramowania).
3. Jeśli nie ma ani jednego stylu ‚hidden’ i jest przynajmniej jeden nie jest ‚none’, faworyzowane są szersze obramowania. Jeśli kilka krawędzi ma tę samą wartość własności ‚border-width’, preferencje stylów są następujące: ‚double’, ‚solid’, ‚dashed’, ‚dotted’, ‚ridge’, ‚outset’, ‚groove’ oraz (najniższy priorytet) ‚inset’.
4. Jeśli style krawędzi różnią się tylko kolorem, styl komórki wygrywa ze stylem wiersza, który z kolei wygrywa z grupą wierszy, kolumną, grupą kolumn i w końcu tabelą. Jeśli wystąpi konflikt dwóch elementów tego samego typu, wygrywa ten, który jest położony bliżej lewego (jeśli własność ‚direction’ tabeli ma wartość ‚ltr'; prawego w przypadku wartości ‚rtl’) górnego rogu.

table          { border-collapse: collapse;
                 border: 5px solid yellow; }
*#col1         { border: 3px solid black; }
td             { border: 1px solid red; padding: 1em; }
td.cell5       { border: 5px dashed blue; }
td.cell6       { border: 5px solid green; }

<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4
    <TD class="cell5"> 5
    <TD class="cell6"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3 Style obramowania

Niektóre wartości własności ‚border-style’ mają w tabelach inne znaczenie niż w innych elementach. Zostały one w poniższej liście oznaczone gwiazdką.

none

Brak obramowania.

*hidden

To samo, co ‚none’, ale w modelu obramowań scalonych wyłącza także inne obramowania (zobacz podrozdział o konfliktach obramowań).

dotted

Obramowanie składa się z kropek.

dashed

Obramowanie składa się z kresek.

solid

Obramowanie jest linią ciągłą.

double

Obramowanie składa się z dwóch linii ciągłych. Wartością własności ‚border-width’ jest suma tych dwóch linii i dzielącej je przestrzeni.

groove

Obramowanie wygląda, jakby było wyrzeźbione w kanwie.

ridge

Przeciwieństwo ‚groove’. Obramowanie wygląda, jakby było wypukłe.

*inset

W modelu obramowań oddzielonych obramowanie takie sprawia, że całe pole wygląda, jakby było wbudowane w kanwę. W modelu obramowań scalonych wartość ta działa tak samo, jak ‚ridge’.

*outset

W modelu obramowań oddzielonych obramowanie takie sprawia, że całe pole wygląda, jakby wychodziło z kanwy. W modelu obramowań scalonych wartość ta działa tak samo, jak ‚groove’.