Artykuł

sxc.hu sxc.hu
maj 09 2013
0

Projektowanie layoutu z użyciem display:table

Strony zbudowane na bazie tabelek, swoje 5 minut mają już za sobą, a gdzieś od około 10 lat, skutecznie zostały wyparte przez elastyczne układy oparte na divach. Dla wielu były przekleństwem. Trzeba było się trochę namęczyć, żeby ustawić wszystkie dopełnienia, obramowania i wszelkie inne cudowne opcje przeznaczone dla tabel.

Z drugiej jednak strony, tabelaryczny układ nie miał sobie równych pod względem precyzyjnego umieszczania treści. W tym przypadku mogliśmy być pewni, że dany wiersz oraz komórka zawsze wylądują w odpowiednich lokalizacjach.

Czasem właśnie brakuje mi takiego precyzyjnego pozycjonowania elementów (nie mylić z pozycjonowaniem absolutnym i relatywnym), dlatego też coraz częściej spoglądam chętnym okiem w kierunku display:table, który w niektórych przypadkach sprawdzi się dużo lepiej niż wszelkiej maści floaty.

W dzisiejszym tekście chciałbym podstawić nowe - bardziej wirtualne podejście do tabel w układzie strony (mam nadzieję, że nie spalicie mnie za to na stosie;-)

Co złego jest w floatach?

Floaty dają wiele możliwości opływania elementów, ale generują też sporo problemów. Głównym ich zadaniem jest nieformalna zmiana sposobu wyświetlania elementów blokowych w taki sposób, by możliwe było umieszczenie kilku takich obiektów na tej samej wysokości.

Floaty można spotkać obecnie na większości witryn dostępnych w sieci. To właśnie dzięki nim najczęściej tworzy się wielokolumnowy układ strony (podobne efekty można uzyskać kombinując z wartością inline-block właściwości display).

Największym problemem floata (z ang. pływać) jest właśnie jego opływanie. Tworzenie układów zbudowanych w oparciu o proste kolumny bywa czasem trudne, ponieważ nigdy do końca nie wiadomo jak dany element się zachowa, w sytuacji gdy jego zawartość będzie w pewnej sytuacji niestandardowa.

Drugim poważnym problemem wynikającym ze stosowania floatów, jest gubienie wysokości/szerokości elementów. Często ten problem załatwia odpowiednia wartość właściwości overflow, ale łatwo jest później zagmatwać się z marginesami i dopełnieniami.

Nie twierdzę, że floaty są aż takie złe, bo jednak mimo wszystko dają sporo możliwości, ale czasem bywają brzydko mówiąc upierdliwe i nie do końca przewidywalne. Na szczęście są również alternatywy.

Jest wspominany wcześniej display:inline-block, który można stosować czasem zamiennie z floatem no i jest tytułowy display:table, który w pewnym sensie przywraca trochę stare czasy - tę lepszą ich część:-)

Poznajcie display:table

O właściwości display pisałem już nieco wyżej, ale dla przypomnienia odpowiada ona za to jak określony element się zachowuje. Dla przykładu div domyślnie występuje z wartością block tej właściwości, natomiast span występuje jako element liniowy (inline). W praktyce oznacza to, że div zajmuje całą dostępną na szerokość przestrzeń (nie można umieścić nic innego obok niego), a span umieszczany jest liniowo - możemy dokładać podobne jemu elementu niczym klocki. Po zapełnieniu całej szerokości nowy element trafi do nowej linii.

Wartość table dla właściwości display to tak naprawdę wierzchołek góry lodowej. W praktyce tabelarycznych wartości mamy znacznie więcej. Poniżej krótka charakterystyka.

Nazwa wartości Opis
table Element nadrzędny - określa początek tabeli
table-caption Używany dla elementu wyświetlającego opis tabeli
table-cell Komórka tabeli - odpowiednik znacznika td
table-column Kolumna tabeli
table-column-group Grupuje kolumny tabeli - odpowiednik znacznika colgroup
table-footer-group Definiuje sekcję stopki tabeli - odpowiednik znacznika tfoot
table-header-group Definiuje nagłówek tabeli - odpowiednik znacznika thead
table-row Definiuje wiersz tabeli tabeli - odpowiednik znacznika tr
table-row-group Grupuje wiersze tabeli - odpowiednik znacznika tbody

Jak widać lista wszystkich opcji jest do spora, ale nie oznacza to wcale, że kompletna. Mi osobiście najbardziej brakuje wartości, które pozwalały by zasymulować rowspan oraz colspan. W praktyce najczęściej wykorzystywane są trzy poniższe opcje:

  • table
  • table-row
  • table-cell

Uzbrojenie w nową wiedzę, spójrzmy na poniższy - kompletny listing kodu, który w oparciu o CSS i HTML5 definiuje klasyczny układ 960px:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf-8" />
		<title>Przykładowa strona 960px</title>
		<style>
			header, footer, #main, aside{
				border: 1px solid #000;
				height: 100px;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div style="margin: 0 auto; width: 960px;">
			<header style="border: 1px solid #000;">
				<h1>Nagłówek</h1>
			</header>
			<!-- Główna sekcja / początek tabeli -->
			<section style="display: table">
				<!-- Definicja wiersza -->
				<div style="display: table-row">
					<!-- Komórka w wierszu / treść -->
					<section id="main" style="display: table-cell; width: 648px;">
						<h1>Treść...</h1>
					</section>
					<!-- Komórka w wierszu / pasek boczny -->
					<aside style="display: table-cell; width: 288px;" >
						<h1>Menu boczne</h1>
					</aside>
				</div>
			</section>
			<footer>
				<h1>Stopka</h1>
			</footer>
		</div>
	</body>
</html>

Na wstępie wybaczcie za ten odrobinę brzydki kod i style w treści, ale w pewnym sensie w ten sposób lepiej zobrazować całe rozwiązanie. Kluczowa jest w tym przypadku sekcja umieszczona zaraz za nagłówkiem. Widać tutaj wyraźnie kolejne zagnieżdżenia: table / table-row / table-cell. Dla lepszego zobrazowania przykładu dodałem obramowanie dla kluczowych elementów. Pamiętajcie o tym że poszczególne szerokości elementów 648 i 288 należy jeszcze powiększyć o obramowanie (po jednym pikselu na każdy bok) oraz o dopełnienie (po 5 pikseli na każdy bok). Sumarycznie wychodzi więc 960:) Całość dobrze obrazuje poniższy rysunek:

Na koniec mała ciekawostka - jeśli wyrzucie diva, który symuluje znacznik tr, całość wciąż będzie działać prawidłowo;-)

Wsparcie

Już tytuł tego nagłówka powinien Wam dać do myślenia, że niestety nie będzie do końca tak kolorowo. Cała powyższa rodzina wartości nie działa w IE6 oraz 7. W IE8 działają w sytuacji gdy dla strony został zdefiniowany !DOCTYPE. Z pozostałymi przeglądarkami nie ma większego problemu.

Udział starych IE na szczęście topnieje z dnia na dzień, dlatego też jeśli nie tworzysz super ważnej strony finansowej, rządowej, czy korporacyjnej, to z pewnością możesz sobie te stare przeglądarki brzydko mówiąc olać - tak jak ja zrobiłem to już dawno na tym blogu;-)

Kiedy warto stosować display:table?

Mógłbym powiedzieć prosto - kiedy wkurzą Cię floaty. W praktyce temat wypada opisać trochę szerzej. Największą obecnie przeszkodzą we wdrożeniu tej techniki jest wsparcie. Tak jak wspomniałem wcześniej, mechanizm ten nie zadziała w IE 6 i 7. Z drugiej jednak strony, udział tych przeglądarek staje się marginalny i nawet sam Microsoft się już ich wstydzi, więc z pewnością można sobie tą uwagę darować.

Display:table warto stosować, kiedy chcecie twardo trzymać elementy w szyku. Oznacza to mniej ni więcej tyle, że z takim układem zawsze będzie wszystko idealnie proste. Nie będzie żadnych wcięć, czy opływających elementów, będą tylko linie pionowe i poziome. W gruncie rzeczy rzekłbym - i bardzo dobrze!

Wspominając o pewnym usztywnieniu, warto tu jednak zaznaczyć, że nie ograniczamy tutaj elastyczności. Wirtualne tabele, komórki i wiersze mogą mieć wymiary wyrażone w procentach i bardzo ładnie skalować się w responsive web design. Bardziej w tym przypadku chodzi o trzymanie szyku.

Podsumowując - układ tabelaryczny sprawdzi się wszędzie tam, gdzie ceniona jest prostota i pewnego rodzaju sztywność układu.

Źródła

Data ostatniej modyfikacji: 30.05.2013, 16:04.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus