Click here to Skip to main content
11,644,731 members (60,759 online)
Click here to Skip to main content

Export HTML table to Excel With CSS

, 5 Apr 2014 CPOL 54.9K 3.7K 18
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.

Introduction

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.

Background

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.

JavaScript

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

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">
        <caption>
            CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption>
        <colgroup align="center">
        </colgroup>
        <colgroup align="left">
        </colgroup>
        <colgroup span="2" align="center">
        </colgroup>
        <colgroup span="3" align="center">
        </colgroup>
        <thead valign="top">
            <tr>
                <th>Code-Page<br>ID</th>
                <th>Name</th>
                <th>ACP</th>
                <th>OEMCP</th>
                <th>Windows<br>NT 3.1</th>
                <th>Windows<br>NT 3.51</th>
                <th>Windows<br>95</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1200</td>
                <td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td>
                <td></td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td>*</td>
            </tr>
            <tr>
                <td>1250</td>
                <td style="font-weight: bold">
                    <a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
                </td>
                <td>X</td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td>X</td>
            </tr>
            <tr>
                <td>1255</td>
                <td>Hebrew</td>
                <td>X</td>
                <td></td>
                <td></td>
                <td></td>
                <td>X</td>
            </tr>
            <tr>
                <td>437</td>
                <td>MS-DOS United States</td>
                <td></td>
                <td>X</td>
                <td>X</td>
                <td>X</td>
                <td>X</td>
            </tr>
            <tr>
                <td>708</td>
                <td>Arabic (ASMO 708)</td>
                <td></td>
                <td>X</td>
                <td></td>
                <td></td>
                <td>X</td>
            </tr>
            <tr>
                <td>709</td>
                <td>Arabic (ASMO 449+, BCON V4)</td>
                <td></td>
                <td>X</td>
                <td></td>
                <td></td>
                <td>X</td>
            </tr>
            <tr>
                <td>710</td>
                <td>Arabic (Transparent Arabic)</td>
                <td></td>
                <td>X</td>
                <td></td>
                <td></td>
                <td>X</td>
            </tr>
        </tbody>
    </table> 

Points of Interest

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

License

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

Share

About the Author

Er. Puneet Goel
Software Developer
India India
Puneet Goel is a professional software developer working in a company from past 2 years. He is specialized in Microsoft Technologies (Asp.NET, Sql Server, Ajax, Jquery, JavaScript and MVC). 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

 
SuggestionArchitecture Pin
Member 1187224829-Jul-15 7:15
memberMember 1187224829-Jul-15 7:15 
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 
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 
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 

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

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

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