How to Embed Excel in HTML and WordPress (Step-by-Step Guide)

Your spreadsheet data belongs on the web, not stuck in a file attachment nobody opens.

Knowing how to embed Excel in HTML gives you real options: a live OneDrive iframe, a Google Sheets publish, a clean HTML table conversion, or a JavaScript-powered display using a library like SheetJS. Each method works differently and suits different needs.

This guide covers all of them. By the end, you’ll know which xlsx file embed approach fits your situation, how to set it up, and what to watch out for on mobile and security.

What Does It Mean to Embed Excel in HTML

“Embedding Excel in HTML” means different things depending on what you actually need. The phrase gets used loosely, and that causes confusion early on.

There are two distinct scenarios here. The first is showing a live or static Excel spreadsheet file inside a web page, usually inside an iframe. The second is converting spreadsheet data into a native HTML table that lives directly in your page markup.

They’re not the same thing. One pulls in an external file. The other rewrites your data as HTML.

Static vs. Interactive Embedding

Static embed: a snapshot of your spreadsheet, no formulas, no clicking, no live data.

Interactive embed: the actual spreadsheet loads inside an iframe, users can scroll and sometimes interact with it, and the data can sync with the source file.

Which one you want shapes which method makes sense. If you need live data and interactivity, you’re looking at iframe-based solutions through OneDrive or Google Sheets. If you just need the data visible and styled, an HTML table conversion works fine and gives you far more control over the appearance.

Browser Limitations with Native Excel Files

Browsers can’t natively render .xlsx files. Drop a raw Excel file link in an <iframe src> and you’ll get a download prompt, not a rendered spreadsheet.

This is why every method for embedding Excel in a web page involves a middle layer. Whether that’s OneDrive serving the file through Microsoft’s infrastructure, a JavaScript library like SheetJS parsing the file client-side, or converting the data to HTML markup first.

The end result for your users looks the same across methods. What changes is how the data gets there and how much control you have over its appearance and behavior.

54% of businesses globally use Excel as a core tool (market study via EarthWeb), which explains why getting spreadsheet data onto web pages comes up so often. There’s a lot of Excel data out there that people want to share without forcing users to download a file.

How to Embed an Excel File in HTML and WordPress with wpDataTables

There are two distinct approaches in wpDataTables for working with Excel files. Which one you use depends on whether you need the table to stay editable inside WordPress or just display the data.

Option A: Link to an existing Excel file (read-only, auto-updates)

Option B: Import Excel data into an editable MySQL table

Both start from the same place but work very differently after that.

Option A: Create a Table Linked to an Excel File

This is the simpler setup. Go to WordPress admin and open wpDataTables > Create a Table, then click Create a table linked to an existing data source.

From there:

1. Give the table a name in the Table title field to help identify it later.
2. Select Excel file as the input data source type.
3. WordPress Media Library will be selected automatically as the file location. Click Browse to open it and upload or select your .XLS or .XLSX file.
4. Alternatively, if your file is hosted online (e.g., on Dropbox), choose the URL from any domain option instead. Note: if using a Dropbox link, make sure it ends with &dl=1 instead of &dl=0 so wpDataTables can read it as a direct download.
5. Click Save. wpDataTables reads the column structure from the file automatically.
6. After saving, you can define optional settings for each column: data type, filters, displayed name, and sorting behavior.

Important Limitations to Know

Once you create a table from an Excel file, making structural changes to the file (like adding a new column) is not recommended. The table in wpDataTables won’t handle it correctly. If you do need to make those changes, recreate the table from scratch.

Also, by default the data is read from the file on every page load. For large tables (more than 2,000-3,000 cells), this can slow things down. The caching feature introduced in wpDataTables 5.0 resolves this for large linked tables.

Option B: Import Excel Data Into an Editable Table

Use this when you want to manage and edit the data directly inside WordPress after the initial import.

wpDataTables gives you two options here: creating tables linked to an existing data source (the file is read on every page load) or importing the table data into WordPress as an editable MySQL-based table.

For the import route:

1. Go to wpDataTables > Create a Table and select the option to import data using the Table Constructor.
2. Upload the Excel file via the WordPress Media Library, or browse one that was already uploaded. After selecting it, click Choose file.
3. Click Next. wpDataTables reads the file and shows a pre-import setup screen where you can configure each column.
4. On the column setup screen, you can set: data type, filter type, display name, and whether a column should be editable.
5. Click Create the table. A dropdown will appear asking whether you want to open the table in the standard editor or the Excel-like editor.

This creates a MySQL-backed table. The data now lives in your database, and you can edit it through a popup form, inline editing, or the Excel-like spreadsheet editor.

Insert the Table Into a Post or Page

Once the table is created (either way), wpDataTables generates a shortcode like:

If you want to display it in an Excel-like spreadsheet view on the front end, add the attribute table_view=excel to the shortcode:

Paste the shortcode into any post or page. If you’re using the Gutenberg editor, you can use the wpDataTables block instead, where you can also choose the display view (standard or Excel-like) directly from the block settings.

Page Builder Options

The same table can be embedded via the Elementor, Divi, or WPBakery integrations if you’re working inside those builders, using their respective wpDataTables widgets or modules.

Embed Excel Using an iframe and OneDrive

This is the most straightforward path if you’re already in the Microsoft 365 ecosystem. No code, no conversion, no third-party tools. You upload the file, generate an embed code, paste it.

According to Microsoft’s own documentation, the process works like this: open OneDrive, navigate to your workbook, right-click and select Embed, then click Generate to get the iframe source code. That’s the whole process on the file side.

iframe Code Structure

The generated code drops into your HTML like this:

<iframe width="700" height="400" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?...&action=embedview"></iframe>

The width and height attributes control the frame size in pixels. scrolling="no" is the default but you can change it. The src URL contains parameters that control what the viewer shows, including whether gridlines appear, whether headers show, and which sheet or named range loads by default.

Key URL parameters worth knowing:

• wdHideGridlines=True – removes the grid
• wdHideHeaders=True – hides row/column labels
• wdDownloadButton=True – shows a download button to viewers
• Item=RangeName – shows only a named range

Sharing Settings and Live Sync

The embedded workbook pulls from the live OneDrive file. Update the source file, and anyone viewing the embed sees the updated data on next load. This is useful for things like pricing tables, schedules, or any data that changes regularly.

But this only works if the file sharing is set correctly. The file needs to be shared with “Everyone” or set to public viewing. A file with restricted access will show a sign-in prompt instead of the spreadsheet.

One real limitation: OneDrive embed requires an internet connection. If Microsoft’s servers are slow, your embedded spreadsheet loads slow. And if the share link ever changes or the file gets moved, the embed breaks completely.

Ajelix data from 2024 shows over 1.3 million companies in the USA alone use Microsoft Excel, which means OneDrive is already part of the workflow for many of these teams. The embed feature is genuinely underused given how easy the setup is.

OneDrive Personal vs. Business Accounts

Personal OneDrive: Right-click the file, select Embed, generate the iframe code. Clean process.

OneDrive for Business (Microsoft 365): The embed option routes through SharePoint. You may need to verify the workbook’s sharing permissions in SharePoint before the embed works for public viewers. The file must have “Everyone” in its sharing list, otherwise viewers get a login screen instead of the spreadsheet.

Embed Excel Using Google Sheets

Google Sheets has 900 million monthly active users (EarthWeb, 2024). Odds are decent that your audience already has a Google account, which makes this embed method practical for a wide range of use cases.

Google Sheets can be a great option for invoicing, data analysis, employee time tracking, timesheet apps (as an alternative to Excel timesheets), schedules, calendars, and more.

The process starts with importing your .xlsx file into Google Sheets, then publishing the sheet to the web to get an embeddable iframe.

Import and Publish Steps

Open Google Drive, upload your Excel file, then open it with Google Sheets. Once it’s open, go to File > Share > Publish to web.

In the dialog, choose whether to publish the entire document or a specific sheet. Select “Embed” from the tab options and you’ll get iframe code you can drop directly into your HTML.

The output looks something like this:

<iframe src="https://docs.google.com/spreadsheets/d/FILE_ID/pubhtml?gid=SHEET_ID&single=true&widget=true&headers=false" width="700" height="400"></iframe>

Customizing the Google Sheets Embed

Google’s publish options let you control a few things before you grab the embed code. You can hide the sheet tab bar at the bottom using &widget=false. Setting &headers=false removes the row and column header labels.

What Google Sheets renders vs. what Excel shows is not always identical. Complex formatting, some cell styles, and advanced functions don’t always translate cleanly. Worth checking in the published view before going live.

One difference worth calling out compared to the OneDrive method: Google Sheets lets you visualize Google Sheets data with built-in chart tools that can also be published and embedded separately. So if you want to show a chart from your spreadsheet rather than the whole table, that’s a separate embed option Google gives you.

Rendering Differences vs. Excel

Took me a while to figure this out when first testing it. Merged cells sometimes collapse. Custom number formats occasionally drop. Conditional formatting mostly works, but complex rules can behave differently.

If your spreadsheet has simple data and standard formatting, Google Sheets embedding works well. If it has heavy Excel-specific formatting or relies on Excel-only functions, test it carefully before publishing.

Convert Excel Data to an HTML Table

Sometimes you don’t need the whole spreadsheet experience. You just need the data on the page, styled to match your site. Converting Excel to a native HTML table is the right call in these cases.

The result is cleaner, faster to load, and fully under your control. No external dependencies, no iframe sizing headaches.

Manual Conversion vs. Automated Tools

Manual conversion is exactly what it sounds like: you recreate the table structure in HTML by hand. It makes sense for small datasets. Doing it for 50+ rows by hand is not worth the time.

Faster options:

• Excel’s built-in export: File > Save As > Web Page (.htm) generates HTML output, though the markup is messy and full of inline styles
• TableConvert: paste your data, get clean HTML table markup
• SpreadsheetConverter: converts the whole worksheet with formatting preserved

The generated HTML typically follows a standard structure: <table> with <thead>, <th> cells for headers, and <tbody> with <tr> rows for data. If you want proper HTML table headers, make sure your first row converts to <th> elements, not <td>.

Preserving Formatting: Borders, Colors, Merged Cells

This is where things get tricky. Excel formatting doesn’t map 1:1 to CSS.

Cell borders need to be handled with CSS border properties. If you want consistent table borders in HTML, define them in a stylesheet rather than relying on whatever inline styles the export tools generate.

Merged cells translate to the colspan and rowspan attributes in HTML, but automated converters sometimes get this wrong. Always check merged areas manually after conversion.

Background colors come through as inline style="background-color:#..." attributes. You can keep these or replace them with CSS classes for cleaner markup.

Tools That Convert Excel to HTML Table Automatically

Three tools worth knowing, each with tradeoffs:

For most cases, TableConvert gives the best balance. SpreadsheetConverter is worth it if your spreadsheet has complex formatting you can’t afford to lose.

Use JavaScript Libraries to Display Excel Data

If you’re building something beyond a static page display, JavaScript is the right path. Two libraries handle most of the use cases here: SheetJS for parsing Excel files client-side, and Handsontable for rendering an interactive spreadsheet grid in the browser.

SheetJS (xlsx.js): Reading .xlsx Files Client-Side

SheetJS reads Excel files directly in the browser without any server-side processing. The user selects a file, JavaScript parses it, and you render the data however you like.

The basic pattern with SheetJS looks like this:

const response = await fetch('data.xlsx');
const buffer = await response.arrayBuffer();
const workbook = XLSX.read(buffer);
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(sheet, { header: 1 });

From there, data is a JavaScript array of rows. You loop through it to build your HTML table, feed it to a charting library, or pass it to a framework component. You have full control over what gets rendered.

One thing to keep in mind: XLSX.readFile doesn’t work in browsers for security reasons. You need to use XLSX.read with the file’s ArrayBuffer instead. Took me longer to figure that out than it should have.

Handsontable: Interactive Spreadsheet UI

Handsontable renders a spreadsheet-like grid directly in the browser. Users can sort columns, edit cells (if you allow it), and interact with the data the way they would in Excel. It pairs well with SheetJS: use SheetJS to parse the file, then feed the data into Handsontable for display.

When to use SheetJS vs. iframe methods:

• Use SheetJS when you need to process or transform the data before display, or when you don’t want to depend on OneDrive or Google’s infrastructure
• Use iframe methods when you want a quick embed with minimal code and you don’t mind the external dependency
• Use Handsontable when you need a fully interactive spreadsheet experience built into your app

For developers who want to connect spreadsheet data to chart outputs, the combination of SheetJS plus a library like Chart.js works well. Parse the xlsx, extract the columns you need, pass them as datasets to Chart.js. Straightforward once you see the pattern.

SheetJS is distributed under the Apache 2.0 License (Community Edition), which makes it free to use in commercial projects. The Pro version adds things like styling, formula evaluation, and PivotTable support.

Embed Excel in HTML Email

This is a different problem than embedding in a web page, and the constraints are much tighter. Most email clients actively block or strip out anything that isn’t basic HTML and inline CSS.

Why iframes Don’t Work in Email

iframes are blocked in virtually every major email client. Gmail, Outlook, Apple Mail, and most others strip them out entirely or refuse to render them. There’s no workaround for this. You cannot use an OneDrive or Google Sheets iframe embed in an HTML email.

What actually works:

• Convert the spreadsheet to an HTML table with inline CSS styles
• Take a screenshot of the spreadsheet and embed it as an image
• Link to the live spreadsheet rather than embedding it

Practical Approaches for Email Clients

Inline HTML table: converts your Excel data to HTML markup with all styles written inline (no external stylesheets, email clients ignore them). Tools like TableConvert handle the conversion. Keep the table simple, 5-7 columns max, because wide tables break on mobile email clients.

Paste as image: in Outlook, you can paste a selected range from Excel as an image using Paste Special. Fast, preserves formatting exactly, but not accessible and users can’t copy the data. Works for simple reporting.

Screenshot plus link: the best balance for most cases. Show a static image of the spreadsheet, then add a clear “View full spreadsheet” link below it. The image communicates the data at a glance, the link lets people who need the data actually get to it.

According to Acuity Training research, office workers spend 38% of their work time in spreadsheets on average. A lot of that data gets shared through email, which makes the “spreadsheet in email” problem a very common one. The screenshot-plus-link approach is what most teams land on eventually.

Responsive Design Considerations for Embedded Spreadsheets

Mobile devices generated 62.54% of global website traffic in Q4 2024 (Statista). If your embedded spreadsheet only works on desktop, you’re already failing the majority of your audience.

iframes and fixed-width HTML tables are two of the worst offenders when it comes to mobile breakage. Both assume a minimum screen width that phones simply don’t have.

iframes and Fixed-Width Tables Breaking on Mobile

The default OneDrive or Google Sheets embed code ships with hardcoded pixel widths, something like width="700". On a 375px phone screen, that iframe doesn’t shrink. It overflows.

Same issue with HTML tables. A table with 8 columns and no overflow handling will push past the viewport edge on any small screen.

What breaks:

• Horizontal scroll bleeds into parent page layout
• Fixed-pixel iframe cuts off right-side columns
• Touch targets inside embedded sheets are too small to tap

Google Sheets iframes are especially tricky on mobile. Even when sized correctly, dropdown interactions and cell editing often don’t work on touchscreens.

CSS overflow-x: scroll as a Quick Fix

Wrap first, then scroll. The fastest fix for both iframes and wide HTML tables is a container div with overflow handling:

div.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

iframe.spreadsheet-embed {
  min-width: 600px;
}

The -webkit-overflow-scrolling: touch property makes horizontal scrolling feel native on iOS. Without it, scrolling inside the container feels laggy and sticky.

This doesn’t make the spreadsheet truly responsive. It just stops it from breaking the layout. The user still has to scroll horizontally to see all columns, which is not ideal but works.

Limiting Columns for Mobile Views

A better approach than overflow scrolling: cut columns before display.

If you’re using SheetJS to render the data, you control which columns get rendered. Show 3-4 columns on small screens, all columns on desktop. A quick media query check with JavaScript does the job:

const isMobile = window.innerWidth < 768;
const columns = isMobile ? data[0].slice(0, 4) : data[0];

For static HTML tables, display: none on lower-priority columns at small breakpoints works just as well. You’re not hiding data that matters, just reducing visual noise on small screens.

Google Sheets Embed Responsiveness Options

Google Sheets doesn’t give you a native responsive embed. The iframe outputs at whatever dimensions you set.

The aspect-ratio container trick from W3Schools handles it for most use cases:

.sheet-container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 ratio works well for spreadsheets */
}

.sheet-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This scales the iframe proportionally as the viewport shrinks. It’s not perfect for data-heavy sheets, but it stops the horizontal overflow problem entirely.

For truly responsive tables, converting your Excel data to native HTML markup gives you the most control. You can apply media queries, stack columns vertically on mobile, and use CSS grid or flexbox to restructure the layout entirely.

Security and Privacy When Embedding Excel Files

Embedding spreadsheet data publicly is a data exposure decision. Treat it like one.

SecurityScorecard research reports that roughly 1 in 3 data breaches in 2024 were third-party related, and iframes are a documented attack surface. Most people setting up a simple Excel embed aren’t thinking about this at all.

OneDrive and Google Sheets: Who Can Access the Linked File

Both platforms require the source file to be set to public or “anyone with the link can view” for the embed to work for anonymous web visitors.

Public sharing means:

• Anyone who finds or guesses the share URL can view the raw file
• The file URL is often exposed in the iframe src attribute in your page source
• Users can sometimes navigate to adjacent sheets or tabs not shown in the embed

Google Sheets has a specific risk here. Embedding one sheet tab publicly does not necessarily hide other tabs from someone who accesses the direct URL. Check your sharing settings carefully and keep sensitive sheets in a separate file entirely.

Sharing Settings: View-Only vs. Edit Access

View-only: standard for public embeds, users see data but can’t change the source file.

Edit access: almost never appropriate for a public embed. The 2022 Microsoft Q&A thread on this topic shows how tricky it is to create an editable embed without making the file fully public.

One thing a lot of people miss: even with view-only sharing, the Download button is often shown by default in OneDrive embeds. Use the wdDownloadButton=False parameter to hide it if you don’t want visitors grabbing the full file.

Sensitive Data in Public Embeds

Never embed a spreadsheet that contains PII, financial data, passwords, API keys, or any information you wouldn’t post publicly as plain text.

The embed code in your page source shows the full OneDrive or Google Sheets URL. Anyone can plug that into a browser, access the file directly, and in some cases download it regardless of embed-level restrictions.

Reflectiz research notes that XSS attacks account for more than 30% of cyber attacks on web applications, and embedded iframes are a common entry point. For spreadsheets containing business data, this is a real concern if the embedded file is hosted on a domain you don’t fully control.

Self-Hosted Options for Private Data

If you need to display spreadsheet data that can’t be public, SheetJS with local file handling is the cleanest option. The .xlsx file lives on your own server, never gets shared to a cloud provider, and only gets parsed client-side when the page loads.

You serve the file. You control access. No third-party share links involved.

A basic server-side approach: restrict the file behind authentication, serve it as a binary download to authenticated sessions only, then let SheetJS parse it in the browser after the authenticated page loads. The file never appears in a public URL.

For WordPress users specifically, the WordPress Excel spreadsheet plugin route handles a lot of this complexity for you. It stores the spreadsheet data in the WordPress database rather than as an exposed file URL, which sidesteps most of the sharing-link exposure issues entirely.

One more thing worth knowing: if you use a published spreadsheet on the web via OneDrive, any edit to the file permissions after the fact can break existing embeds silently. There’s no warning. The iframe just stops loading. Test your embed from an incognito window regularly to catch this early.

FAQ on How To Embed Excel In HTML

Can I embed an Excel file directly in HTML without OneDrive?

Yes. Use SheetJS to parse the .xlsx file client-side with JavaScript, then render the data as an HTML table. No cloud account needed. The file can be hosted on your own server and loaded directly in the browser.

Does embedding Excel in HTML require a Microsoft account?

Only if you use the OneDrive iframe method. Google Sheets embedding and SheetJS-based solutions have no Microsoft account requirement. Converting Excel data to a native HTML table works completely offline.

Will the embedded spreadsheet update automatically when I edit the source file?

Yes, but only with live embed methods. OneDrive and Google Sheets iframes pull from the source file, so changes reflect on the web page. Static HTML table conversions don’t update automatically.

How do I embed only one sheet tab, not the entire workbook?

In OneDrive, use the Item URL parameter to target a named range. In Google Sheets, specify the gid parameter in the publish URL. SheetJS lets you target a specific sheet by name via workbook.SheetNames.

Why is my embedded Excel file showing a login screen instead of the spreadsheet?

The source file’s sharing settings are too restrictive. For OneDrive, set sharing to “Anyone with the link.” For Google Sheets, publish to web and set access to public viewing. Always test from an incognito window.

How do I make an embedded Excel spreadsheet responsive on mobile?

Wrap the iframe or table in a div with overflow-x: auto. For iframes, use a percentage-based aspect-ratio container. For HTML tables, consider hiding lower-priority columns at small breakpoints using CSS media queries.

Can I convert Excel data to an HTML table without coding?

Yes. Tools like TableConvert and SpreadsheetConverter handle the conversion without any code. Excel’s own Save as Web Page export also works, though it produces verbose markup with heavy inline styles that usually needs cleanup.

Is it safe to embed a spreadsheet containing sensitive data on a public web page?

No. Public embeds via OneDrive or Google Sheets expose the share URL in your page source. Anyone can access the file directly. Keep sensitive data in a server-side setup using SheetJS with authenticated file delivery instead.

What is the difference between embedding Excel via iframe and converting it to an HTML table?

An iframe loads the spreadsheet file through an external viewer. An HTML table rewrites the data as native page markup. Tables give you full styling control and load faster. iFrames preserve interactivity but depend on external infrastructure.

Which method is best for embedding Excel in HTML for a WordPress site?

A dedicated WordPress Excel spreadsheet plugin is the most practical option. It stores data in the WordPress database, avoids public share-link exposure, and handles rendering without requiring manual iframe or SheetJS setup.

Conclusion

This conclusion is for an article presenting the main methods to embed Excel in HTML, and the right choice depends entirely on your use case.

Need live data sync with minimal setup? The OneDrive iframe or Google Sheets publish route gets you there fast.

Need full control over spreadsheet rendering and styling? Convert your xlsx file to a native HTML table or use Handsontable with a SheetJS-parsed data source.

Building something more complex? A JavaScript library like SheetJS gives you the flexibility to process, filter, and display workbook data exactly how you want it.

Whatever path you take, keep mobile responsiveness and sharing permissions in mind from the start. Both are easy to get wrong and tricky to fix later.