Stylesheets werden in Funktion nicht interpretiert

[Tucklemuck]

Hallo zusammen,

ich beschäftige mich neuerdings mit JavaScript und habe folgendes Problem:

Wenn ich eine Tabelle mit einem einfachen JavaScript erstellen lasse, werden die entsprechenden StyleSheets angewendet.

Wenn ich aber die selbe Tabelle mit Hilfe einer Funktion erstelle, werden die StyleSheets nicht angewendet.

Habt Ihr eine Idee, weshalb das so ist?

Ich poste mal den Code:

Zunächst der CSS-Bereich (befindet sich im HEAD:

  
<style type="text/css">  
table { border-collapse: collapse; }  
td { text-align: center; width: 20px; border: 1px solid;}  
td.kopf { background: #000000; color: #ffffff; font-weight: bold; }  
</style>  

Hier der Codee, der funktioniert:

  
<script type="text/javascript">  
	document.write("<table>");  
	document.write("<tr><td class='kopf'>&nbsp;</td>");  
	for (i=1; i<=10; i++) {  
		document.write("<td class='kopf'>" + i + "</td>");  
	}  
	for (i=1; i<=10; i++) {  
		document.write("<tr><td class='kopf'>" + i + "</td>");  
		for (j=1; j<=10; j++) {  
			document.write("<td>" + i*j + "</td>");  
		}  
		document.write("</tr>");  
	}  
	document.write("</table>");  
</script>  

Und Hier der Codee, der NICHT funktioniert: Ich rufe die Funktion mit einem onload im BODY auf...

  
<script type="text/javascript">  
function tabelle() {  
	document.write("<table>");  
	document.write("<tr><td class='kopf'>&nbsp;</td>");  
	for (i=1; i<=10; i++) {  
		document.write("<td class='kopf'>" + i + "</td>");  
	}  
	for (i=1; i<=10; i++) {  
		document.write("<tr><td class='kopf'>" + i + "</td>");  
		for (j=1; j<=10; j++) {  
			document.write("<td>" + i*j + "</td>");  
		}  
		document.write("</tr>");  
	}  
	document.write("</table>");  
}	  
</script>  

Im ersten Beispiel wird die Tabelle schön formatiert, im zweiten wird sie nicht formatiert...

Weiß jemand, was ich falsch gemacht habe?

Viele Grüße
Tucklemuck