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 Bug w IE

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 Bug w IE

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 Bug w IE

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 Bug w IE

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-spacingborder-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 Bug w IE6

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

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 Bug w IE

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

Ograniczenia elementów tabel


Zmodyfikowano: 31.08.2011, 23:07
submit