Tutor.blog

Tutor.Blog je online priručnik na hrvatskom jeziku, za lakše snalaženje u HTML i CSS kodu. Ovdje možete naučiti kako učiniti svoj blog vizualno privlačnim, ali i osnove dizajniranja web stranica koje ne moraju biti nužno vezane uz blog.

Ovaj blog nije povezan sa uredništvom Blog.hr-a, te ne pruža podršku za tehničke probleme.

Besplatni predlošci za blog

Tablice

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 :)

body {
text-align: center;
font-family: "tahoma", verdana;
font-size: 11px;
margin: 0px;
}
table {
border: #666666 1px dotted;
}
th {
color: #DDDDDD;
background-color: #666666;
font-size: 11px;
font-weight: normal;
padding: 4px;
border: 0px;
}
td {
color: #666666;
background-color: #DDDDDD;
font-size: 11px;
font-weight: normal;
padding: 4px;
border: 0px;
}

Primjer koji sam napravila u ovom tutorialu izgleda ovako:


26.03.2005. @ 14:25

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Još niste uspjeli naći baš ono što vam treba? Pretražite cijeli Tutor.Blog:

Google

Informacije, razno

Tekstovi, slike i izvorni kod: nelchee


Nela Dunato art & Design
Moj design portfolio


In obscuro
Besplatni predlošci za web stranice


Cwtam - sketchblog
moj sketchblog




Prati me na Twitteru


Ako želite na svoj blog dodati link do Tutor.blog-a, kopirajte kod iz textbox-a (Desni klik --> Select All --> Copy) na mjesto gdje želite da se link pojavi. Hvala! :D


Tutor.Blog


HTML i CSS tutoriali


HTML i CSS tutoriali

Sadržaj ovog bloga je autorski rad. © 2005-2007 Nela Dunato
Login
Google

Blog.hr koristi kolačiće za pružanje boljeg korisničkog iskustva. Postavke kolačića mogu se kontrolirati i konfigurirati u vašem web pregledniku. Više o kolačićima možete pročitati ovdje. Nastavkom pregleda web stranice Blog.hr slažete se s korištenjem kolačića. Za nastavak pregleda i korištenja web stranice Blog.hr kliknite na gumb "Slažem se".Slažem se