created by http://livecoding.io

options.json

{
    "libraries": [],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
h3{
  margin-top:200px;
  margin-left:150px;
}
th{
  border:1px solid #000;
  background-color:#aaa;
}
td{
  border:1px solid #777;
}
img{
  width:250px;
}

water.html

<h3>result</h3>

water.js

var data = {
  contacts:[
    {person:'Gordon Child',contact:'[email protected]'},
    {person:'Bear With Boombox',contact:'<img src="http://gordonchild.com/bear.jpg"></img>'},
    {person:'Wapa Location',contact:'<img src="http://maps.googleapis.com/maps/api/staticmap?center=Western+Area+Power+Authority&zoom=16&size=300x300&maptype=roadmap&sensor=false"></img>'}
  ]
};

var head = $('h3');
head.html('Data goes here...');

var table = $('<table></table>');
var header = $('<tr><th>Person</th><th>Contact</th></tr>');
table.append(header);
$.each(data.contacts,function(v,i){
  table.append(
    $('<tr></tr>').append(
      $('<td></td>').html(i.person)
    ).append(
      $('<td></td>').html(i.contact)
    )
  );
});
head.append(table);


  /* javascript goes here */

water.json

{}