Osnove rada s tablicama

U izradi web stranica, tablice su jedan od najvažnijih elemenata. Osim tablice možete koristiti i divove o kojima pišem kasnije. U ovom ćete tutorialu naučiti osnove rada sa tablicama!

Za početak, morate znati tri osnovna elementa:

<table> - kreira tablicu (zatvara se sa </table>)
<tr> - kreira redak u tablici (zatvara se sa </tr>)
<td> - kreira ćeliju u tablici (zatvara se sa </td>)

Tablica može imati i okvir, koji se stavlja pomoću elementa border koji se upisuje u tag <table>, ovako: <table border="1">. Taj će kod kreirati tablici okvir debljine 1 piksela. Taj broj definira kolika je debljina (u pikselima) okvira tablice. Ukoliko stavite border="0", tada okvira neće biti, tj. debljina okvira je 0, znaći ništa.

Naravno, možete i namjestiti boju vašeg okvira, i to pomoću elementa bordercolor koji se također upisuje u <table> tag, npr: <table border="1" bordercolor="#FFFFFF">. Taj će kod kreirati crni okvir, no vi umjesto #FFFFFF (crna) možete stavit bilo koju boju.

Osim okvira, tablici možemo mjenjat i širinu između rubova elementom cellspacing, koji se upisuje u <table>, ovako: <table cellspacing="1">, što će napravit širinu od 1 piksela. Taj broj definira kolika je ta širina (u pikselima).

I treća mogućnost je pomicanje teksta od okvira tablice elementom cellpadding koji se umeće u tag <table>, ovako: <table cellpadding="1">, što će pomaknuti tekst od okvira za 1 piksel. Taj broj definira tu udaljenost teksta od okvira (u pikselima).

Sada kad ste naučili osnove tablica, napravit ćemo jedan primjer kako biste vidjeli kako tablice funkcioniraju. Prvo ćemo napisati kod:

<table border="1" bordercolor="red" cellspacing="4" cellpadding="8">
<tr><td>Primjer 1</td> <td>Primjer 2</td> <td>Primjer 3</td></tr>
<tr><td>Primjer 4</td> <td>Primjer 5</td> <td>Primjer 6</td></tr>
</table>

A to će u web browseru izgledati ovako:

Eto, naučili ste osnove izrade tablica. Kasnije ću pisati nešto više o tome!