Tabele#

Komórki nagłówkowe#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table>
	<tr>
		<th>...</th>
	</tr>
	...
</table>

Komórkę nagłówkową th (table header) wstawia się tak samo jak zwykłą komórkę tabeli td. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej i pozycjonowane na środku. Komórka może znajdować się w dowolnym wierszu - nie tylko pierwszym. Dodatkowo w wierszu takim mogą się znajdować inne zwykłe komórki td. Dzięki temu możliwe jest stworzenie pionowych nagłówków, znajdujących się np. na lewym brzegu tabeli.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="3">
	<caption>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</caption>
	<tr><td></td><th>1991</th><th>1992</th><th>1993</th><th>1994</th><th>1995</th></tr>
	<tr><th>Masło</th><td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td></tr>
	<tr><th>Margaryna</th><td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td></tr>
</table>

Efekt:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
19911992199319941995
Masło11501240138014201550
Margaryna80090098011501320

Chociaż identyczny efekt wizualny można uzyskać odpowiednio ostylowując wygląd zwykłych komórek tabeli (td), to absolutnie nie należy tak postępować. Komórki nagłówkowe oprócz samego wyglądu niosą ze sobą ważne znaczenie semantyczne.

W przypadku obszernych tabel (z dużą ilością komórek nagłówkowych), przydatne może się okazać, określenie atrybutu title="tekst" dla każdej zwykłej komórki td. Jako wartość można podać tekst, który pojawi się na ekranie w dymku podpowiedzi (tooltip), kiedy użytkownik wskaże myszką określoną komórkę tabeli. Można tam wstawić treść nagłówka, do którego należy dana komórka. Ułatwi to czytanie, jeśli komórki nagłówkowe znikną już z ekranu, z powodu zbyt długiej tabeli. Jest to bardzo przydatna funkcja dla tabel z dużą ilością kolumn. Krótki przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="3">
	<tr>
		<th></th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
	</tr>
	<tr>
		<th>1</th>
		<td title="A1">Komórka1</td>
		<td title="B1">Komórka2</td>
		<td title="C1">Komórka3</td>
	</tr>
	<tr>
		<th>2</th>
		<td title="A2">Komórka4</td>
		<td title="B2">Komórka5</td>
		<td title="C2">Komórka6</td>
	</tr>
</table>

Efekt (widoczny po wskazaniu komórki tabelki kursorem myszki):

ABC
1Komórka1Komórka2Komórka3
2Komórka4Komórka5Komórka6
Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Tabele (H1) Komórki nagłówkowe (H2)