Układanie elementów jak komórki tabel

Właściwości CSS opisane tutaj służą do nadawania dowolnym elementom wyglądu podobnego do tabel — np. kolumny tekstu, menu mogą wyglądem przypominać tabele.

Komórki: `display:table-cell`

Pojedyncza komórka tabeli. Sąsiednie elementy mające display:table-cell „skleją” się razem.

 #menu li {display:table-cell;}
 Elementy listy w menu zostaną ułożone poziomo

Rząd: `display:table-row`

Rozdziela komórki na rzędy. Jest opcjonalny — potrzeba go użyć tylko, jeśli komórki „tabeli” mają być podzielone na rzędy.

Potrzeba przykład mniej oderwany od rzeczywistości i nie psujący kolejności tekstu w dokumencie

 .kolumny {display:table-row;}

Tabela: `display:table`

Opcjonalny element otaczający rzędy i komórki. Potrzebny jest, żeby nadać im szerokość i ew. wycentrować je na stronie. Domyślnie tabela zajmuje minimalną szerokość zawartości (można to wykorzystać do centrowania elementów o nieokreślonej szerokości).

Można użyć display:inline-table zamiast display:table, żeby tabela była liniowa.

Formatowanie

Obramowanie i odstępy: `border`, `border-spacing`, `border-collapse`

Obramowanie całej tabeli ustala się na głównym elemencie tabeli (<table> bądź innym z display:table).

Obramowanie dla komórek ustala się na poszczególnych komórkach (<td>, <th> lub innych z display:table-cell).

border-spacing i border-collapse są niezależne od border i nie mogą być określone w jego skróconym zapisie

border-spacing ustala odległość między komórkami tabeli. Zerowa odległość oznacza, że obramowania komórek będą ze sobą sąsiadowały (dając wygląd podwójnego obramowania).

border-collapse:collapse powoduje „zapadnięcie” się sąsiednich komórek, dzięki czemu będzie tylko pojedyncze obramowanie między nimi.

Odstępy wewnątrz komórek ustala padding.

Formatowanie rzędów i kolumn

Aby uzyskać formatowanie dla całego rzędu należy nadać odpowiednie właściwości wszystkim jego komórkom, ponieważ elementy określające rzędy tabeli nie są widoczne.

W analogiczny sposób można ostylować wybrany rząd

Aby uzyskać formatowanie dla całych kolumn najlepiej użyć odpowiedniej kombinacji selektorów CSS:

 td:first-child
 Pierwsza kolumna (należy odpowiednio zamienić td na th, jeśli użyte są nagłówki)

 td:first-child + td
 td:first-child + td + td /* itd. */
 Druga i trzecia kolumna

O kolumnach w specyfikacji HTML oraz specyfikacji CSS.

Można też użyć elementów <col>, jednak możliwości ich ostylowania są bardzo ograniczone.

Stała szerokość: `table-layout:fixed`

Tabele — w przeciwieństwie do typowych elementów CSS — domyślnie rozciągają się dopasowując się do swojej zawartości. Przez to przeglądarki wyświetlają tabele wolniej, a podczas ładowania strona może „skakać”, gdy nowo załadowana treść rozciąga tabele.

table-layout:fixed wyłącza rozciąganie. Wtedy wszystkie komórki tabeli muszą mieć z góry zadaną, stałą szerokość, ale dzięki temu tabele będą wyświetlane szybciej.

Widoczność pustych komórek: `empty-cells`

Domyślnie puste komórki tabel są niewidoczne. Można wymusić ich pokazywanie właściwością empty-cells:show.

Ograniczenia elementów tabel

CSS-owe właściwości nie mają odpowiedników colspan z XHTML.
Nie jest możliwe pozycjonowanie względem elementów tabel (ściśle rzecz biorąc tabele nie mogą być containing block).
Na komórkach nie działa overflow.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Position | Display

Zmodyfikowano: 01.09.2011, 06:07

Kurs BrowseHappy.pl: CSS

Układanie elementów jak komórki tabel

Komórki: display:table-cell

Rząd: display:table-row

Tabela: display:table