Click here to Skip to main content
12,953,666 members (50,394 online)
Click here to Skip to main content
Add your own
alternative version


23 bookmarked
Posted 5 Apr 2014

Export HTML table to Excel With CSS

, 5 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Here is a quick code for how you can export the HTML table to Excel with CSS of table.


Many times, we have to export the HTML table in Excel file to offline view and more Excel editing work. This turns more tricky when we need the CSS of the table too. Here is the sample application demonstrating the Excel export.


To start with this, you need a little knowledge of JavaScript.

Using the Code

Put the below code in your Head part of the page.


<script src="" type="text/javascript"></script>
    <script type="text/javascript">
        var tableToExcel = (function () {
            var uri = 'data:application/;base64,'
                , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" 
                <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>
                , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
                , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
                return function (table, name) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
                window.location.href = uri + base64(format(template, ctx))

In the above code, we are converting the table to the Excel Sheet standard.

Sample HTML Code

<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel">
<table id="testTable" summary="Code page support in different versions of MS Windows."
    rules="groups" frame="hsides" border="2">
    <colgroup align="center">
    <colgroup align="left">
    <colgroup span="2" align="center">
    <colgroup span="3" align="center">
    <thead valign="top">
            <th>Windows<br>NT 3.1</th>
            <th>Windows<br>NT 3.51</th>
            <td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td>
            <td style="font-weight: bold">
                <a href=""></a>
            <td>MS-DOS United States</td>
            <td>Arabic (ASMO 708)</td>
            <td>Arabic (ASMO 449+, BCON V4)</td>
            <td>Arabic (Transparent Arabic)</td>

Points of Interest

The file is converted and saved as Excel on the client side without any postbacks that is also very quick.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Er. Puneet Goel
Software Developer
India India
Puneet Goel is a professional software developer working in a company from past 4+ years. He is specialized in Microsoft Technologies (Asp.NET, Sql Server, Ajax, Jquery, JavaScript, MVC and AngularJs). He is a avid member of several development communities and a serial blogger.He loves to learn new technology, do experiments with existing ones and always happy to help the community.

You may also be interested in...

Comments and Discussions

Questionthe color of the table rows wouldn't display in the excel Pin
Member 1296542324-Jan-17 1:37
memberMember 1296542324-Jan-17 1:37 
AnswerRe: the color of the table rows wouldn't display in the excel Pin
Er. Puneet Goel30-Jan-17 18:24
professionalEr. Puneet Goel30-Jan-17 18:24 
Questionnew Pin
Er. Puneet Goel8-Jun-16 3:49
professionalEr. Puneet Goel8-Jun-16 3:49 
AnswerRe: new Pin
Member 126653232-Aug-16 9:57
memberMember 126653232-Aug-16 9:57 
Questionthe sample doesn't work for me Pin
sdnd200017-May-16 2:06
membersdnd200017-May-16 2:06 
AnswerRe: the sample doesn't work for me Pin
Er. Puneet Goel25-May-16 2:25
professionalEr. Puneet Goel25-May-16 2:25 
QuestionHow can I add more than one sheet per File? Pin
Yngrid Coello9-May-16 5:23
memberYngrid Coello9-May-16 5:23 
QuestionHow can I collaborate with your project? Pin
Yngrid Coello6-May-16 4:27
memberYngrid Coello6-May-16 4:27 
AnswerRe: How can I collaborate with your project? Pin
Er. Puneet Goel8-May-16 20:07
professionalEr. Puneet Goel8-May-16 20:07 
QuestionCharset Pin
Member 1229738230-Jan-16 9:38
memberMember 1229738230-Jan-16 9:38 
AnswerRe: Charset Pin
Er. Puneet Goel1-Feb-16 19:03
professionalEr. Puneet Goel1-Feb-16 19:03 
QuestionWorks for .xls, what about .xlsx ? Pin
Member 1079144112-Nov-15 21:09
memberMember 1079144112-Nov-15 21:09 
AnswerRe: Works for .xls, what about .xlsx ? Pin
Er. Puneet Goel1-Dec-15 20:25
professionalEr. Puneet Goel1-Dec-15 20:25 
GeneralRe: Works for .xls, what about .xlsx ? Pin
Member 107914416-Jan-16 21:06
memberMember 107914416-Jan-16 21:06 
GeneralRe: Works for .xls, what about .xlsx ? Pin
Er. Puneet Goel11-Jan-16 22:12
professionalEr. Puneet Goel11-Jan-16 22:12 
QuestionDoesn't work for IE8, any fix? Pin
Member 1190359117-Aug-15 23:09
memberMember 1190359117-Aug-15 23:09 
AnswerRe: Doesn't work for IE8, any fix? Pin
Er. Puneet Goel17-Aug-15 23:51
professionalEr. Puneet Goel17-Aug-15 23:51 
GeneralRe: Doesn't work for IE8, any fix? Pin
shijo288833-Feb-16 18:23
membershijo288833-Feb-16 18:23 
GeneralRe: Doesn't work for IE8, any fix? Pin
Er. Puneet Goel3-Feb-16 20:02
professionalEr. Puneet Goel3-Feb-16 20:02 
SuggestionArchitecture Pin
Member 1187224829-Jul-15 7:15
memberMember 1187224829-Jul-15 7:15 
GeneralRe: Architecture Pin
Yngrid Coello9-May-16 5:54
memberYngrid Coello9-May-16 5:54 
QuestionNeed to Export base64 images part of the html table Pin
aakhan24-Jun-15 12:34
memberaakhan24-Jun-15 12:34 
AnswerRe: Need to Export base64 images part of the html table Pin
Er. Puneet Goel29-Jun-15 23:10
professionalEr. Puneet Goel29-Jun-15 23:10 
QuestionFile name Pin
Member 80938081-May-15 23:09
memberMember 80938081-May-15 23:09 
AnswerRe: File name Pin
Er. Puneet Goel29-Jun-15 23:12
professionalEr. Puneet Goel29-Jun-15 23:12 
AnswerRe: File name Pin
Yngrid Coello6-May-16 4:39
memberYngrid Coello6-May-16 4:39 
GeneralRe: File name Pin
Er. Puneet Goel8-May-16 20:10
professionalEr. Puneet Goel8-May-16 20:10 
Questionhow can I change random name Pin
Uthman Rahimi1-Feb-15 20:59
professionalUthman Rahimi1-Feb-15 20:59 
QuestionCan I specify column width? Pin
Member 1139763623-Jan-15 5:00
memberMember 1139763623-Jan-15 5:00 
AnswerRe: Can I specify column width? Pin
Er. Puneet Goel8-Feb-15 23:05
professionalEr. Puneet Goel8-Feb-15 23:05 
QuestionNot working Pin
Bahru25-Nov-14 19:50
memberBahru25-Nov-14 19:50 
AnswerRe: Not working Pin
Er. Puneet Goel8-Feb-15 22:18
professionalEr. Puneet Goel8-Feb-15 22:18 
QuestionHow to change the file name? Pin
Member 1123036813-Nov-14 0:45
memberMember 1123036813-Nov-14 0:45 
AnswerRe: How to change the file name? Pin
Er. Puneet Goel19-Nov-14 20:33
professionalEr. Puneet Goel19-Nov-14 20:33 
AnswerRe: How to change the file name? Pin
Yngrid Coello6-May-16 4:34
memberYngrid Coello6-May-16 4:34 
Questionneed to add export to excel in my code Pin
Member 1101298714-Aug-14 4:46
memberMember 1101298714-Aug-14 4:46 
AnswerRe: need to add export to excel in my code Pin
Er. Puneet Goel7-Sep-14 23:32
professionalEr. Puneet Goel7-Sep-14 23:32 
QuestionHi It is not working in IE 10 also Pin
nattuthurai28-May-14 18:38
membernattuthurai28-May-14 18:38 
BugNot Working in IE11 Pin
smartsoftengr8-Apr-14 2:09
membersmartsoftengr8-Apr-14 2:09 
GeneralRe: Not Working in IE11 Pin
Er. Puneet Goel8-Apr-14 2:30
professionalEr. Puneet Goel8-Apr-14 2:30 
GeneralRe: Not Working in IE11 Pin
Bhanu Karumudi20-Jul-14 5:19
memberBhanu Karumudi20-Jul-14 5:19 
GeneralRe: Not Working in IE11 Pin
Er. Puneet Goel7-Sep-14 23:33
professionalEr. Puneet Goel7-Sep-14 23:33 
GeneralRe: Not Working in IE11 Pin
AngelMillan27-Oct-15 3:58
memberAngelMillan27-Oct-15 3:58 
GeneralRe: Not Working in IE11 Pin
Member 129328473-Jan-17 7:28
memberMember 129328473-Jan-17 7:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170525.1 | Last Updated 5 Apr 2014
Article Copyright 2014 by Er. Puneet Goel
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid