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?

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

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.

 #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

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

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

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

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

• Spis treści
• Kroki
• Strona Główna
• Ilustracje
• Historia zmian
• Edytuj