• Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

Embedding Google Docs Spreadsheet in HTML

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
    Google Docs Spreadsheet showing a simple table
  2. Click on the Share button
    Share button in Google Docs
  3. Copy the link on to the clipboard using Control+C
    Google Docs link
  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...
    Embedded Google Docs Spreadsheet in HTML webpage


    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.




December 21, 2014      You are here:

EU Cookie law: Like most websites, ours uses cookies to improve your experience of our site. To find out more, please see our privacy policy. continue