Wygenerowanie 'mapy' z divów Opcje

[strom]

Cześć, zacznę od konkretów, zrobiłem sobie taką funkcje:

[PHP] pobierz, plaintext 
	function mapa() {
		$kwadrat = "<div id='mapa'>";
		for($i=1;$i<=20;$i++)
		{
			$x=$i*20;
			$kwadrat .= "<div id='kwadrat' style='left:$x;'></div>";
		}
		for($i=1;$i<=20;$i++)
		{
			$y=$i*20;
			$kwadrat .= "<div id='kwadrat' style='top:$y;'></div>";
		}
		$kwadrat .= "</div>";
		return $kwadrat;
	}
[PHP] pobierz, plaintext 

css:

[CSS] pobierz, plaintext 
	#kwadrat {
		width: 20px;
		height: 20px;
		background: #000;
		position: absolute;
		margin: 1px;
	}
 
	#mapa {
		width: 400px;
		height: 400px;
		background: #fff;
		position: relative; 
	}
[CSS] pobierz, plaintext 

zależy mi na wygenerowaniu czegoś w rodzaju mapy, która składać się będzie z osobnych kwadratów, mimo tego, iż na php się w miarę dobrze znam, o tyle wykonanie czegoś takiego jest dosyć ciężką sprawą dla mnie, prawdę mówiąc kompletnie nie wiedziałem jak się za to zabrać, czego powinienem się nauczyć, o czym poczytać i stąd problem. Na pierwszym obrazku określiłem jak chcę, by owa mapa była wyświetlana, z kolei na drugim przedstawiłem jak jest wyświetlana http://i.imgur.com/f9dr7Rm.png czekam na sugestie.

Powód edycji: [Kshyhoo]: bb-code

[maly_swd]

W dokumencie może być tylko jedno ID o danej nazwie. Czyli nie może być wszedzie ID=kwadrat. Id zmień na klasy.