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
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
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
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łó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-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ś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
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
nath
, 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ę.
Zmodyfikowano: 29.12.2006, 00:30