Učimo vas kako izraditi web stranicu i programirati
Početna » HTML » HTML Tablice
 

HTML Tablice

Primjeri Tablica

   Ovdje možete vidjeti primjere za izradu HTML tablica. Primjeri su jako dobro napravljeni tako da ćete uz njih vrlo brzo savladati ovu lekciju.

OSNOVNO

Osnovna 3X2 tablica

A B C
D E F 

<TABLE BORDER>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

Dva primjera za ROWSPAN

stavka1 stavka2 stavka3
stavka4 stavka5 

<TABLE BORDER>
	<TR>
		<TD>stavka1</TD>
		<TD ROWSPAN=2>stavka2</TD>
		<TD>stavka3</TD>
	</TR>
	<TR>
		<TD>stavka4</TD> <TD>stavka5</TD>
	</TR>
</TABLE>

stavka1 stavka2 stavka3 stavka4
stavka5 stavka6 stavka7 

<TABLE BORDER>
	<TR>
		<TD ROWSPAN=2>stavka1</TD>
	    	<TD>stavka2</TD> <TD>stavka3</TD> <TD>stavka4</TD>
	</TR>
	<TR>
		<TD>stavka5</TD> <TD>stavka6</TD> <TD>stavka7</TD>
	</TR>
</TABLE>

Primjer za COLSPAN

stavka1 stavka2
stavka3 stavka4 stavka5 

<TABLE BORDER>
	<TR>
		<TD>stavka1</TD>
		<TD COLSPAN=2>stavka2</TD>
	</TR>
	<TR>
		<TD>stavka3</TD> <TD>stavka4</TD> <TD>stavka5</TD>
	</TR>
</TABLE>

Primjer za NASLOV (engl. HEADER) (<th> tag)

Naslov1 Naslov2 Naslov3
A B C
D E F 

<TABLE BORDER>
	<TR>
		<TH>Naslov1</TH> <TH>Naslov2</TH> <TH>Naslov3</TH>
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

Primjer za COLSPAN i HEADER tag

Naslov1 Naslov2
A B C D
E F G H 

<TABLE BORDER>
	<TR>
		<TH COLSPAN=2>Naslov1</TH>
	    	<TH COLSPAN=2>Naslov2</TH>
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>
	<TR>	
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>
</TABLE>

Primjer za više naslova sa COLSPAN

Naslov1 Naslov2
Naslov3 Naslov4 Naslov5 Naslov6
A B C D
E F G H 

<TABLE BORDER>
	<TR>
		<TH COLSPAN=2>Naslov1</TH>
		<TH COLSPAN=2>Naslov2</TH>
	</TR>
	<TR>
		  <TH>Naslov3</TH> <TH>Naslov4</TH> 
		  <TH>Naslov5</TH> <TH>Naslov6</TH> 
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>
	<TR>
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>
</TABLE>

Primjer za NASLOV SA STRANE (engl. SIDE HEADER )

Naslov1 stavka1 stavka2 stavka3
Naslov2 stavka4 stavka5 stavka6
Naslov3 stavka7 stavka8 stavka9 

<TABLE BORDER>
	<TR><TH>Naslov1</TH>
		<TD>stavka1</TD> <TD>stavka2</TD> <TD>stavka3</TD></TR>
	<TR><TH>Naslov2</TH>
		<TD>stavka4</TD> <TD>stavka5</TD> <TD>stavka6</TD></TR>
	<TR><TH>Naslov3</TH>
		<TD>stavka7</TD> <TD>stavka8</TD> <TD>stavka9</TD></TR>
</TABLE>

Primjer za SIDE HEADERS, ROWSPAN

Naslov1 stavka1 stavka2 stavka3 stavka4
stavka5 stavka6 stavka7 stavka8
Naslov2 stavka9 stavka10 stavka3 stavka11 

<TABLE BORDER>
	<TR><TH ROWSPAN=2>Naslov1</TH>
	    <TD>stavka1</TD> <TD>stavka2</TD> <TD>stavka3</TD> <TD>stavka4</TD>
	</TR>
	<TR><TD>stavka5</TD> <TD>stavka6</TD> <TD>stavka7</TD> <TD>stavka8</TD>
	</TR>
	<TR><TH>Naslov2</TH>
	    <TD>stavka9</TD> <TD>stavka10</TD> <TD>stavka3</TD> <TD>stavka11</TD>
	</TR>
</TABLE>

Primjer tablice koja koristi sve dosad navedeno
prosječno

visina težina
spol muški 1.9 0.003
ženski 1.7 0.002 

<TABLE BORDER>
	<TR>	<TD><TH ROWSPAN=2></TH>
		<TH COLSPAN=2>prosječno</TH></TD>
	</TR>
	<TR>	<TD><TH>visina</TH><TH>širina</TH></TD>
	</TR>
	<TR>	<TH ROWSPAN=2>spol</TH>
	    	<TH>muški</TH><TD>1.9</TD><TD>70</TD>
	</TR>
	<TR>	<TH>ženski</TH><TD>1.7</TD><TD>55</TD>
	</TR>
</TABLE>

Pametna upotreba ROWSPAN/COLSPAN

A 1 2
3 4
C D 

<TABLE BORDER>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
		<TD>1</TD>
		<TD>2</TD>
	</TR>
	<TR>
		<TD>3</TD>
		<TD>4</TD>
	</TR>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
	</TR>
	<TR>
	</TR>
</TABLE>


MARGINA I OKVIR TABLICE (MARGIN and BORDER)

Tablica bez okvira

stavka1 stavka2 stavka3
stavka4 stavka5 

<TABLE>
	<TR>	<TD>stavka1</TD> <TD ROWSPAN=2>stavka2</TD> <TD>stavka3</TD> 
	</TR>
	<TR>	<TD>stavka4</TD> <TD>stavka5</TD> 
	</TR>
</TABLE>

Tablica s okvirom od 10 pixela

stavka 1 stavka 2
stavka 3 stavka 4 

<TABLE BORDER=10>
	<TR>	<TD>stavka1</TD> <TD> stavka2</TD>
	</TR>
	<TR>	<TD>stavka3</TD> <TD>stavka4</TD> 
	</TR>
</TABLE>

CELLPADDING i CELLSPACING atributi

A B C
D E F 

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

A B C
D E F 

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

A B C
D E F 

<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

A B C
D E F 

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

ALIGNMENT, CAPTIONS i SUBTABLES

Primjer za više linija u polju tablice

Siječanj Veljača Ožujak
Ovo je polje 1 polje 2 Neko drugo polje
polje 3
polje 4 Pa je ovo
polje 5		 polje 6 

<TABLE BORDER>
	<TR>
		<TH>Siječanj</TH>
		<TH>Veljača</TH>
		<TH>Ožujak</TH>
	</TR>
	<TR>
		<TD>Ovo je polje 1</TD>
	    	<TD>polje 2</TD>
	    	<TD>Neko drugo polje<br> polje 3</TD>
	</TR>
	<TR>
		<TD>polje 4</TD>
	    	<TD>Pa je ovo<br> polje 5</TD>
	 <TD>polje 6</TD>
	</TR>
</TABLE>


ALIGN=LEFT|RIGHT|CENTER

može se primjeniti na jedno polje ili na cijeli RED (ROW)
Siječanj Veljača Ožujak
sve je centrirano polje 2 Neko drugo polje
polje 3
poravnato udesno centrirano predefinirano
poravnanje je ulijevo		 

<TABLE BORDER>
	<TR>
	    <TH>Siječanj</TH>
	    <TH>Veljača</TH>
	    <TH>Ožujak</TH>
	</TR>
	<TR ALIGN=center>
	    <TD>sve je centrirano</TD>
	    <TD>polje 2</TD>
	    <TD>Neko drugo polje<br> polje 3</TD>
	</TR>
	<TR>
	    <TD ALIGN=right>poravnanato udesno</TD>
	    <TD ALIGN=center>centrirano</TD>
	    <TD>predefinirano<br>poravnanje je ulijevo</TD>
	</TR>
</TABLE>

VALIGN=TOP|BOTTOM|MIDDLE

može se primjeniti na pojedino polje ili cijeli RED (ROW)
Siječanj Veljača Ožujak
sve poravnato na vrh a ovo je
polje br. 2		 polje 3
poravnato na vrh poravnato na dno predefinirano poravnanje je
centar		 

<TABLE BORDER>
	<TR>
		<TH>Siječanj</TH>
		<TH>Veljača</TH>
		<TH>Ožujak</TH>
	</TR>
	<TR VALIGN=top>
	    <TD>sve poravnato na vrh</TD>
	    <TD>a ovo je<br>polje br. 2</TD>
	    <TD>polje 3</TD>
	</TR>
	<TR>
	    <TD VALIGN=top>poravnato na vrh</TD>
	    <TD VALIGN=bottom>poravnato na dno</TD>
	    <TD>predefinirano poravnanje	    je <br> centar</TD>
	</TR>
</TABLE>

CAPTION=TOP|BOTTOM

Ovo je top CAPTION
Siječanj Veljača Ožujak
Ovo je polje 1 polje 2 Neko drugo polje,
polje 3		 

<TABLE BORDER>
<CAPTION ALIGN= top>Ovoje top CAPTION</CAPTION>
	<TR>
		<TH>Siječanj</TH>
		<TH>Veljača</TH>
		<TH>Ožujak</TH>
	</TR>
	<TR>
		<TD>Ovo je polje 1</TD>
		<TD>polje 2</TD>
		<TD>Neko drugo polje,<br> polje 3</TD>
	</TR>
</TABLE>

Ovo je bottom CAPTION
Siječanj Veljača Ožujak
Ovo je polje 1 polje 2 Neko drugo polje,
polje 3		 

<TABLE BORDER>
<CAPTION ALIGN= bottom>Ovoje bottom CAPTION</CAPTION>
	<TR>
		<TH>Siječanj</TH>
		<TH>Veljača</TH>
		<TH>Ožujak</TH>
	</TR>
	<TR>
		<TD>Ovo je polje 1</TD>
		<TD>polje 2</TD>
		<TD>Neko drugo polje,<br> polje 3</TD>
	</TR>
</TABLE>


Ugnježđene tablice: Tablica ABCD je unutar tablice 123456

1 2 3
A B
C D
4 5 6 

<TABLE BORDER>
	<TR> <!-- ROW 1, TABLE 1 -->
		<TD>1</TD>
		<TD>2</TD>
		<TD>3
		<TABLE BORDER>
			<TR> <!-- ROW 1, TABLE 2 -->
				<TD>A</TD>
				<TD>B</TD>
			</TR>
			<TR> <!-- ROW 2, TABLE 2 -->
				<TD>C</TD>
				<TD>D</TD>
			</TR>
		</TABLE>
		</TD>
	</TR>
	<TR> <!-- ROW 2, TABLE 1 -->
		<TD>4</TD>
		<TD>5</TD>
		<TD>6</TD>
	</TR>
</TABLE>

ŠIRINA TABLICE (table width)

Osnovna 50% širina

Width=50% Width=50%
3 4 

<TABLE BORDER WIDTH="50%">
	<TR><TD>Width=50%</TD><TD>Width=50%</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

Širina riječi unutar polja utiče na širinu polja 2
3 4 

<TABLE BORDER WIDTH="50%">
	<TR><TD>Širina riječi unutar polja utiče na širinu polja</TD><TD>2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

WIDTH=100% Ovo je stavka 2
3 4 

<TABLE BORDER WIDTH="100%">
	<TR><TD>WIDTH=100%</TD><TD>Ovo je stavka 2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

Centriranje tablice na web stranici

A B C
D E F 
<CENTER>
<TABLE BORDER WIDTH="50%">
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>
</CENTER>

Širina tablice i ugnježđene tablice

stavka 1 stavka 2
stavka A stavka B
stavka 4 

<TABLE BORDER WIDTH="50%">
	<TR><TD>stavka 1</TD><TD>stavka 2</TD>
	</TR>
	<TR><TD>
	    <TABLE BORDER WIDTH=100%>
		<TR><TD>stavka A</TD><TD>stavka B</TD>
		</TR>
	    </TABLE>
	    </TD>
	    <TD>stavka 4</TD>
	</TR>
</TABLE>

HEIGHT=15%- visina tablice

HEIGHT=15% stavka2
3 4 

<TABLE BORDER WIDTH="50%" HEIGHT="15%">
	<TR><TD>HEIGHT=15%</TD> <TD>stavka2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

NOWRAP atribut

NOWRAP može se primjeniti na cijelu tablicu na cijeli red ili samo na polje.
Ovo je prva rečenica Ovo je druga rečenica i biti će cijela u istom redu 

<table border="1" width=100>
   <tr>
	  <td>Ovo je prva rečenica</td>
	  <td nowrap>Ovo je druga rečenica i biti će cijela u istom redu</td>
   </tr>
</table>

BOJE

Pozadinska boja (background)

Može se primjeniti na cijelu tablicu, header, cijeli red ili smo na polje.

Naslov je u AQUA boji
Text je u LIME boji ovo je u GREEN boji jer je red u toj boji 

<table width="70%" border="0" bgcolor="Yellow" cellspacing=5>
  <tr bgcolor="Blue">
	<th bgcolor="Aqua">Naslov je u AQUA boji</th>
  </tr>
  <tr bgcolor="Green">
  	<td bgcolor="Lime">Text je u LIME boji</td>
	<td>ovo je u GREEN boji jer je red u toj boji</td>
  </tr> 
</table>

Boja okvira

Može se primjeniti na cijelu tablicu, header, cijeli red ili smo na polje.

okvir ima BLUE boju okvir ima GREEN boju 

<table width="50%" border="5" bordercolor="Red">
  <tr bordercolor="Blue" >
	<td>okvir ima BLUE boju</td>
	<td bordercolor="Green">okvir ima GREEN boju</td>
  </tr>
</table>

Bordercolorlight i bordercolordark

S ova dva atributa određujemo boju gornje,lijeve te donje,desne ivice. Može se primjeniti na cijelu tablicu, header, cijeli red ili smo na polje.

Tu je bordercolorlight="Lime" bordercolordark="Red" Tu je bordercolorlight="Yellow" bordercolordark="Maroon" 

<table width="60%" border="5" bordercolorlight="aqua" bordercolordark="blue">
  <tr bordercolorlight="lime" bordercolordark="red">
    <td>Tu je bordercolorlight="Lime" bordercolordark="Red"</td>
	<td bordercolorlight="yellow" bordercolordark="maroon">
	  Tu je bordercolorlight="Yellow" bordercolordark="Maroon"
	</td>
  </tr>
</table>
| Uvjeti Korištenja | Zaštita Privatnosti | Kontakt |