Html export - export table html and css

Use the dropdowns to change table style and theme, then click the Reload button. This is the only roundtrip done back to EPPlus. Change the appearance of the table by checking/unchecking the checkboxes.

All CSS classes needed to style the table are exported from EPPlus and based on Excels table styles and themes. You can use the dev tools of your favorite browser to see how the classes are applied to the table.

The checkboxes below demonstrates that you can use the html/css from EPPlus with css/javascript from other frameworks

Country FirstName LastName BirthDate City
England Brayan Yost 1991-11-30 East Preciousbury
Wales Annetta Lindgren 1962-03-26 Lake Winnifred
Wales Tabitha Schimmel 1961-01-13 Port Sheilaview
Wales Carolyn Upton 1982-02-21 East Liliane
Wales Rubye Hintz 1924-08-02 New Alexa
Northern Ireland Clementina Quitzon 1937-10-12 Port Justus
Northern Ireland Juana Waelchi 2014-10-31 West Margarette
Northern Ireland Carmel Ferry 2008-02-16 Leannefurt
England Shanny Johnson 1965-04-18 South Loy
Scotland Ian Farrell 1948-04-30 Schmelerborough
Scotland Sherwood Crist 2021-06-09 Lempitown
Scotland Una Bartoletti 1939-06-06 East Chasechester
Northern Ireland Gordon Schumm 1974-07-12 Kodymouth
Wales Gideon Morar 1935-02-11 North Bonnieton
England Barbara Bruen 1910-12-09 East Adelia
England Colton Heathcote 1949-06-23 Romainefort
Wales Izaiah Roob 1923-09-03 North Maya
England Toni Bednar 1937-04-22 Stewartborough
Scotland Everette Trantow 1922-04-02 Cortneychester
England Graham Cormier 1980-12-12 East Chelsie
Wales Javonte Rice 1997-05-13 Allenfort
England Wilson Boyer 2003-10-29 Sanfordmouth
Wales Freddie Huels 1961-12-09 South Anne
England Felicia Casper 1997-07-30 New Imaniberg
Scotland Lurline Stamm 2011-12-28 Jessychester
Wales Merlin Greenholt 1921-05-10 Ianchester
Wales Grant Bergstrom 1996-03-09 Port Autumnfort
Northern Ireland Marlen Zboncak 1973-09-11 Sanfordbury
Wales Otilia Kemmer 1939-09-30 West Devenborough
Scotland Dwight Schoen 1936-09-03 North Geraldside
Scotland Aditya Romaguera 2008-10-16 Lake Ofeliaside
Scotland Jamison Heathcote 2018-08-16 Beierside
Wales Elsie Ryan 1933-09-05 East Lauren
Scotland Reggie Huels 1966-05-04 Margaretside
Northern Ireland Marge Lesch 2018-02-17 Torpbury
England Bertram Kulas 1963-02-25 East Loy
Northern Ireland Richard Ward 1936-10-27 Dionport
Wales Citlalli Ratke 1947-04-15 Tillmantown
Wales Dominic Cremin 1961-11-02 Lake Michellechester
Northern Ireland Ray Kuhn 2017-04-03 Eloisefurt
Wales Brenden Dibbert 1979-05-04 New Jayfurt
Northern Ireland Missouri Schaefer 1983-04-11 Hyattchester
Northern Ireland Jaiden Ward 1937-10-03 Lehnerland
Northern Ireland Omer Corkery 1913-08-29 Port Reggie
Northern Ireland Hildegard Herzog 1962-03-11 Lake Felipa
Scotland Bryon Schulist 1962-02-25 Framiburgh
England Kieran Funk 1978-04-24 West Jarret
England Alexa Cummerata 1965-08-13 East Otis
England Ceasar Macejkovic 1903-09-17 Zaneborough
Wales Rossie O'Reilly 1985-01-11 New Bernice

Some selected parts of the model class for this page

            
public void SetupSampleData(int theme, TableStyles? style = TableStyles.Dark1)
{
    // This method just fakes some data into a data table
    InitDataTable();

    using(var package = new ExcelPackage())
    {
        SetTheme(theme, package);

        var sheet = package.Workbook.Worksheets.Add("Html export sample 1");
        var tableRange = sheet.Cells["A1"].LoadFromDataTable(_dataTable, true, style);
        // set number format for the BirthDate column
        sheet.Cells[tableRange.Start.Row + 1, 4, tableRange.End.Row, 4].Style.Numberformat.Format = "yyyy-MM-dd";
        tableRange.AutoFitColumns();

        var table = sheet.Tables.GetFromRange(tableRange);

        // table properties
        table.ShowFirstColumn = this.ShowFirstColumn;
        table.ShowLastColumn = this.ShowLastColumn;
        table.ShowColumnStripes = this.ShowColumnStripes;
        table.ShowRowStripes = this.ShowRowsStripes;

        // Export Html and CSS
        var exporter = table.CreateHtmlExporter();
        exporter.Settings.Minify = false;
        Css = exporter.GetCssString();
        Html = exporter.GetHtmlString();
        WorkbookBytes = package.GetAsByteArray();
    }
}

private static void SetTheme(int theme, ExcelPackage package)
{
    if (theme > 0)
    {
        var fileInfo = default(FileInfo);
        switch (theme)
        {
            case 1:
                fileInfo = new FileInfo(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, $"themes\\Ion.thmx"));
                break;
            case 2:
                fileInfo = new FileInfo(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, $"themes\\Banded.thmx"));
                break;
            case 3:
                fileInfo = new FileInfo(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, $"themes\\Parallax.thmx"));
                break;
            default:
                fileInfo = new FileInfo(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, $"themes\\Ion.thmx"));
                break;
        }
        package.Workbook.ThemeManager.Load(fileInfo);
    }
}

public string Css { get; set; }

public string Html { get; set; }
            
        

Html as it was exported

        
 <table class="epplus-table ts-dark1 ts-dark1-header" role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">Country</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">FirstName</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">LastName</th>
      <th data-datatype="datetime" class="epp-al" role="columnheader" scope="col">BirthDate</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">City</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Brayan</td>
      <td role="cell">Yost</td>
      <td data-value="691459200000" role="cell" class="epp-ar">1991-11-30</td>
      <td role="cell">East Preciousbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Annetta</td>
      <td role="cell">Lindgren</td>
      <td data-value="-245203200000" role="cell" class="epp-ar">1962-03-26</td>
      <td role="cell">Lake Winnifred</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Tabitha</td>
      <td role="cell">Schimmel</td>
      <td data-value="-282960000000" role="cell" class="epp-ar">1961-01-13</td>
      <td role="cell">Port Sheilaview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Carolyn</td>
      <td role="cell">Upton</td>
      <td data-value="383097600000" role="cell" class="epp-ar">1982-02-21</td>
      <td role="cell">East Liliane</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Rubye</td>
      <td role="cell">Hintz</td>
      <td data-value="-1433203200000" role="cell" class="epp-ar">1924-08-02</td>
      <td role="cell">New Alexa</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Clementina</td>
      <td role="cell">Quitzon</td>
      <td data-value="-1016841600000" role="cell" class="epp-ar">1937-10-12</td>
      <td role="cell">Port Justus</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Juana</td>
      <td role="cell">Waelchi</td>
      <td data-value="1414713600000" role="cell" class="epp-ar">2014-10-31</td>
      <td role="cell">West Margarette</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Carmel</td>
      <td role="cell">Ferry</td>
      <td data-value="1203120000000" role="cell" class="epp-ar">2008-02-16</td>
      <td role="cell">Leannefurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Shanny</td>
      <td role="cell">Johnson</td>
      <td data-value="-148521600000" role="cell" class="epp-ar">1965-04-18</td>
      <td role="cell">South Loy</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Ian</td>
      <td role="cell">Farrell</td>
      <td data-value="-683942400000" role="cell" class="epp-ar">1948-04-30</td>
      <td role="cell">Schmelerborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Sherwood</td>
      <td role="cell">Crist</td>
      <td data-value="1623196800000" role="cell" class="epp-ar">2021-06-09</td>
      <td role="cell">Lempitown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Una</td>
      <td role="cell">Bartoletti</td>
      <td data-value="-964828800000" role="cell" class="epp-ar">1939-06-06</td>
      <td role="cell">East Chasechester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Gordon</td>
      <td role="cell">Schumm</td>
      <td data-value="142819200000" role="cell" class="epp-ar">1974-07-12</td>
      <td role="cell">Kodymouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Gideon</td>
      <td role="cell">Morar</td>
      <td data-value="-1100995200000" role="cell" class="epp-ar">1935-02-11</td>
      <td role="cell">North Bonnieton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Barbara</td>
      <td role="cell">Bruen</td>
      <td data-value="-1863907200000" role="cell" class="epp-ar">1910-12-09</td>
      <td role="cell">East Adelia</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Colton</td>
      <td role="cell">Heathcote</td>
      <td data-value="-647740800000" role="cell" class="epp-ar">1949-06-23</td>
      <td role="cell">Romainefort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Izaiah</td>
      <td role="cell">Roob</td>
      <td data-value="-1462060800000" role="cell" class="epp-ar">1923-09-03</td>
      <td role="cell">North Maya</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Toni</td>
      <td role="cell">Bednar</td>
      <td data-value="-1031788800000" role="cell" class="epp-ar">1937-04-22</td>
      <td role="cell">Stewartborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Everette</td>
      <td role="cell">Trantow</td>
      <td data-value="-1506902400000" role="cell" class="epp-ar">1922-04-02</td>
      <td role="cell">Cortneychester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Graham</td>
      <td role="cell">Cormier</td>
      <td data-value="345427200000" role="cell" class="epp-ar">1980-12-12</td>
      <td role="cell">East Chelsie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Javonte</td>
      <td role="cell">Rice</td>
      <td data-value="863481600000" role="cell" class="epp-ar">1997-05-13</td>
      <td role="cell">Allenfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Wilson</td>
      <td role="cell">Boyer</td>
      <td data-value="1067385600000" role="cell" class="epp-ar">2003-10-29</td>
      <td role="cell">Sanfordmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Freddie</td>
      <td role="cell">Huels</td>
      <td data-value="-254448000000" role="cell" class="epp-ar">1961-12-09</td>
      <td role="cell">South Anne</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Felicia</td>
      <td role="cell">Casper</td>
      <td data-value="870220800000" role="cell" class="epp-ar">1997-07-30</td>
      <td role="cell">New Imaniberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Lurline</td>
      <td role="cell">Stamm</td>
      <td data-value="1325030400000" role="cell" class="epp-ar">2011-12-28</td>
      <td role="cell">Jessychester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Merlin</td>
      <td role="cell">Greenholt</td>
      <td data-value="-1535155200000" role="cell" class="epp-ar">1921-05-10</td>
      <td role="cell">Ianchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Grant</td>
      <td role="cell">Bergstrom</td>
      <td data-value="826329600000" role="cell" class="epp-ar">1996-03-09</td>
      <td role="cell">Port Autumnfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Marlen</td>
      <td role="cell">Zboncak</td>
      <td data-value="116553600000" role="cell" class="epp-ar">1973-09-11</td>
      <td role="cell">Sanfordbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Otilia</td>
      <td role="cell">Kemmer</td>
      <td data-value="-954806400000" role="cell" class="epp-ar">1939-09-30</td>
      <td role="cell">West Devenborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Dwight</td>
      <td role="cell">Schoen</td>
      <td data-value="-1051747200000" role="cell" class="epp-ar">1936-09-03</td>
      <td role="cell">North Geraldside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Aditya</td>
      <td role="cell">Romaguera</td>
      <td data-value="1224115200000" role="cell" class="epp-ar">2008-10-16</td>
      <td role="cell">Lake Ofeliaside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jamison</td>
      <td role="cell">Heathcote</td>
      <td data-value="1534377600000" role="cell" class="epp-ar">2018-08-16</td>
      <td role="cell">Beierside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Elsie</td>
      <td role="cell">Ryan</td>
      <td data-value="-1146268800000" role="cell" class="epp-ar">1933-09-05</td>
      <td role="cell">East Lauren</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Reggie</td>
      <td role="cell">Huels</td>
      <td data-value="-115603200000" role="cell" class="epp-ar">1966-05-04</td>
      <td role="cell">Margaretside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Marge</td>
      <td role="cell">Lesch</td>
      <td data-value="1518825600000" role="cell" class="epp-ar">2018-02-17</td>
      <td role="cell">Torpbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Bertram</td>
      <td role="cell">Kulas</td>
      <td data-value="-216172800000" role="cell" class="epp-ar">1963-02-25</td>
      <td role="cell">East Loy</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Richard</td>
      <td role="cell">Ward</td>
      <td data-value="-1047081600000" role="cell" class="epp-ar">1936-10-27</td>
      <td role="cell">Dionport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Citlalli</td>
      <td role="cell">Ratke</td>
      <td data-value="-716860800000" role="cell" class="epp-ar">1947-04-15</td>
      <td role="cell">Tillmantown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Dominic</td>
      <td role="cell">Cremin</td>
      <td data-value="-257644800000" role="cell" class="epp-ar">1961-11-02</td>
      <td role="cell">Lake Michellechester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Ray</td>
      <td role="cell">Kuhn</td>
      <td data-value="1491177600000" role="cell" class="epp-ar">2017-04-03</td>
      <td role="cell">Eloisefurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Brenden</td>
      <td role="cell">Dibbert</td>
      <td data-value="294624000000" role="cell" class="epp-ar">1979-05-04</td>
      <td role="cell">New Jayfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Missouri</td>
      <td role="cell">Schaefer</td>
      <td data-value="418867200000" role="cell" class="epp-ar">1983-04-11</td>
      <td role="cell">Hyattchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jaiden</td>
      <td role="cell">Ward</td>
      <td data-value="-1017619200000" role="cell" class="epp-ar">1937-10-03</td>
      <td role="cell">Lehnerland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Omer</td>
      <td role="cell">Corkery</td>
      <td data-value="-1778025600000" role="cell" class="epp-ar">1913-08-29</td>
      <td role="cell">Port Reggie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Hildegard</td>
      <td role="cell">Herzog</td>
      <td data-value="-246499200000" role="cell" class="epp-ar">1962-03-11</td>
      <td role="cell">Lake Felipa</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Bryon</td>
      <td role="cell">Schulist</td>
      <td data-value="-247708800000" role="cell" class="epp-ar">1962-02-25</td>
      <td role="cell">Framiburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Kieran</td>
      <td role="cell">Funk</td>
      <td data-value="262224000000" role="cell" class="epp-ar">1978-04-24</td>
      <td role="cell">West Jarret</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alexa</td>
      <td role="cell">Cummerata</td>
      <td data-value="-138412800000" role="cell" class="epp-ar">1965-08-13</td>
      <td role="cell">East Otis</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Ceasar</td>
      <td role="cell">Macejkovic</td>
      <td data-value="-2092003200000" role="cell" class="epp-ar">1903-09-17</td>
      <td role="cell">Zaneborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Rossie</td>
      <td role="cell">O'Reilly</td>
      <td data-value="474249600000" role="cell" class="epp-ar">1985-01-11</td>
      <td role="cell">New Bernice</td>
    </tr>

  </tbody>
  </table>
            
        

EPPlus converts the table styling in Excel to a separate stylesheet.

        
 table.epplus-table{
  font-family:Calibri;
  font-size:11pt;
  border-spacing:0;
  border-collapse:collapse;
  word-wrap:break-word;
  white-space:nowrap;
}
.epp-hidden {
  display:none;
}
.epp-al {
  text-align:left;
}
.epp-ar {
  text-align:right;
}
.epp-dcw {
  width:64px;
}
.epp-drh {
  height:20px;
}

table.epplus-table.ts-dark1 a{
  color:#ffffff;
}
table.epplus-table.ts-dark1 td:nth-child(4){
  text-align:right;
}
table.epplus-table.ts-dark1{
  background-color:#737373;
  color:#ffffff;
}
table.epplus-table.ts-dark1 thead{
  background-color:#000000;
  color:#ffffff;
  font-weight:bolder;
  border-bottom:medium solid #ffffff;
}
table.epplus-table.ts-dark1 tfoot{
  background-color:#262626;
  color:#ffffff;
  font-weight:bolder;
  border-top:medium solid #ffffff;
}
table.epplus-table.ts-dark1-column-stripes tbody tr td:nth-child(odd){
  background-color:#404040;
}
table.epplus-table.ts-dark1-row-stripes tbody tr:nth-child(odd){
  background-color:#404040;
}
table.epplus-table.ts-dark1-last-column tbody tr td:last-child{
  background-color:#404040;
  color:#ffffff;
  font-weight:bolder;
  border-left:medium solid #ffffff;
}
table.epplus-table.ts-dark1-first-column tbody tr td:first-child{
  background-color:#404040;
  color:#ffffff;
  font-weight:bolder;
  border-right:medium solid #ffffff;
}