Tabele

Tabele so zelo pomembne pri postavitvi spletne strani, saj vanje vstavimo design, besedilo, menije, slike, … vse.

Tabelo definiramo z oznako <table>, ki jo zapremo s </table>. Vsaka tabela pa vključuje seveda vrstice in pa stolpce, saj z njimi povemo, koliko celic namerava imeti in kako velike naj bodo. V HTML kodi najprej definiramo vrstice. Oznaka za vrstice je <tr>, ki se zapre s </tr>. Vsaki vrstici pa moramo določiti tudi stolpce, katerih oznaka je <td>, ki se zapre s </td>.

Tabeli moramo določiti širino in pa višino. Za širino se uporablja atribut width=" ", ki ga vstavimo v oznako <table>. Širino določimo s številčno vrednostjo slikovnih pik oz. pikslov ali pa s procenti, kar odraža odstotek celotne širine celotne spletne strani.

Višino definiramo z atributom height=" ", ki ga prav tako vključimo v oznako <table>. Vrednost podajamo v slikovnih pikah oz. pikslih, lahko pa tudi v procentih.

Z omenjenima atributoma (width, height) lahko nadzorujemo tudi širine in višine posameznih stolpcev, to se pravi da ta dva atributa lahko vstavimo tudi v oznako <td>.

Celic brez vsebine brskalniki ne prikazujejo, zato morate v vsako celico dodati vsebino. Če za določeno celico nimate pripravljene vsebine oz. mora biti prazna vanjo enostavno vpišite &nbsp; kar nakazuje, da je tam presledek (Non-breaking space) in to brskalniki interpretirajo kot vsebino.

*v kodi se pojavi atribut border="1", kar omogoča lažjo predstavo tabele, nakazuje pa obrobo tabele.

Prikaz tabele z dvema vrsticama in dvema stolpcema

Prikaz tabele z vsebino

V zgornjih primerih sem prikazal le tabeli z vrsticami z enakim številom stolpcev. Kaj pa če hočemo v prvi vrstici imeti 2 stolpca, v drugi vrstici pa le enega. Da nam uspe kaj takega uporabimo atribut colspan=" ", ki ga vključimo v oznako <td>, se pravi v oznako stolpca.

Prikaz tabele z atributom colspan

Spodaj je še prikaz malo bolj zapletene tabele z atributom colspan= »«.

Preglejmo jo po korakih:

- ima oznako <table>, to se pravi, da je tabela
- ima 3 <tr>, kar pomeni, da ima 3 vrstice
- v prvi vrstici ima 3 <td>-je torej ima 3 stolpce (=3 celice)
- toda v drugi vrstici so 4-je <td>-ji, kar pomeni, da ima druga vrstica 4 stolpce, zato moramo enemu izmed zgornjih stolpcev določiti colspan="2", saj se mora po vseh pravilih raztezati čez spodnja dva stolpca, saj je en preveč spodaj.
- ostane nam še tretja vrstica, ki pa ima ponovno 3 stolpce, kar pomeni, da se bo en zopet raztezal čez 2 zgornja stolpca.
 

Prikaz zapletene tabele z atributom colspan

Ena od možnosti je tudi, da imate v enem stolpcu eno vrstico, v drugem stolpcu pa 2 ali več vrstic. To določimo z atributom rowspan=" ", ki ga prav tako vstavimo v oznako <td>.

Primer tabele z atributom rowspan

Pokomentirajmo kodo:

- vsega skupaj ima 2 <tr> se pravi v celi tabeli bosta dve vrstici.

- v prvi vrstici sta 2 <td>-ja (stolpca) vendar oznaka rowspan določa, da se bo drugi stolpec nadaljeval v naslednji vrstici (spada še vseeno pod prvo vrstico).

- v drugi vrstici je tako prostora le še za en stolpec, saj en prihaja že iz prve vrstice.

Zgornji primeri naj bi vam pokazali, kako skonstruirati tabelo. Sedaj moramo tabeli le še določiti, kje naj bo: levo, desno ali na sredini. To storimo z atributom align="", vanj pa lahko vstavimo left za levo postavitev, center za sredinsko postavitev in pa right za desno postavitev.

Prikaz sredinske poravnave

Vedeti morate tudi, da je možno postaviti tabelo v tabelo. Velikokrat pride prav, še posebej, pri vstavljanju design-a in vsebine.

Prikaz tebele v tabeli

To bi bilo nekako vse o konstruiranju in postavitvi tabel. Upam, da vas colspan in rowspan nista prestrašila.

Za urejanje in ustvarjanje HTML kode lahko uporabite različne programe (Front Page, Dreamweaver), ki vam sami spišejo kodo in tako lahko milo rečeno odmislite colspan, rowspan in nekatere druge neprijetnosti. Po drugi strani pa, vzemite si čas, premislite, in videli boste, da boste s poznavanjem in razumevanjem kode veliko lažje in hitreje urejali svoje spletne strani in razne nepravilnosti, ki se prikradejo v kodo.