Click here to Skip to main content
12,349,778 members (23,547 online)
Click here to Skip to main content
Add your own
alternative version

Stats

84.3K views
5.9K downloads
22 bookmarked
Posted

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.

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 3+ 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

 
Questionnew Pin
Er. Puneet Goel8-Jun-16 3:49
professionalEr. Puneet Goel8-Jun-16 3:49 
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 

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.

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