A number of programmers struggle to embed tables from google spreadsheet into an HTML page of a website. The worst problem that we face while doing so are the default borders and tabs displayed along with the table. Sometimes these tabs and borders can totally change the look and we don't get what we need to display on a webpage. Such embedded tables clearly tell the visitor that the table is embedded from some other page. To get rid of this problem, we have brought a good piece of code that you may use to display only what you desire to display.
In our last post we displayed a table showing live gold price in India. Lets take a simple look of that table.
Use the following code:
In the above piece of code, some of you might have noticed range=A1:C9 which is used to display only a certain cells, not the entire sheet. So using the range field you may display only a certain cells.
But still we can't see the full table that we desire to see, so we need to set height and width of iframe along with no border. Here is the example.
Use the following code:
It looks better than previous result, but still there are some borders and tabs, which should be removed. To get this done you need to set widget and headers fields to false. Apart from that you also need to add chrome=false for complete removal of tabs. Now you may set width and height of iframe as per your requirement.
The final piece of code will look like:
to get this result:
Now which one of these tables look more as a part of this web page. Obviously the last one! Using such code you may also display only a single cell from the sheet with proper height and width. What do you think about this piece of code ? Please mention in comments.
In our last post we displayed a table showing live gold price in India. Lets take a simple look of that table.
Use the following code:
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vReDO_LwOqE8BVJn2y_toyKCk9GNNH1odILyX20-k2BOaRUhzDskJf0f-DXK3O64Q4Z4IUSuaWkkyhz/pubhtml?gid=0&single=true&widget=true&headers=true&range=A1:C9"></iframe>to get this result:
In the above piece of code, some of you might have noticed range=A1:C9 which is used to display only a certain cells, not the entire sheet. So using the range field you may display only a certain cells.
But still we can't see the full table that we desire to see, so we need to set height and width of iframe along with no border. Here is the example.
Use the following code:
<iframe width=450 height=280 frameborder=0 src="https://docs.google.com/spreadsheets/d/e/2PACX-1vReDO_LwOqE8BVJn2y_toyKCk9GNNH1odILyX20-k2BOaRUhzDskJf0f-DXK3O64Q4Z4IUSuaWkkyhz/pubhtml?gid=0&single=true&widget=true&headers=true&range=A1:C9"></iframe>
to get this result:
It looks better than previous result, but still there are some borders and tabs, which should be removed. To get this done you need to set widget and headers fields to false. Apart from that you also need to add chrome=false for complete removal of tabs. Now you may set width and height of iframe as per your requirement.
The final piece of code will look like:
<iframe width=400 height=210 frameborder=0 src="https://docs.google.com/spreadsheets/d/e/2PACX-1vReDO_LwOqE8BVJn2y_toyKCk9GNNH1odILyX20-k2BOaRUhzDskJf0f-DXK3O64Q4Z4IUSuaWkkyhz/pubhtml?gid=0&single=true&widget=false&headers=false&range=A1:C9&chrome=false"></iframe>
to get this result:
No comments:
Post a Comment