NAZAD NA POČETNU Tabele NAZAD
Zadatak br.1-napravimo jednostavnu tabelu
<!DOCTYPE html>
<html>
<body>
<p>
Svaka tabela pocinje sa <table> tagom.
Svaki red table pocinje sa <tr> tagom.
Svaka vrijednost u tabeli pocinje sa <td> tagom.
</p>
<h4>Jedna kolona:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Jedan red i 3 kolone:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>2 reda i 3 kolone</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Zadatak br.2- tabela sa drugacijim okvirima
<!DOCTYPE html>
<html>
<body>
<h4>Sa normalnim okvirom:</h4>
<table border="1">
<tr>
<td>Prvi</td>
<td>Red</td>
</tr>
<tr>
<td>Drugi</td>
<td>Red</td>
</tr>
</table>
<h4>Sa debelim okvirom:</h4>
<table border="8">
<tr>
<td>Prvi</td>
<td>Red</td>
</tr>
<tr>
<td>Drugi</td>
<td>Red</td>
</tr>
</table>
<h4>Sa veoma debelim okvirom:</h4>
<table border="15">
<tr>
<td>Prvi</td>
<td>Red</td>
</tr>
<tr>
<td>Drugi</td>
<td>Red</td>
</tr>
</table>
</body>
</html>
Zadatak br.3-Napravimo tabelu bez okvira
<!DOCTYPE html>
<html>
<body>
<h4>Ovo je tabela bez okvira:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Zadatak br.4-napravimo tabelu sa header-om(korisno za pravljenje formi i obrazaca)
<!DOCTYPE html>
<html>
<body>
<h4>Headeri u tabeli:</h4>
<table border="1">
<tr>
<th>Ime</th>
<th>Telefon</th>
<th>Telefon</th>
</tr>
<tr>
<td>Aleksandar Djordjevic</td>
<td>065 844 465</td>
<td>051 301 744</td>
</tr>
</table>
<h4>Vertikalni headeri:</h4>
<table border="1">
<tr>
<th>Ime:</th>
<td>Aleksandar Djordjevic</td>
</tr>
<tr>
<th>Telefon:</th>
<td>065 844 465</td>
</tr>
<tr>
<th>Telephone:</th>
<td>065 844 465</td>
</tr>
</table>
</body>
</html>
Zadatak br.5- tabela sa naslovom
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Mjesecna usteda</caption>
<tr>
<th>Mjesec</th>
<th>Usteda</th>
</tr>
<tr>
<td>Januar</td>
<td>100 KM</td>
</tr>
<tr>
<td>Februar</td>
<td>50 KM</td>
</tr>
</table>
</body>
</html>
Zadatak br.6-ubacivanje tagova u tabelu
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>Ovo je paragraf</p>
<p>I ovo je paragraf</p>
</td>
<td>Ovo je tabela u celiji:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>U ovoj celiji se nalazi lista
<ul>
<li>jabuke</li>
<li>banane</li>
<li>jagode</li>
</ul>
</td>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
Zadatak br.7- razmak izmedju celija
<!DOCTYPE html>
<html>
<body>
<h4>Bez razmaka:</h4>
<table border="1">
<tr>
<td>Prvi</td>
<td>Red</td>
</tr>
<tr>
<td>Drugi</td>
<td>Red</td>
</tr>
</table>
<h4>Sa razmakom="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>Prvi </td>
<td>Red</td>
</tr>
<tr>
<td>Drugi</td>
<td>Red</td>
</tr>
</table>
<h4>Sa razmakom="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>Prvi</td>
<td>Red</td>
</tr>
<tr>
<td>Drugi</td>
<td>Red</td>
</tr>
</table>
</body>
</html>
Liste
Zadatak br.8- Napravimo jednu neuredjenu listu
<!DOCTYPE html>
<html>
<body>
<h4>Neuredjena lista:</h4>
<ul>
<li>Banane</li>
<li>Jagode</li>
<li>Jabuke</li>
</ul>
</body>
</html>
Zadatak br.9-Napravimo uredjenu listu
<!DOCTYPE html>
<html>
<body>
<h4>Uredjena lista:</h4>
<ol>
<li>Banane</li>
<li>Jagode</li>
<li>Jabuke</li>
</ol>
</body>
</html>
Zadatak br.10-Razlicite vrste uredjenih listi
<!DOCTYPE html>
<html>
<body>
<h4>Numerisana lista:</h4>
<ol>
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ol>
<h4>Lista sa slovima:</h4>
<ol type="A">
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ol>
<h4>Lista sa malim slovima:</h4>
<ol type="a">
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ol>
<h4>Rimski brojevi:</h4>
<ol type="I">
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ol>
<h4>Mali rimski brojevi:</h4>
<ol type="i">
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ol>
</body>
</html>
Zadatak br.11- razlicite vrste neuredjenih listi
<!DOCTYPE html>
<html>
<body>
<h4>Popunjen kruzic:</h4>
<ul type="disc">
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ul>
<h4>Prazan kruzic:</h4>
<ul type="circle">
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ul>
<h4>Kvadratic:</h4>
<ul type="square">
<li>Jabuke</li>
<li>Banane</li>
<li>Jagode</li>
<li>Lubenice</li>
</ul>
</body>
</html>
Zadatak br.12- lista u listi(ugnjezdena lista)
<!DOCTYPE html>
<html>
<body>
<h4>Ugnjezdena lista:</h4>
<ul>
<li>Kafa</li>
<li>Caj
<ul>
<li>Nana</li>
<li>Hibiskus</li>
</ul>
</li>
<li>Sok</li>
</ul>
</body>
</html>
Forme i unosi
Zadatak br.13-ubacimo jednostavnu formu
<!DOCTYPE html>
<html>
<body>
<form action="">
Ime: <input type="text" name="Ime" /><br />
Prezime: <input type="text" name="Prezime" />
</form>
</body>
</html>
Zadatak br.14-ubacimo "checkbox"
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="checkbox" name="Pol" value="Muski" /> Muski<br />
<input type="checkbox" name="Pol" value="Zenski" /> Zenski
</form>
</body>
</html>
Zadatak br.15- ubacimo "radio button"
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="pol" value="m" /> Muski<br />
<input type="radio" name="pol" value="z" /> Zenski
</form>
<p><b>Napomena:</b> Kada kliknemo na jedan radio button, ovaj drugi automatski
prestaje da vazi.</p>
</body>
</html>
Zadatak br.16- ubacivanje "drop-down" liste
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="Pol">
<option value="muski">Muski</option>
<option value="zenski">Zenski</option>
</select>
</form>
</body>
</html>
Zadatak br.17- napravimo dugme
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Klikni me!">
</form>
</body>
</html>