Skonstruirajte si svoje tabele

Tabele

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

Tabele po poglavjih:

- Tabela

- Velikost tabele

- Celice brez vsebine

- Colspan

- Rowspan

- Postavitev tabele

- Tabela v tabeli

Priporočam:

- Zapletena colspan tabela

- Tabela v tabeli

Tabela

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>.

Velikost tabele

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>.

Celice brez vsebine

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.

HTML primer 1:

Prikaz tabele z dvema vrsticama in dvema stolpcema

HTML primer 2:

Prikaz tabele z vsebino

Colspan - drugačno število stolpcev

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.

HTML primer 3:

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 spodaj en preveč.
- ostane nam še tretja vrstica, ki pa ima ponovno 3 stolpce, kar pomeni, da se bo en zopet raztezal čez 2 zgornja stolpca.

HTML primer 4:

Prikaz zapletene tabele z atributom colspan

Rowspan - drugačno število vrstic

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>.

HTML primer 5:

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.

Postavitev tabele

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.

HTML primer 6:

Prikaz sredinske poravnave

Tabela v tabeli

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

HTML primer 7:

Prikaz tebele v tabeli

To bi bilo nekako vse o konstruiranju in postavitvi tabel. S tem vodičem ste spoznali, kako ustvariti tabelo, ter kako jo umestiti v spletno stran. 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.