MS Office Programming tricks

Converting Excel Table to HTML Table Made Easier

We have already discussed how to convert an Excel table to HTML table with an Excel macro. Today we will see how to make it even easier. You can now directly copy and paste the Excel table in a textbox to convert it to HTML. This has been made with a simple JavaScript.

How JavaScript can do it ?

When you copy something from Excel, automatically a tab is inserted between each cells. Now a code has been written in JavaScript which detects the tab and replace it with appropriate HTML parameters.

Paste the Excel table in below box

Generate HTML Table

Can I get its source code ?

Copy and paste the following code in your website or you can also save it as .html for your offline use.
function generateCode(){
var input=document.getElementById('inputTableArea').value;
var output= input.replace("&","&amp;");
output= output.replace("<","&lt;");
output= output.replace(">","&gt;");
output= output.replace('"',"&quot;");
output= output.replace("'","&#39;");
output= output.replace(/t/g,"</td><td>");
output= output.replace(/n/g,"</td></tr><tr><td>");
var tableStyle="<style type='text/css'>table.quickTable {border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;font-size: 12px;}.quickTable td {padding: 4px;border: 1px solid #ccc;}</style>";
document.getElementById('displayHTMLDiv').innerHTML=tableStyle+'<table class="quickTable" border="1px" cellpadding="2" cellspacing="2"><tr><td>'+output+'</td></tr></table>';
output='<table class="quickTable" cellpadding="2" cellspacing="2"><tr><td>'+output+'</td></tr>n</table>';
tableStyle="<style type='text/css'>ntable.quickTable {nborder: 1px solid #CCC; nfont-family: Arial, Helvetica, sans-serif;font-size: 12px;n}n.quickTable td {npadding: 4px;nborder: 1px solid #ccc;n}n</style>n";

<div style="margin-left:100px">Paste the Excel table in below box</div>
<textarea id='inputTableArea' style="width:450px;height:100px; margin-left:100px;"></textarea>
<input type="button" value='Generate' onClick='generateCode()' style="margin-left:473px;margin-top:15px;margin-bottom:15px;">
<div id="displayHTMLDiv" style="margin-left:100px; width:452px; overflow:auto;" >
<p id="displayPara" style="display:none;margin-left:100px">
Generate HTML Table<br/>
<textarea id='outputCodeArea' style="width:450px;height:100px;overflow:auto;"></textarea>