Przejdź do treści

Tabele - CSS

W tym rozdziale dowiesz się...

Własności tabel z użyciem arkuszy CSS.

Podpis tabeli {caption-side}

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

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

Przy dodawaniu podpisu tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj.

Przykład {caption-side}

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

Rozplanowanie tabeli {table-layout}

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
Przy definiowaniu rozplanowania tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj.

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}

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

Przy definiowaniu obramowania tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj.

Model obramowania tabeli {border-collapse}

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

Przykład {border-collapse}

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 tabeli {border}

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

Przykład {border}

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


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

Pytania i odpowiedzi

Jak dodać obramowanie do tabeli CSS?

Aby dodać obramowanie do tabeli w CSS, użyj właściwości border na selektorze tabeli lub jej komórek. Na przykład, aby dodać obramowanie do wszystkich komórek tabeli: table { border: 1px solid black }. Możesz dostosować grubość, kolor i styl obramowania według własnych preferencji.

Co robi "border-collapse"?

W CSS, właściwość border-collapse jest używana do określenia, czy obramowania komórek w tabeli mają się stykać, czy zachować odstęp między sobą. Wartość collapse powoduje, że obramowania komórek są zlepione razem, eliminując odstępy między nimi, podczas gdy wartość separate zachowuje odstępy między obramowaniami komórek.

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?

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.

Przy definiowaniu odstępów między komórkami tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj.

Przykład {border-spacing}

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 tabeli {empty-cells}

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

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.

Przy definiowaniu sposobu wyświetlania pustych komórek tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj.

Przykład {empty-cells}

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

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

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.

Przy definiowaniu rozmiarów oraz wyśrodkowania tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj.

Przykład {width, height}

<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

Pytania i odpowiedzi

Jak ustawić szerokość tabeli?

Aby ustawić szerokość tabeli w CSS, można użyć właściwości width i przypisać jej odpowiednią wartość, na przykład: "width: 500px" lub "width: 50%" w zależności od preferencji.

Jak dopasować tabelę do marginesów?

Aby uzyskać efekt autodopasowania rozmiaru tabeli do okna, który jest znany z programu Microsoft Word, można ustawić szerokość tabeli na 100% za pomocą właściwości width, co spowoduje, że tabela zajmie całą dostępna przestrzeń w poziomie, a kolumny dopasują się proporcjonalnie do zawartości. Przykład: <table style="width: 100%">...</table>.

Pytania i odpowiedzi

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

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

Jak dodać obramowanie do tabeli CSS?

Aby dodać obramowanie do tabeli w CSS, użyj właściwości border na selektorze tabeli lub jej komórek. Na przykład, aby dodać obramowanie do wszystkich komórek tabeli: table { border: 1px solid black }. Możesz dostosować grubość, kolor i styl obramowania według własnych preferencji.

Zobacz więcej...

Co robi "border-collapse"?

W CSS, właściwość border-collapse jest używana do określenia, czy obramowania komórek w tabeli mają się stykać, czy zachować odstęp między sobą. Wartość collapse powoduje, że obramowania komórek są zlepione razem, eliminując odstępy między nimi, podczas gdy wartość separate zachowuje odstępy między obramowaniami komórek.

Zobacz więcej...

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

Jak ustawić szerokość tabeli?

Aby ustawić szerokość tabeli w CSS, można użyć właściwości width i przypisać jej odpowiednią wartość, na przykład: "width: 500px" lub "width: 50%" w zależności od preferencji.

Zobacz więcej...

Jak dopasować tabelę do marginesów?

Aby uzyskać efekt autodopasowania rozmiaru tabeli do okna, który jest znany z programu Microsoft Word, można ustawić szerokość tabeli na 100% za pomocą właściwości width, co spowoduje, że tabela zajmie całą dostępna przestrzeń w poziomie, a kolumny dopasują się proporcjonalnie do zawartości. Przykład: <table style="width: 100%">...</table>.

Zobacz więcej...

Powtórka

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

Facebook