HTML Old School

Many table examples

   Here you can see many HTML table examples.

BASIC

Basic 3X2 table

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>

Two examples with 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>

Example with 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>

Table header example (<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>

COLSPAN and 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>

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

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>

SIDE HEADERS with 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>

Complex table example

    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>

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>



MARGIN and BORDER

Table without border

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>

Border with 10 pixels

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 and CELLSPACING atributes

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 and SUBTABLES

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

can be used for table cell <td> or the whole row <tr>

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

can be used for table cell <td> or the whole row <tr>

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

This is top CAPTION
Siječanj Veljača Ožujak
Ovo je polje 1 polje 2 Neko drugo polje,
polje 3		 
<TABLE BORDER>
<CAPTION ALIGN= top>This is 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>


Nested table: Table ABCD is nested inside table 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>

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>

Center table on the web page

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>

Table width and nested table

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% - table height

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 can be applied to the table, row or td tag.

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>

COLORS

Pozadinska boja (background)

Can be applied to table, row or td tag.

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>

 

Border color

Can be applied to table, row or td tag.

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

This attributes defines up,right and down,left border colors.

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>