March 19, 2024

HTML gyorstalpaló 5. rész

Ha “rendet akarunk teremteni” a képernyőn, akkor igen korlátozottak a lehetőségeink, hiszen nem tudhatjuk ki milyen képernyőfelbontással, milyen web-böngészővel, mekkora ablakot használva tekinti meg munkánkat. A táblázatok használata igen hatékony lehetőséget jelent. Táblázat készítéséhez a <table> </table> parancsot kell kiadni a sorokat a <tr> </tr> jelek közé kell helyeznünk (tr=table row=tábla sor), a cellákat a <td> </td> (td=table data=tábla adat) szimbólumoknak kell határolniuk. Az alábbi példa egy 2×3-as táblázatot állít elő:

<table>
<tr>
<td>I. sor 1. elem</td>
<td>I. sor 2. elem</td>
<td>I. sor 3. elem</td>
</tr>
<tr>
<td>II. sor 1. elem</td>
<td>II. sor 2. elem</td>
<td>II. sor 3. elem</td>
</tr>
</table>

Melynek az eredményeként egy egyszerű táblázatot kapunk:

I. sor 1. elem I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem

A rend kétségtelen, de jó volna a cellákat vonallal elválasztani. Ezt a border (határ) paraméter megváltoztatásával tehetjük meg. Ez alaphelyzetben 0.

<table border=1>
<tr>
<td>I. sor 1. elem</td>
<td>I. sor 2. elem</td>
<td>I. sor 3. elem</td>
</tr>
<tr>
<td>II. sor 1. elem</td>
<td>II. sor 2. elem</td>
<td>II. sor 3. elem</td>
</tr>
</table>

Melynek mindjárt látható lesz az eredménye:

I. sor 1. elem I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem

Kicsit szorosan vannak az adatok, ezen a cellpading (cellabélelés) paraméter megváltoztatása segít, ami a cellahatár es az adatok távolságát mutatja meg. Ez alaphelyzetben 0-2 között lehet.

<table border=1 cellpadding=5 >
<tr>
<td>I. sor 1. elem</td>
<td>I. sor 2. elem</td>
<td>I. sor 3. elem</td>
</tr>
<tr>
<td>II. sor 1. elem</td>
<td>II. sor 2. elem</td>
<td>II. sor 3. elem</td>
</tr>
</table>

Melynek az alábbi táblázat lesz az eredménye:

I. sor 1. elem I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem

A cellspacing paraméter a cellák távolságát jelöli. Ez alaphelyzetben 0-1 között lehet.

<table border=1 cellpadding=5 cellspacing=10 >
<tr>
<td>I. sor 1. elem</td>
<td>I. sor 2. elem</td>
<td>I. sor 3. elem</td>
</tr>
<tr>
<td>II. sor 1. elem</td>
<td>II. sor 2. elem</td>
<td>II. sor 3. elem</td>
</tr>
</table>

Melynek az eredménye egy sokkal szellősebb táblázat:

I. sor 1. elem I. sor 2. elem I. sor 3. elem
II. sor 1. elem II. sor 2. elem II. sor 3. elem