title: Export HTML tables to Excel keeping format
body: <p>I have multiple tables on my webpage and I want to export the tables to same Excel file, at the moment I have a code for that (the code is from one post from here) but the problem is that the Excel file is created fine but without any style.  For example: I have a td which have a <strong>td</strong> tag with <strong>colspan 5</strong> but this is not  saved on my xls file. I also have another code to export only one table and this code exports the info with the styles. What can I do to export tables with styles?</p>
  
  <p>Here is the code to export multiple tables (without styles)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
   
  });
  
  var tablesToExcel = (function () {
              var uri = 'data:application/vnd.ms-excel;base64,'
                  , tmplWorkbookXML = '&lt;?xml version="1.0"?&gt;&lt;?mso-application progid="Excel.Sheet"?&gt;&lt;Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"&gt;'
                      + '&lt;DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"&gt;&lt;Author&gt;Axel Richter&lt;/Author&gt;&lt;Created&gt;{created}&lt;/Created&gt;&lt;/DocumentProperties&gt;'
                      + '&lt;Styles&gt;'
                      + '&lt;Style ss:ID="Currency"&gt;&lt;NumberFormat ss:Format="Currency"&gt;&lt;/NumberFormat&gt;&lt;/Style&gt;'
                      + '&lt;Style ss:ID="Date"&gt;&lt;NumberFormat ss:Format="Medium Date"&gt;&lt;/NumberFormat&gt;&lt;/Style&gt;'
                      + '&lt;/Styles&gt;'
                      + '{worksheets}&lt;/Workbook&gt;'
                  , tmplWorksheetXML = '&lt;Worksheet ss:Name="{nameWS}"&gt;&lt;Table&gt;{rows}&lt;/Table&gt;&lt;/Worksheet&gt;'
                  , tmplCellXML = '&lt;Cell{attributeStyleID}{attributeFormula}&gt;&lt;Data ss:Type="{nameType}"&gt;{data}&lt;/Data&gt;&lt;/Cell&gt;'
                  , 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 (tables, wsnames, wbname, appname) {
                  var ctx = "";
                  var workbookXML = "";
                  var worksheetsXML = "";
                  var rowsXML = "";
  
                  for (var i = 0; i &lt; tables.length; i++) {
                      if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
                      for (var j = 0; j &lt; tables[i].rows.length; j++) {
                          rowsXML += '&lt;Row&gt;'
                          for (var k = 0; k &lt; tables[i].rows[j].cells.length; k++) {
                              var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
                              var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
                              var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
                              dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
                              var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
                              dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' &amp;&amp; dataType == 'DateTime') ? dataValue : null;
                              ctx = {
                                  attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : ''
                                  , nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String'
                                  , data: (dataFormula) ? '' : dataValue
                                  , attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
                              };
                              rowsXML += format(tmplCellXML, ctx);
                          }
                          rowsXML += '&lt;/Row&gt;'
                      }
                      ctx = { rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i };
                      worksheetsXML += format(tmplWorksheetXML, ctx);
                      rowsXML = "";
                  }
  
                  ctx = { created: (new Date()).getTime(), worksheets: worksheetsXML };
                  workbookXML = format(tmplWorkbookXML, ctx);
  
                  console.log(workbookXML);
  
                  var link = document.createElement("A");
                  link.href = uri + base64(workbookXML);
                  link.download = wbname || 'Workbook.xls';
                  link.target = '_blank';
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);
              }
          })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="col-xs-push-2 col-xs-10 col-md-push-8 col-md-2 form-group"&gt;
                          &lt;label class="control-label" style="color:white;"&gt;a&lt;/label&gt;
                          &lt;button onclick="tablesToExcel(['T1','T2'], ['Table 1','Table 2'], 'TestBook.xls', 'Excel')"&gt;Export to Excel&lt;/button&gt;
                      &lt;/div&gt;
  
  &lt;div class="row"&gt;
                      &lt;div class="col-md-4 form-group hidden"&gt;
                          &lt;table class="table table-bordered table-striped" id="T1"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;td colspan="4" class="text-center"&gt;&lt;b&gt;Table 1&lt;/b&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td class="text-center"&gt;Fecha&lt;/td&gt;
                                      &lt;td class="text-center"&gt;Anterior&lt;/td&gt;
                                      &lt;td class="text-center"&gt;Actual&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody id="T1Body"&gt;
                                &lt;tr&gt;
                                  &lt;td&gt;2018-09-30&lt;/td&gt;
                                  &lt;td&gt;2000.00&lt;/td&gt;
                                  &lt;td&gt;700.00&lt;/td&gt;
                                &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                      
                      &lt;div class="col-md-8 form-group hidden"&gt;
                          &lt;table class="table table-bordered table-striped" id="T2"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;td colspan="8" class="text-center"&gt;&lt;b&gt;Table 2&lt;/b&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td colspan="4" class="text-center"&gt;Data 1&lt;/td&gt;
                                      &lt;td colspan="3" class="text-center"&gt;Data 2&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td colspan="1" style="border-top: none !important;" class="text-center"&gt;Date&lt;/td&gt;
                                      &lt;td colspan="1" class="text-center"&gt;Ini&lt;/td&gt;
                                      &lt;td colspan="1" class="text-center"&gt;End&lt;/td&gt;
                                      &lt;td colspan="1" class="text-center"&gt;Prod&lt;/td&gt;
                                      &lt;td colspan="1" class="text-center"&gt;Ini&lt;/td&gt;
                                      &lt;td colspan="1" class="text-center"&gt;End&lt;/td&gt;
                                      &lt;td colspan="1" class="text-center"&gt;Prod&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody id="T2Body"&gt;
                                &lt;tr&gt;
                                  &lt;td&gt;2018-09-30&lt;/td&gt;
                                  &lt;td&gt;200.00&lt;/td&gt;
                                  &lt;td&gt;300.00&lt;/td&gt;
                                  &lt;td&gt;100.00&lt;/td&gt;
                                  &lt;td&gt;500.00&lt;/td&gt;
                                  &lt;td&gt;650.00&lt;/td&gt;
                                  &lt;td&gt;150.00&lt;/td&gt;
                                &lt;/tr&gt;
                              &lt;/tbody&gt;
                              &lt;tfoot id="T2Foot"&gt;
                                &lt;tr&gt;&lt;td colspan="3" class="text-right"&gt;&lt;b&gt;Total 1:&lt;/b&gt;&lt;/td&gt;&lt;td colspan="1"&gt;&lt;b&gt;100.00&lt;/b&gt;&lt;/td&gt;
                              &lt;td colspan="2" class="text-right"&gt;&lt;b&gt;Total 2:&lt;/b&gt;&lt;/td&gt; &lt;td colspan="1"&gt;&lt;b&gt;150.00&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;
                              &lt;/tfoot&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is the code for export only one table (keeping styles) </p>
  
  <p><a href="https://codepen.io/anon/pen/aRzwRw?editors=1010" rel="nofollow noreferrer">Codepen Code</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Searching for a solution I found that the problem is because I'm using <strong>xml</strong>  instead of <strong>html</strong> so now the question is, how can I do that with the above code?</p>