Tutorijali.Net

Tutorijali

	Oglasi

Anketa

HTML TUTORIJALI

Tablice

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.

 <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.

Evo primjera:

 <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.

Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan. Evo primjera:

<table border="1">

<tr>

  <td colspan="2">Jedan redak  </td>

</tr>

<tr>

  <td>Prvi stupac </td>

  <td>Drugi stupac </td>

</tr>

</table>

Cellspacing
Koristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:

<table border="1" cellspacing="6">

<tr>

  <td colspan="2">Jedan redak  </td>

</tr>

<tr>

  <td>Prvi stupac </td>

  <td>Drugi stupac </td>

</tr>

</table>

Cellpadding
Cellpadding koristite kada želite odvojiti tekst od rubova tablice. Pogledajmo primjer:

<table border="1" cellpadding="15">

<tr>

  <td colspan="2">Jedan redak  </td>

</tr>

<tr>

  <td>Prvi stupac </td>

  <td>Drugi stupac </td>

</tr>

</table>

Sljedeći tutorijal: Boja pozadine

_________________________

Autor ovog tutorijala: Gogy