Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Tabele

Kondensowanie obramowań komórek

Email Drukuj PDF

Tematy: położenie tytułu tabeli | puste komórki | generowanie układu tabeli | odstępy między komórkami | kondensowanie obramowań komórek

Dane w pigułce
Zastosowanie pozwala określić, czy obramowania komórek tabeli mają się nakładać na siebie, czy też być rozdzielone
Dziedziczenie tak
Wartości collapse, separate
Wartość domyślna separate
Przykład border-collapse: collapse
Uwagi
Odpowiednik w HTML n.d.

Aby zdefiniować kondensowanie wewnętrznych obramowań, należy wpisać w definicji stylu border-collapse: wartość

Grubość obramowań poszczególnych komórek ustalona w definicji stylu dotyczy każdej komórki z osobna. Powoduje to, że obramowania komórek "dodają się" do siebie. Użycie stylu border-collapse: collapse pozwala je zlać ze sobą, co może poprawić wygląd. Można jednak zachować odstępy między komórkami za pomocą border-collapse: separate.

W przykładzie przyjęliśmy obramowania komórek o grubości 5px. Jak widać, w przypadku collapse obramowania połączyły się, zaś w przypadku separate pozostały oddzielone. Wskutek tego w pierwszym przypadku tabela jest węższa.

<table style="border-collapse: collapse">

komórka 1 komórka 2 komórka 3 komórka 4
komórka 5 komórka 6 komórka 7 komórka 8

<table style="border-collapse: separate">

komórka 1 komórka 2 komórka 3 komórka 4
komórka 5 komórka 6 komórka 7 komórka 8

Interpretacja: Internet Explorer 8 (7 z błędami), Firefox, Opera, Chrome

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V