Tricks to Show Excel Tables on Web Pages

You can easily display Excel tables on web pages without using plugins. By following the method shown in this guide, 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.

Here we will show you a secret, namely how to insert an Excel table into a web page using 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..

Steps to Display Excel Tables on Web Pages

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> di HTML secara umum.
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 display 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&amp;headers=false" width="100%" height="260"></iframe>

Results

What do you think? The results are as you can see on this page. 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.