You can easily display Excel tables on web pages without using plugins. With this secret trick, You can design tables according to your needs and install them on web pages without paid plugins or for free. You can even add formulas to process your data.
You may have inserted a table in a web page to display certain data, if you create a table using the normal method (table block in WordPress or text editor in Joomla) You may find it difficult to set up the table view. You may have to use a plugin to create a table that suits your needs.
This article will show you a secret on how to insert excel tables in web pages, The secret is to use Google Spreadsheet. With this way, You can do anything in the table as you normally do in the Application Excel.
Curious? Take a look at the example table at the bottom of this article, Even some columns in this table use formulas! Let's learn how..
List of contents:
Steps to Display Excel Tables on Web Pages
The following steps will guide you to display an Excel table on a web page without using a plugin:
Total Time: 10 minutes
Step 1: Prepare an Excel Table
Create a table in Excel, table design according to your needs. You can study examples Practice Creating Tables in Excel for Beginners
Step 2: Upload Excel documents to Google Drive
Upload your Excel document to Google Drive web, You must have a Google account to do this. The example used here is the Salary-Employee.xlsx file
Step 3: Open the Excel file with Google Sheets
On the Google Drive web page, Right click the Excel file then select Open with Then select Google Spreadsheet. The Google Sheets page will open in a new tab.
Step 4: Publish to the Web
Once the file opens in Google Sheets, click the File menu and select Share Then select Publish to the web
Step 5: Embed Files
In the dialog box Publish to the web, Select a tab Pin it then click the button Publish. Warning message Confirmation will appear at the top of the browser tab, click OK to confirm.
Step 6: Copy Embed Code
Once you confirm the warning message, The embed code will appear. Copy the embed code and then paste it on your web page.
Step 7: Paste Excel File Embed Code on Web Page
Paste the embed code you copied into the web page. If you use WordPress, on a page or article, select a block HTML Khusus then paste the code. This step is the same as when you pin <iframe></iframe> in HTML in general.
If you use Joomla, in the text editor, look for the button Insert Code or Edit HTML Source then paste the code.
Tips: To set the frame size, You can add properties width=”100%” height=”260″ in an iframe like the example below, set as needed.
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSxBqqX30A2cNbsoDzzjDX9jp9lLIyxlEkBvjkmQ7MS4jOopodO35h5IRKnQG1mlw/pubhtml?widget=true&headers=false" width="100%" height="260"></iframe>Results
The table above is a table created using Excel and displayed using Google Spreadsheet. What do you think?
To make changes to the table, You can do this in Google Drive. You can even insert more complicated tables, as complex as you can make it in Excel!
Hope it is useful.
