Tabele#
Wymiary tabeli i komórek#
Szerokość i wysokość całej tabeli:
<table width="wartość" height="wartość">...</table>
Szerokość i wysokość poszczególnej komórki:
<table> <tr> <th width="wartość" height="wartość>...</th> <td width="wartość" height="wartość>...</td> </tr> ... </table>
gdzie "wartość"
może być wyrażona:
- procentowo - wymiary tabeli wyrażone w procentach określają jaką część okna przeglądarki (bez względu na rozdzielczość ekranu) zajmie tabela. 100% szerokości oznacza, że tabelka zajmować będzie całą szerokość okna przeglądarki, 50% - połowę szerokości okna itd. W przypadku definicji procentowej rozmiaru poszczególnej komórki należy pamiętać, ze wartość odnosi się nie do okna przeglądarki a do rozmiarów tabeli. Na przykład gdy umieścimy na stronie tabelę o szerokości 50% okna przeglądarki i zdefiniujemy szerokość komórki jako 50% szerokości tabeli, otrzymamy komórkę o szerokości 25% szerokości okna przeglądarki.
- w pikselach - podanie wartości w pikselach spowoduje, że tabela będzie miała stały rozmiar bezwzględny, czyli niezależnie od rozdzielczości ekranu zajmować będzie taką sama liczbę pikseli ekranowych.
Polecenie pozwala narysować tabelę o dokładnie zamierzonych wymiarach: szerokość (width
) i wysokość (height
). Obie techniki wprowadzania wymiarów tabel można ze sobą łączyć. Oznacza to, że jeden wymiar może być zdefiniowany procentowo a drugi podany w pikselach. Natomiast jeśli szerokość i wysokość tabeli nie jest zdefiniowana w kodzie HTML, jej wymiary narzucane zostaną przez zawartość komórek. 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.
Obecnie atrybuty WIDTH oraz HEIGHT dla komórki tabeli (TD, TH) są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Przykład z podaniem wymiarów dla całej tabeli:
<table border="1" style="width: 500px; height: 150px;">
<tr>
<td>Komórka1</td>
<td>Komórka2</td>
<td>Komórka3</td>
</tr>
<tr>
<td>Komórka4</td>
<td>Komórka5</td>
<td>Komórka6</td>
</tr>
</table>
Efekt:
Komórka1 | Komórka2 | Komórka3 |
Komórka4 | Komórka5 | Komórka6 |
Przykład z podaniem wymiarów dla jednej komórki:
<table border="1">
<tr>
<td style="width: 80%; height: 150px;">Komórka1</td>
<td>Komórka2</td>
<td>Komórka3</td>
</tr>
<tr>
<td>Komórka4</td>
<td>Komórka5</td>
<td>Komórka6</td>
</tr>
</table>
Efekt:
Komórka1 | Komórka2 | Komórka3 |
Komórka4 | Komórka5 | Komórka6 |
Należy zauważyć, że manewrowanie wymiarami pojedynczej komórki wpływa także na wymiary pozostałych komórek.
Podczas drukowania strony, tabela która nie mieści się w szerokości arkusza papieru, najprawdopodobniej zostanie "ucięta".