Jūs esate sename manualai.lt puslapyje.
Naujasis puslapis yra v2.manualai.lt

Kitas svarbus HTML elementas - lentelės. Lentelės yra apibrėžiamos tag'u <table>. Lentelė visada turi turėti nors vieną eilutę ir nors vieną stulpelį. Eilutė apibrėžiama <tr> tag'u, o stulpelis toje eilutėje <td>. <tr> tag'ai yra skirti <td> grupiavimui, į <td> tag'o vidų galima talpinti tekstą, paveikslėlius, sąrašus, paragrafus, formas, horizontalias liniuotes, kitas lenteles ir t.t.

Štai kaip atrodo paprasčiausia HTML lentelė:

Pažymėkime viską skaičiais:

Kad būtų aiškiau, pridėjau trečią stulpelį. Kodas šios lentelės yra toks:

<table width="200" cellspacing="1" cellpadding="1" border="1">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
</table>

Dabar kiekvieną eilutę išnagrinėkime. <table> </table>, kaip jau žinome apibrėžia lentelės pradžią ir pabaigą. <tr></tr> apibrėžia eilutę. Tarp eilutės pradžios ir pabaigos tag'ų yra aprašyti trys stulpelia. Tarp pirmųjų <tr> tag'ų 1.1, 1.2 ir 1.3, tarp antrų - 2.1, 2.2 ir 2.3. Tirkiausiai pastebėjote, kad <table> tag'as turi savo kelis parametrus: width, cellspacing, cellpadding ir border. Tai yra pagrindiniai parametrai, kuriuos reiktų visada nurodyti kuriant lentelę. Width nurodo plotį. Pločiui nurodyti dažniausiai naudojamas tiesiog paprastas skaičius, kas reiškia lentelės plotį pikseliais. Kitas dažnas žymėjimas yra skaičius su procentų ženklu, pvz.: width="50%", toks pločio aprašymas reikštų, kad lentelė turi užimti pusę (50%) jai skirtos erdvės. Cellspacing nurodo tarpus tarp lentelės <td> elementų, cellpadding vidinį <td> elemento atitraukimą, t.y. jeigu lentelės parametras cellpadding bus lygus 10, tada tekstas, esantis <td> elemento viduje nuo kraštų bus atitrauktas per 10 pikselių. Border parametras nurodo koks yra lentelės rėmelio storis.

Antraštės lentelėse

Antraštė HTML lentelėje apibrėžiama <th> tag'u.

<table width="200" cellspacing="1" cellpadding="1" border="1">
        <tr>
            <th>Antraštė 1.1</th>
            <th>Antraštė 1.2</th>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
</table>
Tai atrodys taip:

Tušti langeliai

Tušti langeliai ne visada būna atvaizduojami taip, kaip norima, todėl reikia nepamiršti specialiojo simbolio &nbps; (non-breakable space) kuris nurodo nepertraukiamą tarpą. Jei norite turėti tusčią langelį, į jį įrašykite šį nepertraukiamą tarpą ir žinosit, kad visose naršyklėse bus atvaizduota teisingai.

<table width="400" cellspacing="1" cellpadding="1" border="1">
   <tr>
     <th>Paprastas tuščias</th>
     <th>Antraštė 1.2</th>
     <th>Tuščias su spec. simboliu</th>
   </tr>
   <tr>
     <td></td>
     <td>2.2</td>
     <td> </td>
   </tr>
</table>

Tai atrodys taip (kai kurios tobulesnės naršyklės atvaizduoja vienodai):

Pavyzdžiai

pabandyti (Kelios skirtingos HTML lentelės)
pabandyti (Elementari HTML lentelė)
pabandyti (Lentelė su fonu)
pabandyti (Lentelė su skirtingomis border reikšmėmis)
pabandyti (Lentelės antraščių pavyzdys, <th> tag'as)
pabandyti (Lentelės antraštė su <caption> tag'u)
pabandyti (Tusčias lentelės langelis)
pabandyti (Lentelė lentelėje)
pabandyti (Lentelės cellpadding atributo pavyzdžiai)
pabandyti (Lentelės cellspacing atributo pavyzdžiai)
pabandyti (Lygiavimo atributas lentelės langeliuose)
pabandyti (Lentelės langelių frame ir border atributai)