<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prototype 2</title>
<meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
<style type="text/css" media="screen">

table {
	display: table;
	border-width: 2px 2px 1px 1px;
	border-style: solid;
	border-color: black;
	border-collapse: collapse;
	width: 300px;
}

caption {
	display: table-caption;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
}

tr {
	display: table-row;
}

th, td {
	display: table-cell;
	padding: 0.3em;
	border: 1px solid #000;
}

th {
	font-weight: bold;
	text-align: center;
	background: #e0e0e0;
}

td {
	text-align: center;
}

</style>
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript">
<![CDATA[

var Data = Class.create();

Data.prototype = {
	initialize: function (artist, album, date) {
		this.artist = artist;
		this.album = album;
		this.date = date;
	},
	
	getArtist: function () {return this.artist;},
	getAlbum: function () {return this.album;},
	getADate: function () {return this.date;}
};

var data = new Data (
	"Nirvana",
	"Nevermind",
	"1991"
);

window.onload = function () {

	var body = document.getElementsByTagName("body")[0];
	var table = document.createElement("table");
	body.appendChild(table);
	var caption = document.createElement("caption");
	var captiontext = document.createTextNode("My favourite album");
	caption.appendChild(captiontext);
	table.appendChild(caption);
	var tr = document.createElement("tr");
	table.appendChild(tr);
	var th1 = document.createElement("th");
	var th1text = document.createTextNode("Artist");
	th1.appendChild(th1text);
	tr.appendChild(th1);
	var th2 = document.createElement("th");
	var th2text = document.createTextNode("Album");
	th2.appendChild(th2text);
	tr.appendChild(th2);
	var th3 = document.createElement("th");
	var th3text = document.createTextNode("Date");
	th3.appendChild(th3text);
	tr.appendChild(th3);
	var tr2 = document.createElement("tr");
	table.appendChild(tr2);
	var td1 = document.createElement("td");
	var td1text = document.createTextNode(data.getArtist());
	td1.appendChild(td1text);
	tr2.appendChild(td1);
	var td2 = document.createElement("td");
	var td2text = document.createTextNode(data.getAlbum());
	td2.appendChild(td2text);
	tr2.appendChild(td2);
	var td3 = document.createElement("td");
	var td3text = document.createTextNode(data.getADate());
	td3.appendChild(td3text);
	tr2.appendChild(td3);
	
	
	
};


]]>

</script>

</head>

<body>
<p>You should see a table with a caption, two rows and six cells.</p>


</body>
</html>

