Google Visualization Tables
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["table"]}); google.setOnLoadCallback(drawTable); function drawTable() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Team'); data.addColumn('number', 'Played'); data.addColumn('number', 'Points'); data.addColumn('boolean', 'Highland'); data.addRows(10); data.setCell(0, 0, 'Dundee'); data.setCell(0, 1, 23); data.setCell(0, 2, 44); data.setCell(0, 3, false); data.setCell(1, 0, 'Ross County'); data.setCell(1, 1, 22); data.setCell(1, 2, 39); data.setCell(1, 3, true); data.setCell(2, 0, 'Inverness Caledonian Thistle'); data.setCell(2, 1, 22); data.setCell(2, 2, 37); data.setCell(2, 3, true); data.setCell(3, 0, 'Partick Thistle'); data.setCell(3, 1, 23); data.setCell(3, 2, 35); data.setCell(3, 3, false); data.setCell(4, 0, 'Queen of the South'); data.setCell(4, 1, 20); data.setCell(4, 2, 33); data.setCell(4, 3, false); data.setCell(5, 0, 'Dunfermline'); data.setCell(5, 1, 21); data.setCell(5, 2, 30); data.setCell(5, 3, false); data.setCell(6, 0, 'Raith'); data.setCell(6, 1, 20); data.setCell(6, 2, 26); data.setCell(6, 3, false); data.setCell(7, 0, 'Morton'); data.setCell(7, 1, 21); data.setCell(7, 2, 21); data.setCell(7, 3, false); data.setCell(8, 0, 'Ayr'); data.setCell(8, 1, 18); data.setCell(8, 2, 12); data.setCell(8, 3, false); data.setCell(9, 0, 'Airdrie United'); data.setCell(9, 1, 21); data.setCell(9, 2, 11); data.setCell(9, 3, false); // Create and draw the visualization. var table = new google.visualization.Table(document.getElementById('mytable_div')); table.draw(data, {allowHtml: true, showRowNumber: false, alternatingRowStyle: true}); } </script> </head> <body> <div id="mytable_div"></div> </body> </html>