Vodič kroz
HTML
- Introduction to HTML:
Uvod u HTML - HTML Elements:
HTML elementi - HTML Attributes:
HTML svojstva - HTML Structure:
HTML struktura - HTML Paragraphs:
HTML odlomci - HTML Text Formatting:
HTML oblikovanje teksta - HTML Headings:
HTML naslovi - HTML Lists:
HTML popisi - HTML Links and Anchors:
HTML poveznice i sidra - HTML Images:
HTML slike - HTML Tables:
HTML tablice - HTML Classes and IDs:
HTML klase i id - HTML Divs and Spans:
HTML div i span - HTML Comments:
HTML komentari - HTML HR Code Page:
HTML HR kodne stranice - HTML Forms:
HTML forme - HTML Meta:
HTML meta - HTML Free Editors:
HTML besplatni editori - HTML and CSS:
HTML i CSS - HTML and JavaScript:
HTML i JavaScript - HTML Colors:
HTML boje - HTML Color Codes:
HTML kodovi boja - HTML Color Names:
HTML nazivi boja - HTML Symbols:
HTML simboli i posebni znakovi - HTML Background Color:
HTML boja pozadine - HTML Background Image:
HTML pozadinska slika
HTML tablice : HTML Tables
HTML tablice - struktura
Tablice se koriste za prikazivanje podataka u stupcima.
Tablice se više ne koriste za izradu strukture web stranice jer je tu zadaću preuzeo css.
HTML tablica je upisana između početne i završne oznake <table> elementa. Tablica može imati željeni broj redaka a svaki redak upisujemo između početne i završne oznake <tr> elementa.
Svaki redak ima jednaki broj ćelija koje omeđujemo oznakom elementa <td>...</td>.
HTML tablice - osnovni elementi
Označavanje početka i kraja tablice: <table> ... </table>
Početak i kraj dijela gdje se nalazi zaglavlje stupaca: <thead> ... </thead>
Početak i kraj zaglavlja stupaca: <th> ... </th>
Početak i kraj tijela stranice unutar kojeg se nalazi podatci: <tbody> ... </tbody>
Početak i kraj retka tablice: <tr> ... </tr>
Početak i kraj ćelije s podatcima: <td> ... </td>
Primjer tablice u HTML-u:
<table>
<thead>
<tr>
<th>Naziv 1 </th>
<th>Naziv 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Ćelija 1 u 1. retku </td>
<td>Ćelija 2 u 1. retku </td>
</tr>
<tr>
<td>Ćelija 3 u 2. retku </td>
<td>Ćelija 4 u 2. retku </td>
</tr>
</tbody>
</table>Izgled gornjeg primjera na web stranici:
Tablice i web dizajn!
Tablice - svojstva stupca:
Korištenjem praznog elementa <col /> moguće je postaviti svojstva za pojedini stupac tablice.
Ove elemente umećemo iza elementa <table> a prije elementa <thead>
Najkorisnija uloga <col /> elementa je postavljanje širine stupaca.
Gornji primjer možemo preinačiti korištenjem <col /> elementa:
<table style="width:80%; border:1px solid black;">
<col style="width:40%;" />
<col style="width:30%;" />
<col style="width:30%;" />
<thead>
<tr>
<th>Stupac 1 </th>
<th>Stupac 2 </th>
<th>Stupac 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Ćelija 1 u 1. retku </td>
<td>Ćelija 2 u 1. retku </td>
<td>Ćelija 3 u 1. retku </td>
</tr>
<tr>
<td>Ćelija 1 u 2. retku </td>
<td>Ćelija 2 u 2. retku </td>
<td>Ćelija 3 u 2. retku </td>
</tr>
</tbody>
</table>Izgled ovog primjera na web stranici:
U gornjem primjeru ukupna širina tablice će biti 80% širine roditeljskog elementa i obrubljena je s zadanim obrubom (1px solid black).
Prvi stupac ima 40%, drugi stupac 30% a treći stupac 30% od ukupne širine tablice.
Svojstvo border elementa <table>
Želimo li prikazati rubove tablice koristimo svojstvo border i dodjeljujemo mu vrijednost debljine crte ruba tablice. Ako svojstvo border nije definirano rubovi tablice ne će biti prikazani.
Svojstvo širine tablice : width Attribute
Zadano tablica zauzima prostor koji je dostatan kako bi bio prikazan sadržaj svih stupaca tablice.
U slučaju da je širina sadržaja manja od roditeljskog elementa i želimo je povećati moramo koristiti svojstvo width.
Roditeljski element je element u kojem je definirana tablica, najčešće je to <body> element koji zauzima cijeli prozor web preglednika).
Svojstvo width može biti izraženo kao apsolutna vrijednost u pikselima ili kao relativna vrijednost u postotcima u odnosu na roditeljski element.
Svojstvo rowspan tablice : rowspan Attribute
Kada želimo protegnuti stupac kroz više redaka koristimo svojstvo rowspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj redaka kroz koja se proteže stupac.
Primjer stupca koji se proteže kroz 3 retka:
<table border="1">
<tr>
<td rowspan="3" width="160">Prvi stupac</td>
<td width="160">Prvi redak</td>
</tr>
<tr>
<td>Drugi redak</td>
</tr>
<tr>
<td>Treći redak</td>
</tr>
</table>Izgled ovog primjera na web stranici:
Svojstvo colspan tablice : colspan Attribute
Kada želimo protegnuti redak kroz više stupaca koristimo svojstvo colspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj stupaca kroz koja se proteže redak.
Primjer retka koji se proteže kroz 3 stupca:
<table border="1">
<tr>
<td colspan="3" width="320">Prvi redak</td>
</tr>
<tr>
<td>Prvi stupac</td>
<td>Drugi stupac</td>
<td>Treći stupac</td>
</tr>
</table>Izgled ovog primjera na web stranici:
Prazna ćelija : Empty cell
Ćelije bez sadržaja mogu biti netočno prikazane u nekim web preglednicima. Kako bi to izbjegli potrebno je umetnuti jedan prazan znak (engl. non-break spacing): unutar prazne ćelije.