Wymiarowanie tabel


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.

tmp9c25-1Przykł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.

<body>
<table border=”1″ width=”200″ height=”200″ cellspacing=”15″> <tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>

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

tmpa153-1Brak 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.

tmp87eb-1<body>
<table border=”1″ width=”200″ height=”200″ cellpadding=”25″>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *