Website Freedom

Embedding Google Docs Spreadsheet in HTML

Google Docs Speadsheets can be a very easy way of adding formatted tabular data to a web page. The downside is that the viewers need Google accounts to access the data but in the context of collaborative work amongst group members this can be useful.

1. In Google Docs https://docs.google.com/ create your spreadsheet
   
2. Click on the Share button
   
3. Copy the link on to the clipboard using Control+C
   
4. In your HTML you can now add an IFRAME in your web page and embed the Google Doc Spreadsheet within it. Your IFRAME tag will look a bit like this...
   <iframe width='280' height='120' frameborder='0' scrolling=no
   src='https://spreadsheets.google.com/ccc?key=0ApCQCUV6aOrVdDdLejkxTm9GcGM0R1h1Q0tyRktUVVE&hl=en_GB&single=true&gid=0&range=A1%3AE4&output=html'>
   </iframe>
5. The red part is what you can now paste in from the clipboard using Control+V. The blue part is what you need to add. Note the range parameter which defines how much of the table will be visible with its X and Y cell co-ordinates (I have made these red)... range=A1%3AE4
   
6. The result on the page looks like this...
   

   
   

   Of course by changing the height and scrolling parameters of the IFRAME and the cell co-ordinates you can have a frame to the size you need.