Tablice u HTML-u

Tablice su neophodne u HTML. Koriste se kako pri dizajnu tako i za prikazivanje podataka. U zadnje vrijeme dizajn pomoću tablica se izbjegava jer kao takav nije bio ni zamišljen na početku. U HTML tablicu definiramo tagom <table> i završavamo sa </table>. Unutar ovih tagova definiramo retke i stupce. Pogledajmo primjer:

<table border="1px"> <tr> <td>Ime</td><td>Prezime</td> </tr> <tr> <td>Jure</td><td>Juric</td> </tr> <tr> <td>Ivan</td><td>Ivankovic</td> </tr> </table>

Ime	Prezime
Jure	Juric
Ivan	Ivankovic

Pogledajmo kod. Definirali smo tablicu i atribut border postavili na 1. To će omogućiti prikaz rubova tablice i postavit će debljinu na 1 piksel. Idemo urediti malo tablicu tako što ćemo prvi red označiti kao naslov sa tagom <th>.

<table border="1px" width="50%" height="30px"> <tr> <th>Ime</th><th>Prezime</th> </tr> <tr> <td>Jure</td><td>Juric</td> </tr> <tr> <td>Ivan</td><td>Ivankovic</td> </tr> </table>

Ime	Prezime
Jure	Juric
Ivan	Ivankovic

Ovdje smo postavili naslov tablice i uredili širinu i visinu tablice. Naravno po našoj potrebi možemo stavljati i tablicu unutar tablice te tako dobiti položaj koji želimo, ali se tada sve počinje komplicirati i ovdje bi bilo dobro početi koristiti HTML vizualne uređivače:

<table width="50%"> <tr><td> <table border="1px" width="50%" height="30px"> <tr> <th>Ime</th><th>Prezime</th> </tr> <tr> <td>Jure</td><td>Juric</td> </tr> <tr> <td>Ivan</td><td>Ivankovic</td> </tr> </table> </td><td> <table border="1px" width="50%" height="30px"> <tr> <th>Ime</th><th>Prezime</th> </tr> <tr> <td>Jure</td><td>Juric</td> </tr> <tr> <td>Ivan</td><td>Ivankovic</td> </tr> </table> </td></tr> </table>

Ime	Prezime
Jure	Juric
Ivan	Ivankovic

Ime	Prezime
Jure	Juric
Ivan	Ivankovic

Ponekad trebamo i spojiti ćelije ili retke. To se definira atributima colspan i rowspan. Evo i primjera:

Imena i prezimena
Jure	Ivankovic
Ivan	Ivankovic

Ako ste naučili nešto novo napišite jedan komentar podrške.
Hvala!

Autor: Vedran

Datum objave: 21.01.2008

Za vas smo izdvojili:

■  HTML - početak
■  HTML Fieldset
■  Kako postaviti dio slike kao link
■  Web forme
■  Meta tagovi

Zadnjih 5 članaka

■  Lozinke, lozinke …
■  Kako prebaciti PDF u Word dokument
■  Kako postaviti stranicu na Internet
■  Cyclic Redundancy Check error
■  Riješite se Antivirus 2009 - rogue programa

KOMENTARI:

Nema još ni jednog komentara.

Samo registrirani korisnici mogu komentirati.