March 19, 2024

HTML gyorstalpaló 7. rész

Gyakran előfordul, hogy a táblázat néhány celláját egyesíteni szeretnénk vízszintesen vagy függőlegesen. Erre célra a colspan és a rowspan opciókat kell megváltoztatnunk. (colspan=column span=oszlopfeszítés, rowspan=row span=sorfeszítés). Ezen változók értéke alaphelyzetben 1. Amennyiben más értéket állítunk be, ennek hatására az adott cella több (a megadott értéknek megfelelő számú cella) helyét foglalja el.

<table border=1>
<tr><td>I.1.</td><td>I.2.</td><td>I.3.</td></tr>
<tr><td>II.1.</td><td colspan=2>II.2-3.</td></tr>
<tr><td>III.1.</td><td>III.2.</td><td>III.3.</td></tr>
</table>

A fenti utasítássor egy három sorból és három oszlopból álló táblázatot készít, ahol a második sor második és harmadik elem helyett alkottunk
egy cellát a colspan opció 2-re történő állításával.

I.1. I.2. I.3.
II.1. II.2-3.
III.1. III.2. III.3.

Függőlegesen is megtehetjük ugyanezt.

<table border=1>
<tr><td
rowspan=2>I.-II.1.</td><td>I.2.</td><td>I.3.</td></tr>
<tr><td>II.2.</td><td>II.3.</td></tr>
<tr><td>III.1.</td><td>III.2.</td><td>III.3.</td></tr>
</table>

A fenti parancssor az első sor és a második sor első eleme helyett hoz létre új cellát.

I.-II.1. I.2. I.3.
II.2. II.3.
III.1. III.2. III.3.

A böngészők a meglevő adatok alapján egy optimális táblát kísérelnek meg elkészíteni. Újabb paraméterek segítségével újabb tulajdonságokat változtathatunk meg. A táblázat szélességét is megváltoztathatjuk a width(=szélesség) opcióval. Ennek értékét pixelben és százalékban is megadhatjuk. A 100% a rendelkezésre álló területet jelenti, ha az adott értékekkel lehetetlen táblázatot készíteni, akkor a böngésző megpróbálja a lehető legjobb közelítést adni.

<table border=1 width=100%>
<tr><td>I.1.</td><td>I.2.</td><td>I.3.</td></tr>
<tr><td>I.1.</td><td>I.2.</td><td>I.3.</td></tr>
</table>

Az eredmény:

I.1. I.2. I.3.
I.1. I.2. I.3.

A cellák szélességét is állíthatjuk:

<table border=1>
<tr><td width=100>I.1.</td><td width=50>I.2.</td><td
width=100>I.3.</td></tr>
<tr><td>I.1.</td><td>I.2.</td><td>I.3.</td></tr>
</table>

Az eredmény:

I.1. I.2. I.3.
I.1. I.2. I.3.