Tablice

Prikaz tablice u HTML-u pocinjemo tagom <table>. Nakon njega navodimo retke tablice jedan za drugim. Pocetak retka oznacen je tagom <tr> ("table row"), a kraj njegovim zatvaracem. U svakom retku navodimo onda celiju po celiju sadrzaj tablice. Tag <td> ("table data") oznacava pocetak a njegov zatvarac kraj celije. Celija moze sadrzavati tekst, slike, liste, odlomke, druge tablice... Na kraju tablice imamo tag </table>

Atribut border

Tablice se po defaultu prikazuju tako da im ne vidimo granice (rubove i crte izmedju redaka i stupaca). Ipak, najcesce zelimo tablicu koja ima granice. Tada moramo postaviti border na 1. Primjer tablice sa dva stupca i dva retka:

<table border="1">
<tr>
<td>prva celija prvog retka</td>
<td>druga celija prvog retka</td>
</tr>
<tr>
<td>prva celija drugog retka</td>
<td>druga celija drugog retka</td>
</tr>
</table>

Zadatak 12: Prikazite najprije gornju tablicu u svojoj stranici. Zatim joj dodajte jos nekoliko redaka i upisite neki sadrzaj u celije.

Naslovi i prazne celije

Naslovi u tablici definiraju se koristenjem taga <th> ("table heading") umjesto <td>. Primjer:

<table border="1">
<tr>
<th>naslov prvog stupca</th>
<th>naslov drugog stupca</th>
</tr>
<tr>
<td>prva celija prvog retka</td>
<td>druga celija prvog retka</td>
</tr>
<tr>
<td>prva celija drugog retka</td>
<td>druga celija drugog retka</td>
</tr>
</table>

Vecina browsera nece se dobro ponasati ukoliko samo preskocimo celiju koju zelimo ostaviti praznu. Zato je takvu celiju najblje popuniti znakom za prazno mjesto:

<table border="1">
<tr>
<td>&nbsp;</td>
<td>druga celija prvog retka</td>
</tr>
<tr>
<td>prva celija drugog retka</td>
<td>&nbsp;</td>
</tr>
</table>

Zadatak 13: Dodajte u svoju tablicu naslove i nekoliko praznih celija.

Tablice sa celijama koje obuhvacaju vise redaka ili stupaca. Poravnavanje sadrzaja celija

Tagovi <th> i <td> mogu imati atribute colspan i rowspan pomocu kojih se definira kroz koliko se stupaca odnosno redaka celija treba protezati. Mogu imati i atribut align koji sluzi za poravnavanje sadrzaja celije (centrirano -vrijednost center, blize lijevom ili desnom rubu - vrijednosti left ili right). Atribut align mozemo pisati i u tag <tr>, i tada djeluje na cjeli redak.

Zadatak 14: dodajte sljedece tri tablice u svoju stranicu, pogledajte kako izgledaju u browseru. Dodajte slicne efekte i u svoju tablicu.

<table border="1">
<tr>
  <th>Ime</th>
  <th colspan="2">Telefon</th>
</tr>
<tr>
  <td>Ivan Ivic</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<table border="1">
<tr>
  <th>Ime:</th>
  <td>Ivan Ivic</td>
</tr>
<tr>
  <th rowspan="2">Telefon:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

<table border="1" width="100%">
    <tr>
      <th align="left">Prikaz</th>

      <th align="right">Kod</th>
     
    </tr>
    <tr align="center">
      <td>č</td>

      <td>&#269;</td>

    </tr>

<tr align="center">
      <td>ć</td>
      <td>&#263;</td>

    </tr>

</table>

Atributi width i cellpadding

U trecoj tablici prethodnog primjera koristili smo atribut width taga <table>. Taj atribut govori nam o sirini tablice. Ako nije specificiran, tablica se sama definira ovisno o velicini upisanih podataka. Ako je postavljen na 100% kao u prethodnom primjeru, tada je tablica siroka kao citava stranica. Atributu width mozemo po potrebi pridavati razlicite numericke vrijednosti, kada zelimo da tablica bude sira nego sto je po defaultu. Na primjer:

<table border="1" width="10">

Takodjer tablici mozemo dodati i atribut cellpadding koji ce nam dati vise mjesta u tablici izmedju nasih podataka i granica celija.

Zadatak 15: Dodajte u neku od tablica u tag <table> atribut cellpadding="10" i pogledajte razliku.

I atribut cellpadding mozemo po volji prilagodjavati mjenjanjem njegove numericke vrijednosti.

Poravnavanje tablice na stranici - atribut align

Da bi citavu tablicu na stranici postavili lijevo, desno ili centrirano, koristimo atribut align sa vrijednostima left, center ili right:

<table border="1" align="center">

Boja u tablici

Bas kao sto citavoj stranici mozemo definirati pozadinsku sliku ili boju pozadine, to na potpuno isti nacin i uz koristenje istih atributa mozemo ciniti i svim elementima tablice, od citave tablice do pojedine celije. Pogledajmo nekoliko primjera:

<table border="1" background="http://web.math.hr/~karaga/concrete.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td background="http://web.math.hr/~karaga/concrete.gif">
  Second</td>
  <td>Row</td>
</tr>
</table>

Zadatak 16: Dodajte u svoju tablicu boje ili pozadine po izboru.

Organizacija prostora na stranici