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 Lukas Pollich 1979-09-08 East Maxwell
Northern Ireland Antwon Reynolds 1942-07-01 Sebastianfurt
Northern Ireland Theron Friesen 1999-10-03 East Hassie
England Maximilian Davis 1971-12-23 Rogeliomouth
Scotland Orion Schuster 1913-03-25 West Frederiqueside
England Hilbert Walsh 1966-07-22 Lake Agustinaville
Northern Ireland Cristobal Koss 1938-02-15 Zemlakview
England Margarette Yundt 1989-04-28 Austynfort
England Grayce Runte 2010-10-01 East Mavis
Northern Ireland Stanton Carroll 1970-05-26 Fritschville
England Alfonzo Armstrong 1979-07-18 New Raphaeltown
England Antwan Nikolaus 1921-01-04 Fletaton
Wales Fred Cummerata 1991-05-11 West Mandyfurt
England Gertrude Schuppe 1945-09-17 Genesisfurt
Northern Ireland Hardy Gerlach 2013-08-09 New Lavonshire
England Barrett Shanahan 1955-11-24 Ileneton
Wales Catherine Nienow 1966-07-06 New Gerardoton
England Evie Walter 2011-07-01 Vergietown
Scotland Estel Harvey 1996-10-15 Turcottemouth
Northern Ireland Lucinda Mante 1991-07-06 New Helenefurt
Northern Ireland Meggie Eichmann 1947-06-09 Danielleland
Scotland Zane Sauer 2001-01-03 Hoegermouth
Scotland Tia Mraz 1968-05-17 Heidenreichville
England Irma Hand 1997-05-03 Lake Rahul
Scotland Brigitte Green 1973-04-14 Lizzieview
Scotland Bethel Johnston 1976-12-07 East Julian
Northern Ireland Rickie Bogan 1906-09-04 Lake Urban
Scotland Effie Quitzon 2012-08-15 Gertrudeberg
England Hailee Jacobson 1997-08-07 East Kendrick
England Lavinia Jaskolski 1937-01-03 East Williemouth
England Fae Becker 2003-04-28 Cruzport
Scotland Theresia Gerhold 1989-04-01 Josiannebury
Wales Brooklyn Simonis 1947-04-11 East Vernview
Wales Dominique Weber 1939-05-11 East Rylanland
Wales Chaim Zboncak 2020-08-17 Port Lonieport
Wales Reese Greenfelder 1969-09-08 Aubreeview
Scotland Roslyn Flatley 2008-12-03 Leonardshire
England Nina Maggio 1993-12-12 Barrowsfort
Scotland Katelyn Renner 1924-08-18 East Kayleighport
Wales Beverly Green 1941-11-08 New Gloriaview
England Margret Hartmann 2023-12-12 Lacychester
England Eugenia Weimann 2004-11-26 Hesselland
Scotland Bud Mayert 2004-09-12 North Orionhaven
England Adelbert Tromp 1940-10-30 New Wandachester
Scotland Rafaela Cartwright 1911-07-14 Bartonburgh
Wales Gilda Greenholt 1978-01-22 West Sierra
Wales Theodora Mante 1997-05-26 Keshaunshire
Northern Ireland Jany Wisozk 1964-05-29 New Princess
Wales August Schiller 2010-06-18 Angieside
England Elta Buckridge 1977-12-28 Bogisichfort

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">Lukas</td>
      <td role="cell">Pollich</td>
      <td data-value="305596800000" role="cell" class="epp-ar">1979-09-08</td>
      <td role="cell">East Maxwell</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Antwon</td>
      <td role="cell">Reynolds</td>
      <td data-value="-867974400000" role="cell" class="epp-ar">1942-07-01</td>
      <td role="cell">Sebastianfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Theron</td>
      <td role="cell">Friesen</td>
      <td data-value="938908800000" role="cell" class="epp-ar">1999-10-03</td>
      <td role="cell">East Hassie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Maximilian</td>
      <td role="cell">Davis</td>
      <td data-value="62294400000" role="cell" class="epp-ar">1971-12-23</td>
      <td role="cell">Rogeliomouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Orion</td>
      <td role="cell">Schuster</td>
      <td data-value="-1791590400000" role="cell" class="epp-ar">1913-03-25</td>
      <td role="cell">West Frederiqueside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Hilbert</td>
      <td role="cell">Walsh</td>
      <td data-value="-108777600000" role="cell" class="epp-ar">1966-07-22</td>
      <td role="cell">Lake Agustinaville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Cristobal</td>
      <td role="cell">Koss</td>
      <td data-value="-1005955200000" role="cell" class="epp-ar">1938-02-15</td>
      <td role="cell">Zemlakview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Margarette</td>
      <td role="cell">Yundt</td>
      <td data-value="609724800000" role="cell" class="epp-ar">1989-04-28</td>
      <td role="cell">Austynfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Grayce</td>
      <td role="cell">Runte</td>
      <td data-value="1285891200000" role="cell" class="epp-ar">2010-10-01</td>
      <td role="cell">East Mavis</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Stanton</td>
      <td role="cell">Carroll</td>
      <td data-value="12528000000" role="cell" class="epp-ar">1970-05-26</td>
      <td role="cell">Fritschville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alfonzo</td>
      <td role="cell">Armstrong</td>
      <td data-value="301104000000" role="cell" class="epp-ar">1979-07-18</td>
      <td role="cell">New Raphaeltown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Antwan</td>
      <td role="cell">Nikolaus</td>
      <td data-value="-1546041600000" role="cell" class="epp-ar">1921-01-04</td>
      <td role="cell">Fletaton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Fred</td>
      <td role="cell">Cummerata</td>
      <td data-value="673920000000" role="cell" class="epp-ar">1991-05-11</td>
      <td role="cell">West Mandyfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Gertrude</td>
      <td role="cell">Schuppe</td>
      <td data-value="-766540800000" role="cell" class="epp-ar">1945-09-17</td>
      <td role="cell">Genesisfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Hardy</td>
      <td role="cell">Gerlach</td>
      <td data-value="1376006400000" role="cell" class="epp-ar">2013-08-09</td>
      <td role="cell">New Lavonshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Barrett</td>
      <td role="cell">Shanahan</td>
      <td data-value="-445132800000" role="cell" class="epp-ar">1955-11-24</td>
      <td role="cell">Ileneton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Catherine</td>
      <td role="cell">Nienow</td>
      <td data-value="-110160000000" role="cell" class="epp-ar">1966-07-06</td>
      <td role="cell">New Gerardoton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Evie</td>
      <td role="cell">Walter</td>
      <td data-value="1309478400000" role="cell" class="epp-ar">2011-07-01</td>
      <td role="cell">Vergietown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Estel</td>
      <td role="cell">Harvey</td>
      <td data-value="845337600000" role="cell" class="epp-ar">1996-10-15</td>
      <td role="cell">Turcottemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Lucinda</td>
      <td role="cell">Mante</td>
      <td data-value="678758400000" role="cell" class="epp-ar">1991-07-06</td>
      <td role="cell">New Helenefurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Meggie</td>
      <td role="cell">Eichmann</td>
      <td data-value="-712108800000" role="cell" class="epp-ar">1947-06-09</td>
      <td role="cell">Danielleland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Zane</td>
      <td role="cell">Sauer</td>
      <td data-value="978480000000" role="cell" class="epp-ar">2001-01-03</td>
      <td role="cell">Hoegermouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Tia</td>
      <td role="cell">Mraz</td>
      <td data-value="-51321600000" role="cell" class="epp-ar">1968-05-17</td>
      <td role="cell">Heidenreichville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Irma</td>
      <td role="cell">Hand</td>
      <td data-value="862617600000" role="cell" class="epp-ar">1997-05-03</td>
      <td role="cell">Lake Rahul</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Brigitte</td>
      <td role="cell">Green</td>
      <td data-value="103593600000" role="cell" class="epp-ar">1973-04-14</td>
      <td role="cell">Lizzieview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Bethel</td>
      <td role="cell">Johnston</td>
      <td data-value="218764800000" role="cell" class="epp-ar">1976-12-07</td>
      <td role="cell">East Julian</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Rickie</td>
      <td role="cell">Bogan</td>
      <td data-value="-1998432000000" role="cell" class="epp-ar">1906-09-04</td>
      <td role="cell">Lake Urban</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Effie</td>
      <td role="cell">Quitzon</td>
      <td data-value="1344988800000" role="cell" class="epp-ar">2012-08-15</td>
      <td role="cell">Gertrudeberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Hailee</td>
      <td role="cell">Jacobson</td>
      <td data-value="870912000000" role="cell" class="epp-ar">1997-08-07</td>
      <td role="cell">East Kendrick</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lavinia</td>
      <td role="cell">Jaskolski</td>
      <td data-value="-1041206400000" role="cell" class="epp-ar">1937-01-03</td>
      <td role="cell">East Williemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Fae</td>
      <td role="cell">Becker</td>
      <td data-value="1051488000000" role="cell" class="epp-ar">2003-04-28</td>
      <td role="cell">Cruzport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Theresia</td>
      <td role="cell">Gerhold</td>
      <td data-value="607392000000" role="cell" class="epp-ar">1989-04-01</td>
      <td role="cell">Josiannebury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Brooklyn</td>
      <td role="cell">Simonis</td>
      <td data-value="-717206400000" role="cell" class="epp-ar">1947-04-11</td>
      <td role="cell">East Vernview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Dominique</td>
      <td role="cell">Weber</td>
      <td data-value="-967075200000" role="cell" class="epp-ar">1939-05-11</td>
      <td role="cell">East Rylanland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Chaim</td>
      <td role="cell">Zboncak</td>
      <td data-value="1597622400000" role="cell" class="epp-ar">2020-08-17</td>
      <td role="cell">Port Lonieport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Reese</td>
      <td role="cell">Greenfelder</td>
      <td data-value="-9936000000" role="cell" class="epp-ar">1969-09-08</td>
      <td role="cell">Aubreeview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Roslyn</td>
      <td role="cell">Flatley</td>
      <td data-value="1228262400000" role="cell" class="epp-ar">2008-12-03</td>
      <td role="cell">Leonardshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Nina</td>
      <td role="cell">Maggio</td>
      <td data-value="755654400000" role="cell" class="epp-ar">1993-12-12</td>
      <td role="cell">Barrowsfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Katelyn</td>
      <td role="cell">Renner</td>
      <td data-value="-1431820800000" role="cell" class="epp-ar">1924-08-18</td>
      <td role="cell">East Kayleighport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Beverly</td>
      <td role="cell">Green</td>
      <td data-value="-888278400000" role="cell" class="epp-ar">1941-11-08</td>
      <td role="cell">New Gloriaview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Margret</td>
      <td role="cell">Hartmann</td>
      <td data-value="1702339200000" role="cell" class="epp-ar">2023-12-12</td>
      <td role="cell">Lacychester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Eugenia</td>
      <td role="cell">Weimann</td>
      <td data-value="1101427200000" role="cell" class="epp-ar">2004-11-26</td>
      <td role="cell">Hesselland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Bud</td>
      <td role="cell">Mayert</td>
      <td data-value="1094947200000" role="cell" class="epp-ar">2004-09-12</td>
      <td role="cell">North Orionhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Adelbert</td>
      <td role="cell">Tromp</td>
      <td data-value="-920592000000" role="cell" class="epp-ar">1940-10-30</td>
      <td role="cell">New Wandachester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Rafaela</td>
      <td role="cell">Cartwright</td>
      <td data-value="-1845158400000" role="cell" class="epp-ar">1911-07-14</td>
      <td role="cell">Bartonburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Gilda</td>
      <td role="cell">Greenholt</td>
      <td data-value="254275200000" role="cell" class="epp-ar">1978-01-22</td>
      <td role="cell">West Sierra</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Theodora</td>
      <td role="cell">Mante</td>
      <td data-value="864604800000" role="cell" class="epp-ar">1997-05-26</td>
      <td role="cell">Keshaunshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jany</td>
      <td role="cell">Wisozk</td>
      <td data-value="-176515200000" role="cell" class="epp-ar">1964-05-29</td>
      <td role="cell">New Princess</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">August</td>
      <td role="cell">Schiller</td>
      <td data-value="1276819200000" role="cell" class="epp-ar">2010-06-18</td>
      <td role="cell">Angieside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Elta</td>
      <td role="cell">Buckridge</td>
      <td data-value="252115200000" role="cell" class="epp-ar">1977-12-28</td>
      <td role="cell">Bogisichfort</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;
}