blog lepszy Internet

I tak sobie cichaczem wracam do pisania… Może nikt nie zauważy, że znowu była „krótka” przerwa?

To, że tabelki są be, powinna wiedzieć każda osoba zajmująca się tworzeniem kodu HTML… Element table jest prawdopodobnie jednym z najczęściej źle używanych elementów HTML. Podobnie jak pozostałe elementy, table może być użyty źle (czyli do budowania układu strony, tak zwanego „layoutu”), lub dobrze. Tabelka sama w sobie nie jest zła, jeśli użyta jest zgodnie z jej przeznaczeniem. Specyfikacja W3C wyraźnie mówi, że tabelka służy do organizowania różnych danych: tekstu, obrazków, linków, formularzy a nawet innych tabel. Tabelka służy zatem do przedstawienia danych tabelarycznych.

Zgodnie z tytułem skupię się na XHTMLowej wersji tabelki. Tabelę tworzy się używając do tego celu znacznika <table>. Aby była ona tabelą, trzeba zdefiniować rząd komórek (ang. table row) <tr>, a w nim musi znaleźć się przynajmniej jedna komórka nagłówka (ang. table header cell) <th> lub komórka danych (ang. table data cell) <td>.

<table>
	<tr>
		<th>treść komórki nagłówka</th>
		<td>treść komórki danych</td>
	</tr>
</table>

No i mamy pierwszą, prostą tabelkę… Tabela może zawierać w sobie (np. przed definicją pierwszego rzędu komórek) znacznik <caption>. Służy on do przedstawienia krótkiego opisu tabeli. Opis ten domyślnie widoczny jest na stronie (w zależności od potrzeb można go ukryć za pomocą CSSa). Do dłuższego opisania tabelki służy atrybut summary dodawany do znacznika <table>. O ile dla samego wyglądu strony atrybut summary nie ma znaczenia (jego zawartość NIE jest wyświetlana), o tyle ma on znaczenie w kwestii dostępności - zawartość atrybutu odczytywana jest przez czytnik ekranowy (screenreader). Wspomina o tym Mark Pilgrim w swojej książce Dive Into Accessibility. Kod tak opisanej tabeli będzie wyglądał następująco:

<table summary="Długi opis tabeli">
	<caption>Krótki opis tabeli</caption>
	<tr>
		<td>treść komórki danych</td>
	</tr>
</table>

Poza opisem tabeli, „jawnym” (znacznik <caption>), lub „ukrytym” (atrybut summary), tabela ma jeszcze inną ciekawą możliwość: grupowanie rzędów. Rzędy mogą być pogrupowane w nagłówek, stopkę i sekcję główną (tzw. „ciało” tabeli). Służą do tego odpowiednio znaczniki <thead>, <tfoot> oraz <tbody>, które definiujemy dokładnie w takiej właśnie kolejności (<tbody> PO <tfoot>, a nie jak można by się spodziewać, PRZED). Taka tabela wyświetla się już w normalnej, spodziewanej kolejności (sekcje <thead>, <tbody> i <tfoot>). Kod tak pogrupowanej tabelki może wyglądać tak:

<table summary="Długi opis tabeli">
	<caption>Krótki opis</caption>
	<thead>
		<tr>
			<th>treść komórki nagłówka w sekcji thead</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>treść komórki danych w sekcji tfoot</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>treść komórki danych w sekcji tbody</td>
		</tr>
	</tbody>
</table>

Tak mniej więcej wygląda semantyczna tabelka w wersji XHTML. Tabelkę taką można oczywiście jeszcze odpowiednio ostylować (Smashing Magazine podaje kilka ciekawych propozycji) lub/i dodać jakieś ciekawe zachowania za pomocą JavaScriptu (np. Table Sorter). Jeżeli chcielibyście bardziej zgłębić temat tabel polecam artykuł Semantic (X)HTML Markup: Using Tables Appropriately…

Małe info: od jutra (01.09.2008) wyjeżdzam na miesiąc do Niemiec (takie tam małe zlecenie) - w tym czasie blog oczywiście będzie dostępny. Niestety nie jestem pewien, czy będę miał na tyle dużo swobody, żeby móc zajmować się blogiem… Zresztą i tak przy takiej częstotliwości pisania to chyba byłby jakiś rekord…