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.

<table> czy display:table?

złe tabelki i dobre tabelki. Tabele HTML służą do opisywania danych tabelarycznych.

Czy to są dane tabelaryczne? Czy da się sensownie opisać, co zawierają kolumny i rzędy? Jeśli zamieni się rzędy z kolumnami (obróci tabelę o 90 stopni), to czy dalej dane mają sens? Jeśli tak, to użyj <table>.

W przeciwnym wypadku, jeśli elementy strony po prostu mają mieć odpowiednie położenie, należy użyć elementów XHTML najodpowiedniejszych dla tych danych i zmienić ich wygląd właściwościami opisanymi poniżej.

Komórki: display:table-cell Bug w IE

Pojedyńcza 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 > div, #stopki-pod-kolumnami > div {display:table-cell;}
 #kolumny, #stopki-pod-kolumnami {display:table-row;}

 <div id="kolumny"><div>pierwsza</div><div>druga</div></div>
 <div id="stopki-pod-kolumnami"><div>koniec pierwszej</div><div>koniec drugiej</div></div>

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:table zamiast display:table-row, żeby komórki podzielić na rzędy równej szerokości, nawet jeśli jest różna ilość komórek w każdym rzędzie.

Formatowanie

Obramowanie i odstępy: border, border-spacing, border-collapse Bug w IE

Obramowanie całej tabeli ustala się na główym 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śc 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 pojedyńcze 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ć formatownie 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

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


Zmodyfikowano: 29.12.2006, 00:30