HTML Tabele

Znotraj elementa <table> je atribut <thead> vedno definiran in znotraj glave, se nahaja <tr> atribut. Atribut <tr> pomeni vrstico tabele (ang. Table row), ki pove, koliko stolpcev <td> bo tabela imela znotraj, kar so podatki tabele. Naslednji atribut, ki je definiran v tabeli je <tbody> in prikazuje vrstice. Za vnos glave tabele uporabljamo atribut <th>, ker okrepi besedo (uporabi krepko pisavo). Tretji atribut je <tfoot>, ki ni obvezen, je pa dobrodošel pri izračunih in predstavlja nogo tabele. Uporabimo lahko tudi pod atributa <tr> in <td> v nogi.

Oblikovanje vrstic (<tr>) proti celicam (<td>)

Pri oblikovanju tabel znotraj same HTML kode (z atributom style) je ključno razumeti razliko med vrstico (<tr>) in celico (<td> ali <th>). Čeprav se zdi logično, da bi sloge pisali, kar v vrstico, brskalniki določene lastnosti upoštevajo le, če so zapisane neposredno v celici.

Kaj pišemo v značko <tr> (Vrstica)?

Vrstica deluje kot vsebnik za besedilo, zato se lastnosti, ki se tičejo samega besedila, običajno uspešno prenesejo (dedujejo) na vse celice znotraj nje.

1. Pisava: Nastavljanje družine pisave (font-family), velikosti (font-size) ali debeline (font-weight).
2. Barva besedila: Osnovna barva pisave (color).
3. Poravnava: Smer besedila (text-align: center, left, right).
4. Barva ozadja: Čeprav background-color v teoriji na vrstici deluje, ga lahko določene nastavitve v vašem glavnem CSS-u (ali simulatorju) preglasijo. Če barva na vrstici ne "prime", jo prestavite v celico.

2. Kaj pišemo v značko <td> ali <th> (Celica)?

Celica je osnovna "gradbena enota" tabele. Vse, kar določa fizično obliko in strukturo posameznega kvadratka, mora biti zapisano tukaj.

1. Obrobe (border): To je najpogostejša napaka – vrstica (<tr>) ne zna risati obrob. Če želite obrobljeno tabelo, morate border vedno zapisati v vsako celico (<td>) posebej.
2. Notranji odmiki (padding): Da se besedilo ne dotika robov celice, uporabljamo padding. Ta lastnost deluje izključno na nivoju celice.
3. Zanesljiva barva ozadjaČe želite biti 100-odstotno prepričani, da bo barva ozadja vidna (tudi če simulator ali glavni CSS uporablja stroga pravila), barvo nastavite neposredno v znački <td>.

Zlato pravilo: Če slog, ki ste ga dodali v <tr>, ne deluje, ga preprosto prestavite v <td>. Celica ima v brskalniku vedno zadnjo besedo.

Hitri pregled HTML tabel (Cheat Sheet)

Ta tabela vam omogoča hiter pregled vseh ključnih elementov in atributov za ustvarjanje strukturiranih tabel.

Element/Atribut	Opis	Primer kode	Opombe
<table>	Glavni vsebnik za tabelo.	<table> ... </table>	Vsebuje <thead>, <tbody>, <tfoot>.
<caption>	Naslov ali opis tabele (prikazan nad tabelo).	<caption>Prodaja 2024</caption>	Pomemben za dostopnost.
<thead>	Glava tabele (naslovi stolpcev).	<thead><tr>...</tr></thead>	Običajno vsebuje <th>.
<tbody>	Vsebina tabele (podatki).	<tbody><tr>...</tr></tbody>	Glavni del tabele.
<tfoot>	Noga tabele (vsote, opombe).	<tfoot><tr>...</tr></tfoot>	Možna je tudi pred <tbody>.
<tr>	Vrstica tabele (Table Row).	<tr><td>...</td></tr>	Ne vsebuje podatkov direktno, le celice.
<th>	Naslovnica celice (Header Cell).	<th>Ime</th>	Prikazano krepko in sredinsko poravnano (privzeto).
<td>	Podatkovna celica (Table Data).	<td>Podatek</td>	Osnovna celica za vsebino.
colspan="n"	Prekrivanje več stolpcev (horizontalno).	<td colspan="2">Skupaj</td>	Uporabno za združevanje naslovov ali vsot.
rowspan="n"	Prekrivanje več vrstic (navpično).	<td rowspan="2">Oddel</td>	Uporabno za združevanje kategorij.
scope="col"	Določi, da je <th> naslov stolpca.	<th scope="col">Ime</th>	Pomembno za bralnike zaslona.
scope="row"	Določi, da je <th> naslov vrstice.	<th scope="row">Oddel</th>	Pomembno za bralnike zaslona.
border="1"	Preprosta obroba okoli celic (stara metoda).	<table border="1">	Za moderno oblikovanje uporabite CSS (border).
cellpadding	Odmik med vsebino in robom celice.	<table cellpadding="10">	Zamenjava: CSS padding na td.
cellspacing	Razmik med celicami.	<table cellspacing="0">	Zamenjava: CSS border-collapse: collapse.