Wymiarowanie tabel

Każda tabela publikowana za pomocą znaczników języka HTML może mieć określony rozmiar — wysokość oraz szerokość. Rozmiar może być zdefiniowany w pikselach (jednostki stałe) lub w procentach (jednostki względne). Regulacja obu wartości jest możliwa za pomocą atrybutów width (szerokość) oraz height (wysokość) znacznika <table></table> lub <td></td>.

Jeżeli na sztywno określisz wymiary tabeli, to bez względu na rozmiar okna przeglądarki będzie ona miała stałą wielkość. Poniżej zamieszczam przykłady tabeli o wymiarach 200 na 200 pikseli oraz szerokości 50%. Natomiast na rysunku poniżej widać efekt działania kodu.

<!–Tabela o wymiarach 200 na 200 pikseli–>
<body>
<table border=”1″ width=”200″ height=”200″>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
<!–Tabela o wymiarach 50% na 50%–>
<body>
<table border=”1“ width=”50%“ height=”50%”>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<body>

Oczywiście nic nie stoi na przeszkodzie, by określić wielkość poszczególnych komórek. Robi się to za pomocą dokładnie tych samych atrybutów, z tą różnicą, że są one wpisane do znacznika <td>. Stosując taki sposób regulacji rozmiaru tabeli, musisz pamiętać, że jej faktyczny zewnętrzny wymiar to suma wymiarów poszczególnych komórek.

Przykład tabeli o określonych rozmiarach.

<!–Tabela o zdefiniowanych wymiarach komórek–>
<body>
<table border=”1″>
<tr>
<td width=“100″>1</td>
<td>2</td>
</tr>
<tr>
<td width=”50″>3</td>
<td>4</td>
</tr>
</table>
<body>

Łączna szerokość przykładowej tabeli powstałej w wyniku wykonania powyższego listingu wynosi 150 pikseli.

Decydując się na stosowanie języka XHTML do określania wymiarów całej tabeli lub poszczególnych komórek, używamy kaskadowych arkuszy stylów.

Ciekawą, a zarazem pożyteczną właściwością tabel jest możliwość regulowania odstępów między ich komórkami składowymi. Kontrola tej właściwości jest możliwa za pomocą atrybutu cellspacing. Występuje on w znaczniku <table>. Poniżej zamieszczam prosty przykład jego wykorzystania.

Na rysunku widać efekt działania powyższego kodu.

Brak atrybutu cellspacing zostawia domyślną przerwę między komórkami. W sytuacji, gdy chcesz całkowicie usunąć odstępy (np. gdy tabela zawiera pociętą na mniejsze części grafikę), musisz użyć atrybutu o następującej postaci cellspacing=”0″.

Następnym atrybutem, podobnym w działaniu do cellspacing, jest cellpadding, który odpowiada za regulację wewnętrznych marginesów w komórce tabeli. Atrybut ten również występuje w znaczniku <table>, a przykład jego zastosowania widać w poniższym listingu i na rysunku.

Przy połączeniu obu atrybutów ich wartość się sumuje i w efekcie uzyskujesz większy odstęp między zawartością poszczególnych komórek.

Tabele niesymetryczne

Dotychczas opisywane tabele były symetryczne i zawsze zawierały tyle samo komórek w każdym wierszu. Teraz przyszła pora, by zająć się tworzeniem tabel o nieregularnych kształtach — niesymetrycznych. Zacznę od przykładu tabeli niesymetrycznej, byś dokładnie wiedział, o czym piszę. Przykład takiej tabeli znajduje się na rysunku.

Zwróć uwagę na to, że w przypadku pierwszej tabeli drugi wiersz zawiera jedną komórkę, która została rozciągnięta na dwie kolumny. Nieco inaczej wygląda druga tabela, gdzie w pierwszej kolumnie rozciągnąłem komórkę na dwa wiersze.

Przedstawione działanie na tabelach jest możliwe dzięki dwóm atrybutom języka XHTML/HTML, używanym w znaczniku <td>. Mam tutaj na myśli rowspan i colspan. Pierwszy z nich rozciąga komórkę na sąsiednie wiersze, natomiast drugi na kolumny. Poniżej zamieszczam przykładowy listing dla tabel z rysunku.

Zwróć uwagę, że przy atrybutach rowspan i colspan występuje wartość liczbowa, która określa, na ile wierszy lub kolumn ma zostać rozciągnięta formatowana komórka.

Oczywiście tabele mogą przybierać różne wymyślne kształty, a wszystko zależy od pomysłowości oraz znajomości znaczników języka XHTML/HTML. Pamiętaj, że do tworzenia tabel nie potrzeba Ci już niczego więcej.

Pozycjonowanie stron

Tworzenie stron

Wymiarowanie tabel