PrijemTablice
2 posters
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
Tablice
od MRKO Pet Dec 10, 2010 6:46 am
Tablice su možda i najzbunjenije za početnike i neki kad to vide pobjegnu od HTML-a jer misle: "Šta će mi to kad imam Dreamweaver koji to umjesto mene obavi". E pa to nije baš tako. Ako budete možda nekad radili sa PHP-om ili ASP-om trebat će vam znanje "ručne" izrade tablica u HTML-u.
Za početak tablice koristimo <table>. U tom elementu postoje tagovi <tr> (redak) i <td> (stupac).
Evo primjera jedne tablice sa dva reda i dva stupca.
Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva redka.
Primjetite Rowspan s brojem 2. Taj broj označava koliko se redaka nalazi u drugom stupcu.
[You must be registered and logged in to see this image.]
Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan. Evo primjera:
[You must be registered and logged in to see this image.]
Cellspacing
Koristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:
[You must be registered and logged in to see this image.]
Cellpadding
Cellpadding koristite kada želite odvojiti tekst od rubova tablice. Pogledajmo primjer:
[You must be registered and logged in to see this image.]
Za početak tablice koristimo <table>. U tom elementu postoje tagovi <tr> (redak) i <td> (stupac).
Evo primjera jedne tablice sa dva reda i dva stupca.
- Kod:
<table border="1">
<tr>
<td> Prvi red i prvi stupac </td>
<td> Prvi red i drugi stupac </td>
</tr>
<tr>
<td> Drugi red i prvi stupac </td>
<td> Drugi red i drugi stupac </td>
</tr>
</table>
Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva redka.
- Kod:
<table border="1">
<tr>
<td rowspan="2">Jedan redak </td>
<td>Prvi redak</td>
</tr>
<tr>
<td>Drugi redak </td>
</tr>
</table>
Primjetite Rowspan s brojem 2. Taj broj označava koliko se redaka nalazi u drugom stupcu.
[You must be registered and logged in to see this image.]
Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan. Evo primjera:
- Kod:
<table border="1">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>
[You must be registered and logged in to see this image.]
Cellspacing
Koristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:
- Kod:
<table border="1" cellspacing="6">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>
[You must be registered and logged in to see this image.]
Cellpadding
Cellpadding koristite kada želite odvojiti tekst od rubova tablice. Pogledajmo primjer:
- Kod:
<table border="1" cellpadding="15">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>
[You must be registered and logged in to see this image.]
Preuzeto sa: [You must be registered and logged in to see this link.]
MRKO- Administrator
Broj poruka : 3710
D4U Novac : 5149
Reputacija : 40
Godina : 27
Lokacija : drowned world
-
Re: Tablice
od Mr.Joker Pon Feb 07, 2011 4:45 am
Ovako izgleda složena tabela:
[You must be registered and logged in to see this image.]
Ali prvo evo vama koda da bi ste me shvatili:
[You must be registered and logged in to see this image.]
Ali prvo evo vama koda da bi ste me shvatili:
- Kod:
<html>
<body>
<table border="1" width="350px" cellspacing="0" cellpadding="3">
<tr><td rowspan="9" bgcolor="lightgreen">Ludak</td><td colspan="5" align="center" bgcolor="red">Najteza tabela za vas</td><td rowspan="9" bgcolor="lightgreen">OMG TEBRA</td></tr>
<tr><td rowspan="4" align="center" bgcolor="teal">Kolona1</td></tr>
<tr><td bgcolor="lightyellow">Kolona2</td><td rowspan="3" align="center" bgcolor="lightblue">Jos jedna kolona bzvz</td><td bgcolor="lightyellow">Kolona5</td><td rowspan="3" bgcolor="teal">LOL</td></tr>
<tr><td bgcolor="lightyellow">Kolona3</td><td bgcolor="lightyellow">Kolona6</td></tr>
<tr><td bgcolor="lightyellow">Kolona4</td><td bgcolor="lightyellow">Kolona7</td></tr>
<tr><td align="center" colspan="5" bgcolor="red">LUDILO BESA</td></tr>
<tr bgcolor="lightblue"><td>Mleko</td><td>Jaja</td><td align="center">SIR</td><td colspan="2">Pogaca</td></tr>
<tr bgcolor="lightyellow"><td colspan="3" align="center">Ludaci</td><td colspan="2">Manijaci</td></tr>
<tr><td colspan="5" align="center"><a href="[You must be registered and logged in to see this link.]
</table>
</body>
</html>
Mr.Joker- Administrator
- Broj poruka : 1709 D4U Novac : 1871 Reputacija : 31 Godina : 31 Lokacija : Svet Foruma
Poso/dokolice : Programiranje
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu