Tabele

Tabele HTML

W języku HTML tabele obejmuje się znacznikiem <TABLE>. Zawiera on kolejne wiersze tabeli od góry do dołu (znacznik <TR>, table row) oraz opis tabeli w znaczniku <CAPTION>. Każdy wiersz tabeli składa się z komórek (znaczniki <TD>, <TH>) w kolejności od lewej do prawej.

Obramowanie tabeli

Domyślnie tabele nie mają żadnego obramowania. Najczęściej jednak chcielibyśmy, żeby je miały. Grubość obramowań (w pikselach) ustawiamy używając atrybutu BORDER.

Szerokość tabeli

Narzucić określoną szerokość całej tabeli możemy ustawiając atrybut WIDTH na ilość pikseli lub wartość procentową (ze znakiem procentu) z aktualnej szerokości okna przeglądarki. Znacznie lepiej stosować procenty, gdyż w ten sposób tabela dostosuje się do każdej wielkości okna i monitora.

Opis tabeli

Opis tabeli (tekst w znaczniku <CAPTION>) jest wyświetlany nad tabelą lub pod nią. Umiejscowienie opisu można ściśle określić atrybutem ALIGN opisu o wartości TOP bądź BOTTOM. W przeciwieństwie do zwykłego tekstu obok tabeli tekst opisu jest formalnie związany z tabelą i wyrównany wg jej granicy. Dodatkowo opis jest szczególnie ważny przy braku możliwości wyświetlenia tabeli (np. w terminalach dla osób niepełnosprawnych sensorycznie). Odgrywa wtedy podobną rolę, co tekst alternatywny obrazka.

Komórki

Zawartość komórki tabeli oznaczamy znacznikiem <TD> (dla zwykłych komórek z danymi - table data cell) lub <TH> (dla komórek nagłówków tabeli - table header cell). Przeglądarki zwykle wyróżnianją komórki-nagłówki poprzez pogrubienie tekstu.

Zawartość komórek

Komórka może zawierać nie tylko tekst, ale i obrazki, zagnieżdżone tabele i inne elementy. Dbajmy jednak o czytelność dla użytownika. Tekst w tabelach zwykle nie jest zawijany - zamiast tego komórka jest odpowiednio poszerzana, by go zmieścić. Wyjątkiem jest sytuacja, gdy szerokość tabeli jest ustalona i nie można dowolnie poszerzać komórek.

Rozciąganie komórek

W celu rozciągnięcia wybranej komórki na szerokość lub wysokość kilku komórek należy przypisać jej atrybut COLSPAN (rozciąganie w poziomie, na kilka kolumn) bądź ROWSPAN (rozciąganie w pionie, na kilka wierszy). Liczba będąca wartością owych atrybutów określa ilość zwykłych komórek, na miejsce których chcemy rozciągnąć komórkę.

Wymiary komórek

Szerokość komórki jest dostosowywana do najszerszej komórki w kolumnie, a wysokość do najwyższej komórki w wierszu.

Wyrównanie tabeli i jej zawartości

Atrybut ALIGN znacznika <TABLE> określa poziome wyrównanie tabeli na stronie. Dopuszczalne wartości to LEFT, CENTER i RIGHT. Ten sam atrubut można zastosować do komórki tabeli w odniesieniu do zawartego w niej tekstu. W tym przypadku możemy określnić również wyrównanie w pionie za pomocą atrybuty VALIGN o wartości TOP, MIDDLE lub BOTTOM. Domyślne wyrównanie pionowe zależy od przeglądarki.