• 
  Podpis tabeli {caption-side}

  W jaki sposób ustalić położenie podpisu (tytułu) tabeli?

• 
  Rozplanowanie tabeli {table-layout}

  W jaki sposób przeglądarka oblicza rozmiary poszczególnych komórek tabeli? W jaki sposób wyświetlić tabelę bardzo wydajnym algorytmem?

• 
  Obramowanie tabeli {border-collapse, border}

  Jak dodać efektowne obramowanie tabeli i jej komórek? Jak wprowadzić nowy, estetyczny model obramowania w tabeli za pomocą pojedynczych linii?

• 
  Odstępy między komórkami tabeli {border-spacing}

  Jak zmienić odstępy pomiędzy sąsiednimi komórkami tabeli? Jak ustawić pionowy odstęp inny niż poziomy?

• 
  Puste komórki tabeli {empty-cells}

  Co zrobić, aby wokół pustych komórek tabeli wyświetlało się obramowanie?

• 
  Rozmiary tabeli {width, height}

  Jak zmieniać rozmiary elementów tabeli: wierszy, kolumn, komórek?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

selektor { caption-side: ustawienie }

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

Przykład {caption-side}

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
caption-side: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	4 2000-06-28	1 2003-06-23
caption-side: bottom	≤80 2020-02-04	≤72 2020-01-07	≤80 2020-02-07	≤67 2020-03-03	≤13.1 2020-03-24
caption-side: left	❌	❌	❌	❌	❌
caption-side: right	❌	❌	❌	❌	❌
caption-side: top	≤80 2020-02-04	≤72 2020-01-07	≤80 2020-02-07	≤67 2020-03-03	≤13.1 2020-03-24

Rozplanowanie tabeli {table-layout}

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 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!

Przeglądarki 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 treść, która nie mieści się w komórkach tabeli renderowanej algorytmem table-layout: fixed, zostanie wyświetlona na ekranie przykrywając pozostałą zawartość 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}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
table-layout: wartość	14 2011-09-16	1 2004-11-09	12 2015-07-29	7 2003-01-28	1 2003-06-23

Model obramowania tabeli {border-collapse}

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).

Przykład {border-collapse}

Styl, szerokość i kolor obramowania tabeli {border}

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

Przykład {border}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
border-collapse: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	4 2000-06-28	1.2 2004-02-02
border-collapse: collapse	≤80 2020-02-04	≤72 2020-01-07	≤80 2020-02-07	≤67 2020-03-03	≤13.1 2020-03-24
border-collapse: separate	≤80 2020-02-04	≤72 2020-01-07	≤80 2020-02-07	≤67 2020-03-03	≤13.1 2020-03-24

selektor { border-spacing: odstęp }

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

Przykład {border-spacing}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
border-spacing: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	4 2000-06-28	1 2003-06-23

selektor { empty-cells: sposób }

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

Przykład {empty-cells}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
empty-cells: wartość	1 2008-12-11	1 2004-11-09	12 2015-07-29	4 2000-06-28	1.2 2004-02-02

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 {width, height}

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

W jaki sposób ustalić położenie podpisu (tytułu) tabeli?

selektor { caption-side: ustawienie }

Zobacz więcej...

W jaki sposób przeglądarka oblicza rozmiary poszczególnych komórek tabeli? W jaki sposób wyświetlić tabelę bardzo wydajnym algorytmem?

selektor { table-layout: rozplanowanie }

Zobacz więcej...

Jak dodać efektowne obramowanie tabeli i jej komórek? Jak wprowadzić nowy, estetyczny model obramowania w tabeli za pomocą pojedynczych linii?

selektor { border-collapse: model }

Zobacz więcej...

Jak zmienić odstępy pomiędzy sąsiednimi komórkami tabeli? Jak ustawić pionowy odstęp inny niż poziomy?

selektor { border-spacing: odstęp }

Zobacz więcej...

Co zrobić, aby wokół pustych komórek tabeli wyświetlało się obramowanie?

selektor { empty-cells: sposób }

Zobacz więcej...