Tabele
Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev razporedimo elemente, kot so na primer besedila, slike, seznami in celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz posameznih celic.
Tabelo opišemo z elementom <table>. Njegova vsebina se prične z morebitnim opisom <caption> , ki se prikaže nad tabelo sredinsko poravnan čez širino celotne tabele. Za opisom lahko z elementi <col >(column) in <colgroup> (column group) določimo lastnosti stolpcev, na koncu pa navedemo še vsebino posameznih celic.
Za opis navadnih celic uporabljamo element <td> (table data), za opis naslovnih, ki se običajno pojavljajo v prvi vrstici ali prvem stolpcu pa element <th> (table heading). Celice združujemo v vrstice, ki jih opišemo z elementi <tr> (table row), vrstice pa v skupine (glava, noge in telo), ki jih opišemo z elementi <thead>, <tfoot > in <tbody> (v tem vrstnem redu). Glavo tabele sestavljajo vrstice, ki se pri izpisu ponovijo na vrhu vsake strani, noge tabele pa vrstice, ki se ponovijo na dnu vsake strani. Tabela lahko ima več teles. Če so glava in noge prazni in je telo eno samo, nam značk za telo ni potrebno pisati (dovolj je samo opisati njegovo vsebino).
Primer tabele
Primer najdete tukaj.
Poravnava celic tabele
Primer najdete tukaj.
Posamezni celici (<td>, <th> ), vrstici (<tr> ), stolpcu ( <col> ) ter skupini vrstic (<thead>, <tfoot> in <tbody> ali stolpcev ( <colgroup> ) lahko določimo, kako naj bo poravnana vsebina znotraj njih. Za vodoravno poravnavo uporabimo lastnost align, z vrednostmi left (levo), right (desno), center (sredinsko) ali justify (obojestransko), za navpično poravnavo pa lastnost valign, z vrednostmi top (navzgor), bottom (navzdol), middle (sredinsko) ali baseline (na osnovno črto).
Širina tabele in posameznih stolpcev
Širino celotne tabele nastavimo z lastnostjo width elementa <table> , širino stolpcev pa z lastnostjo width elementov <col> (za posamezen stolpec) ali <colgroup> (za vse stolpce v skupini). Širine lahko nastavimo v pikslih ali procentih (dejanska širina bo v tem primeru odvisna od širine brskalnikovega okna).
Primer najdete tukaj.
Enote, ki se uporabljajo za nastavljanje širine tabel ali celic v tabelah
- Procenti
Primer: <table width="80%" >
- Piksli
Primer: <table width="600" >
Poglejte si še druge možne enote, ki se uporabljajo v različnih elementih HTML na: http://www.w3schools.com/css/css_units.asp
Razmik med celicami in znotraj celice tabele
Na širino tabele vplivajo tudi razmiki med celicami, ki jih nastavimo z lastnostjo cellspacing elementa <table> (njena privzeta vrednost je 1). Z lastnostjo cellpadding pa nastavimo, koliko prostora naj bo med vsebino celice in njenimi robovi.
Primer najdete tukaj.
Ozadje pri tabeli in celicah
Primer si oglejte tukaj.
Robovi
Ta primer najdete tukaj.
Za določanje robov okoli tabele in posameznih celic imamo na razpolago tri lastnosti elementa <table>. Z lastnostjo border nastavimo debelino zunanjega roba tabele (robovi posameznih celic imajo vedno debelino 1), z lastnostjo frame določimo, katere dele zunanjega roba želimo imeti. Možne vrednosti so void (nobenega), above (zgornjega), below (spodnjega), hsides (zgornjega in spodnjega), vsides (levega in desnega), lhs (levega), rhs (desnega), box (vse štiri) in border (vse štiri). Z lastnostjo rules določimo, med katerimi celicami želimo imeti robove, njene vrednosti pa so none (nikjer), groups (med skupinami), rows (med vrsticami), cols (med stolpci) ali all (med vsemi celicami). V primeru, da je celica prazna, brskalnik njenih robov ne bo narisal.
Če pa bi robove kljub temu radi imeli, moramo v celico zapisati nekaj, kar ne bo imelo vidnega učinka (presledek ni dober, ker celice s samimi presledki brskalniki obravnavajo kot prazne). Najbolje je v celico zapisati trdi presledek.
Stolpci
- Kot smo že omenili, tudi stolpce tabele združujemo v skupine. Temu je namenjen element <colgroup>. Če ga ne navedemo, se predpostavlja, da so vsi stolpci v eni sami skupini.
- Stolpce v skupini lahko naštejemo z uporabo elementov <col>, ali pa samo določimo njihovo število z lastnostjo span elementa <colgroup> . Vse druge lastnosti tega elementa (width, align, valign) se nanašajo na posamezne stolpce znotraj skupine. Tudi stolpcu (elementu <col>) lahko predpišemo vse te lastnosti. Lastnost span v tem primeru določa, koliko stolpcev ima enake lastnosti (poleg njih so v skupini lahko še drugi stolpci).
Združevanje celic
- Več sosednjih celic lahko združimo v večjo celico, pri tem pa se nova celica lahko razteza čez več vrstic ali stolpcev. Celici z lastnostjo colspan določimo, čez koliko stolpev naj sega (seveda moramo v tisti vrstici ustrezno zmanjšati število celic), z lastnostjo rowspan pa, čez koliko vrstic naj sega (v tem primeru moramo paziti, da v naslednjih vrsticah zmanjšamo število celic - pri naštevanju celic v vrstici preskočimo stolpec, ki ga zaseda celica iz prejšnje vrstice).
Primer najdete tukaj.
Primer združevanja celic
Primer si oglejte tukaj.
Gnezdenje tabel
- Vsebina celice je lahko karkoli: poljubno besedilo, slika, seznam ali pa celo druga tabela. Zato tabele velikokrat nastopajo kot elementi za razporejanje drugih elementov (besedila, slik, tabel, seznamov ...) na spletni strani. S tem pa ni priporočljivo pretiravati, saj lahko koda HTML postane zelo nepregledna (pogosto najdemo primere gnezdenja tabel do nivoja pet ali celo več).
Primer tabele
Tukaj si oglejte primer te tabele
Značke za delo s tabelami
<table> Definira tabelo
<caption> Definira napis tabele
<th> Definira naslov tabele
<tr> Definira vrstico tabele
<td> Definira celico tabele
<thead> Definira glavo tabele
<tbody> Definira telo tabele
<tfoot> Definira spodnji del tabele
<col> Definira kolono tabele
<colgroup> Definira skupino kolon tabele