HTML – Tabele
1. Struktura tabeli
<table>
<tr>
<td>...</td> <td>...</td>
</tr>
</table>
Jest to najprostsza tabela, gdzie:
<table>...</table>
jest znacznikiem tabeli
<tr>...</tr>
jest znacznikiem wiersza
<td>...</td>
jest znacznikiem pojedynczej komórki
W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.
Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znaczników wierszy (<tr>...</tr>)! Liczba komórek w każdym wierszu powinna być taka sama.
Zwracam uwagę, że w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników można umieszczać tylko ściśle określone elementy, które zostaną szczegółowo opisane w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:
Tabela...
<b><td>...</td></b> <td>...</td>
<br />
<b><td>...</td> <td>...</td></b>
Przykład:
<td>komórka1</td> <td>komórka2</td>
<td>komórka3</td> <td>komórka4</td>
Ten kod wkleić między znaczniki html: <html><head></head> <body> ... </body> </html>
Dla większej czytelności kodu można umieścić każdy znacznik <td> w nowej linii. Jest to przydatne zwłaszcza w przypadku dość obszernej treści w komórkach. Powyższa tabela jest równoznaczna z:
<td>komórka1</td>
<td>komórka2</td>
<td>komórka3</td>
<td>komórka4</td>
2. Obramowanie
<table border="x">...</table>
gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).
Dodaje obramowanie pomiędzy komórkami tabeli, czyli pionowe i poziome linie dzielące poszczególne wiersze oraz kolumny. Pozwala określić szerokość zewnętrznej części tego obramowania.
<table border=”5”>
3. Marginesy w komórkach
<table border cellpadding="x">...</table>
gdzie "x" oznacza szerokość marginesu (w pikselach).
Komenda wprowadza dodatkowe marginesy (poziome i pionowe) we wszystkich komórkach tabeli, przez co wygląda ona bardziej estetycznie.
<table border=”5” cellpadding=”10”>
4. Odstępy między komórkami
<table cellspacing="x">...</table>
gdzie "x" oznacza szerokość odstępu między sąsiednimi komórkami (w pikselach).
Znacznik ten umożliwia wprowadzenie dodatkowych odstępów pomiędzy wszystkimi sąsiadującymi komórkami tabeli. Aby zobaczyć różnicę pomiędzy tego typu odstępami a marginesami wewnątrz komórek, trzeba nadać tabeli obramowanie.
<table border=”5” cellspacing=”10”>
5. Wymiary
a) wymiary całej tabeli
<table width="x" height="y">...</table>
lub
<table width="x%" height="y%">...</table>
b) wymiary pojedynczej komórki
<td width="x" height="y">...</td>
<td width="x%" height="y%">...</td>
We wszystkich przypadkach "x" oznacza szerokość w pikselach, a "x%" szerokość w procentach całego ekranu lub względem wymiarów elementu nadrzędnego.Analogicznie "y" oraz "y%" oznaczają wysokość.
Komenda pozwala narysować tabelę o dokładnie zamierzonych wymiarach (długości i wysokości). Jeśli zależy nam na tym, aby nasza tabela wyglądała zawsze tak samo (niezależnie od rozdzielczości ekranu), powinniśmy podawać wymiary w procentach powierzchni ekranu (x%, y%). Natomiast jeżeli tabela ma mieć stały rozmiar bezwzględny (zawsze tyle samo pikseli), musimy podawać długość i wysokość w pikselach ekranowych (x, y). Oczywiście jeśli określimy wysokość/szerokość pojedynczej komórki, spowoduje to ustalenie takiej samej wysokości/szerokości dla całego wiersza/kolumny.
Atrybut HEIGHT dla znacznika TABLE nie wchodzi w skład specyfikacji HTML 4.01.
Atrybuty WIDTH oraz HEIGHT dla komórki tabeli (TD) są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
6. Wyrównanie tabeli
<table align="rodzaj">...</table>
gdzie jako "rodzaj" należy wpisać:
· "left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu
· "right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu
· "center" - wyśrodkowanie tabeli
Polecenie to pozwala umiejscowić tabelę w wybranym przez nas miejscu na ekranie.
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
7. Wyrównanie zawartości tabeli
a) wyrównanie zawartości całego wiersza
<tr align="rodzaj" valign="ustawienie">...</tr>
b) wyrównanie zawartości pojedynczej komórki
<td align="rodzaj" valign="ustawienie">...</td>
W obu przypadkach należy podać:
rodzaj
· "left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie)
· "right" - wyrównanie zawartości do prawej
· "center" - wyśrodkowanie zawartości
ustawienie
· "top" - ustawienie zawartości (wiersza lub komórki) na górze
· "bottom" - ustawienie zawartości na dole
· "middle" - ustawienie zawartości po środku (domyślnie)
Dzięki tym poleceniom możliwe jest podanie umiejscowienia zawartości całego wiersza tabeli, jak również pojedynczej komórki.
8. Kolor tła
a) w całej tabeli
<table bgcolor="kolor">...</table>
b) w jednym wierszu
<tr bgcolor="kolor">...</tr>
c) w pojedynczej komórce
<td bgcolor="kolor">...</td>
Atrybut BGCOLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
9. Tło obrazkowe
<table background="ścieżka dostępu">...</table>
b) w pojedynczej komórce
<td background="ścieżka dostępu">...</td>
We wszystkich przypadkach jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.
Polecenie pozwala na podanie obrazka, który zostanie umieszczony w tle całej tabeli bądź w pojedynczej komórce.
Atrybut BACKGROUND nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
*** *** *** *** ***
10. Kolor obramowania
(tylko Internet Explorer!)
<table bordercolor="kolor">...</table>
<table bordercolorlight="kolor1">...</table>
<table bordercolordark="kolor2">...</table>
<tr b...
e-literatka