Znate čemu tablice inače služe? Super. Pa ovo je tutorial kako ih sastaviti.
Inače, ne preporuča se da se tablice koriste u izradi layouta, ali ako ste početnik neće vam nitko zamjeriti :)
Svaka tablica ima redove i stupce. Naša HTML tablica ima sukladno tome, nekoliko elemenata, zato je malo kompleksnija za kodiranje ako koristite više redova i stupaca, posebno ako se neki od njih rastežu preko nekoliko redova/stupaca i slično.
Osnovni elementi tablice su < table > , < tr > , < th > i < td >.
Evo kako počinjemo kreirati tablicu tagom table:
<table>
<!-- ovdje će ići sadržaj tablice -->
</table>
Ovaj tag označava početak i završetak tablice. Sve što napišemo unutra bit će shvaćeno kao tablični podaci, i zato moramo paziti kako ih pišemo.
Tablica je u HTML-u podijeljena na redove. Ovako to izgleda ako nadopunimo gornji primjer tagovima tr (table row):
<table>
<tr> <!-- početak prvog retka -->
<!-- ovdje će ići sadržaj retka -->
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<!-- ovdje će ići sadržaj retka -->
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<!-- ovdje će ići sadržaj retka -->
</tr> <!-- kraj trećeg retka -->
</table>
Mislim da ovaj kod nije potrebno previše objašnjavati, očito je da sadrži tri retka.
A sada ćemo dodati ćelije na najjednostavniji mogući način tako da svaki redak ima jednak broj stupaca. Učinit ćemo to pomoću tag-a td (table data)
<table>
<tr> <!-- početak prvog retka -->
<td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
</tr> <!-- kraj trećeg retka -->
</table>
Da bi lakše razumjeli, postavila sam tablične vrijednosti da odgovaraju stupcu i retku u kojem se nalaze - stupce sam označila brojevima, a retke slovima.
E sada, to se može još bolje srediti tako da dodamo zaglavlja stupcima, pomoću tag-a th (table header). Dodati ćemo još jedan redak iznad postojećih i u njega smjestiti zaglavlja.
<table>
<tr> <!-- početak nultog retka -->
<th>stupac 1</th><th>stupac 2</th><th>stupac 3</th>
</tr> <!-- kraj nultog retka -->
<tr> <!-- početak prvog retka -->
<td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
</tr> <!-- kraj trećeg retka -->
</table>
To je ono što će većini vas biti dovoljno. No, moguće je i svakom retku dodati zaglavlje tako da dodamo u sve retke po još jednu ćeliju th:
<table>
<tr> <!-- početak nultog retka -->
<td> </td><th>stupac 1</th><th>stupac 2</th><th>stupac 3</th>
</tr> <!-- kraj nultog retka -->
<tr> <!-- početak prvog retka -->
<th>redak A</th><td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<th>redak B</th><td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<th>redak C</th><td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
</tr> <!-- kraj trećeg retka -->
</table>
Eto, naša tablica je gotova. Ima ukupno 4 retka i 4 stupca, od kojih 3 retka i 3 stupca sadrže podatke.
Sad je samo treba urediti pomoću CSS-a :) Ja sam se odlučila za ovakvo oblikovanje. Vi se naravno možete igrati sa pojedinim vrijednostima i dobiti drugačiji rezultat :)