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
Northern Ireland Benedict Rath 1919-08-05 Port Loyceton
Northern Ireland Kaycee Littel 1923-08-27 Wittingville
England Anastasia Kerluke 2021-09-26 Langworthbury
Wales Monty Ledner 1925-12-26 Kihnfurt
Northern Ireland Margie Nicolas 1973-09-01 Lake Tristonmouth
Wales Yazmin Leuschke 1984-09-08 Levishire
Wales Chandler Schmitt 2015-04-30 West Felicity
Northern Ireland Jaida Schimmel 1914-09-18 West Lisandro
England Cole Kutch 1963-09-30 Meganeshire
England Tyrel Green 2012-07-10 South Henriport
Northern Ireland Willy Crona 1967-03-02 Jakefort
England Brigitte Stracke 1932-07-31 Sporerton
England Danial Grant 2001-10-03 Lueilwitzberg
England Jonathan Swaniawski 1911-01-31 Shanahanstad
England Vernon Rowe 1940-04-26 South Candacestad
Wales Laurence Runolfsdottir 1925-03-24 New Lee
Northern Ireland Edison Quigley 2015-11-09 Lake Theaburgh
Scotland Weldon Bednar 1912-11-05 Sigurdchester
Wales Lavina Stokes 1917-05-12 Port Karianne
Wales Elliott Kuphal 1951-05-30 West Elisa
Scotland Edyth Bruen 2011-07-10 Lake Gretaberg
Scotland Jeffry Rice 1977-03-02 Koelpintown
Scotland Robb Kautzer 1921-03-23 New Breanne
Scotland Tracey Schamberger 1964-02-09 Rueckerborough
England Reta Casper 1985-10-19 Gretaside
Wales Deja Nienow 1949-12-14 New Garetthaven
Scotland Joel Gaylord 1961-12-06 Lake Raymundoview
Northern Ireland Alison Schuster 1979-09-28 East Bonnie
Northern Ireland Nico Durgan 1967-03-10 Turcotteport
Scotland Kaden Walker 1979-05-18 Lake Marielaburgh
Scotland Sylvester Lesch 1917-12-21 Port Darrell
Scotland Winifred Kuhic 2000-08-14 West Margretstad
Scotland Austen Daugherty 1992-08-19 Steveville
England Rey Medhurst 1952-03-29 Haleyville
Scotland Kiel Orn 1928-02-07 Rippinborough
Wales Chandler Zieme 1962-07-11 North Tremaineview
England Halie Stroman 1995-10-15 Stefanmouth
England Mathew Zemlak 2009-02-22 Millertown
Wales Jakayla Waelchi 2013-06-03 South Sonya
England Pablo Senger 2012-01-18 Port Brannon
Wales Aletha Heathcote 1999-06-20 East Vicentemouth
England Darrion Nikolaus 2004-09-27 West Hollis
Wales Antone Lemke 2002-11-01 Omarichester
Northern Ireland Shannon Gulgowski 2001-09-01 Karianeville
Wales Rita McLaughlin 1947-12-03 New Gregoria
Scotland Tre Rohan 1906-02-15 East Madelineshire
Scotland Keith Shields 1985-07-04 Elroyfort
Scotland Stanford Haag 1959-10-22 New Devante
England Zoe Gerlach 1966-08-19 West Theaburgh
Scotland Osvaldo Weissnat 1998-09-03 Aishabury

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">Northern Ireland</td>
      <td role="cell">Benedict</td>
      <td role="cell">Rath</td>
      <td data-value="-1590796800000" role="cell" class="epp-ar">1919-08-05</td>
      <td role="cell">Port Loyceton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kaycee</td>
      <td role="cell">Littel</td>
      <td data-value="-1462665600000" role="cell" class="epp-ar">1923-08-27</td>
      <td role="cell">Wittingville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Anastasia</td>
      <td role="cell">Kerluke</td>
      <td data-value="1632614400000" role="cell" class="epp-ar">2021-09-26</td>
      <td role="cell">Langworthbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Monty</td>
      <td role="cell">Ledner</td>
      <td data-value="-1389052800000" role="cell" class="epp-ar">1925-12-26</td>
      <td role="cell">Kihnfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Margie</td>
      <td role="cell">Nicolas</td>
      <td data-value="115689600000" role="cell" class="epp-ar">1973-09-01</td>
      <td role="cell">Lake Tristonmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Yazmin</td>
      <td role="cell">Leuschke</td>
      <td data-value="463449600000" role="cell" class="epp-ar">1984-09-08</td>
      <td role="cell">Levishire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Chandler</td>
      <td role="cell">Schmitt</td>
      <td data-value="1430352000000" role="cell" class="epp-ar">2015-04-30</td>
      <td role="cell">West Felicity</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jaida</td>
      <td role="cell">Schimmel</td>
      <td data-value="-1744761600000" role="cell" class="epp-ar">1914-09-18</td>
      <td role="cell">West Lisandro</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Cole</td>
      <td role="cell">Kutch</td>
      <td data-value="-197424000000" role="cell" class="epp-ar">1963-09-30</td>
      <td role="cell">Meganeshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Tyrel</td>
      <td role="cell">Green</td>
      <td data-value="1341878400000" role="cell" class="epp-ar">2012-07-10</td>
      <td role="cell">South Henriport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Willy</td>
      <td role="cell">Crona</td>
      <td data-value="-89510400000" role="cell" class="epp-ar">1967-03-02</td>
      <td role="cell">Jakefort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Brigitte</td>
      <td role="cell">Stracke</td>
      <td data-value="-1180915200000" role="cell" class="epp-ar">1932-07-31</td>
      <td role="cell">Sporerton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Danial</td>
      <td role="cell">Grant</td>
      <td data-value="1002067200000" role="cell" class="epp-ar">2001-10-03</td>
      <td role="cell">Lueilwitzberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jonathan</td>
      <td role="cell">Swaniawski</td>
      <td data-value="-1859328000000" role="cell" class="epp-ar">1911-01-31</td>
      <td role="cell">Shanahanstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Vernon</td>
      <td role="cell">Rowe</td>
      <td data-value="-936748800000" role="cell" class="epp-ar">1940-04-26</td>
      <td role="cell">South Candacestad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Laurence</td>
      <td role="cell">Runolfsdottir</td>
      <td data-value="-1412985600000" role="cell" class="epp-ar">1925-03-24</td>
      <td role="cell">New Lee</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Edison</td>
      <td role="cell">Quigley</td>
      <td data-value="1447027200000" role="cell" class="epp-ar">2015-11-09</td>
      <td role="cell">Lake Theaburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Weldon</td>
      <td role="cell">Bednar</td>
      <td data-value="-1803686400000" role="cell" class="epp-ar">1912-11-05</td>
      <td role="cell">Sigurdchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lavina</td>
      <td role="cell">Stokes</td>
      <td data-value="-1661212800000" role="cell" class="epp-ar">1917-05-12</td>
      <td role="cell">Port Karianne</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Elliott</td>
      <td role="cell">Kuphal</td>
      <td data-value="-586742400000" role="cell" class="epp-ar">1951-05-30</td>
      <td role="cell">West Elisa</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Edyth</td>
      <td role="cell">Bruen</td>
      <td data-value="1310256000000" role="cell" class="epp-ar">2011-07-10</td>
      <td role="cell">Lake Gretaberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jeffry</td>
      <td role="cell">Rice</td>
      <td data-value="226108800000" role="cell" class="epp-ar">1977-03-02</td>
      <td role="cell">Koelpintown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Robb</td>
      <td role="cell">Kautzer</td>
      <td data-value="-1539302400000" role="cell" class="epp-ar">1921-03-23</td>
      <td role="cell">New Breanne</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Tracey</td>
      <td role="cell">Schamberger</td>
      <td data-value="-186019200000" role="cell" class="epp-ar">1964-02-09</td>
      <td role="cell">Rueckerborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Reta</td>
      <td role="cell">Casper</td>
      <td data-value="498528000000" role="cell" class="epp-ar">1985-10-19</td>
      <td role="cell">Gretaside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Deja</td>
      <td role="cell">Nienow</td>
      <td data-value="-632707200000" role="cell" class="epp-ar">1949-12-14</td>
      <td role="cell">New Garetthaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Joel</td>
      <td role="cell">Gaylord</td>
      <td data-value="-254707200000" role="cell" class="epp-ar">1961-12-06</td>
      <td role="cell">Lake Raymundoview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Alison</td>
      <td role="cell">Schuster</td>
      <td data-value="307324800000" role="cell" class="epp-ar">1979-09-28</td>
      <td role="cell">East Bonnie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Nico</td>
      <td role="cell">Durgan</td>
      <td data-value="-88819200000" role="cell" class="epp-ar">1967-03-10</td>
      <td role="cell">Turcotteport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kaden</td>
      <td role="cell">Walker</td>
      <td data-value="295833600000" role="cell" class="epp-ar">1979-05-18</td>
      <td role="cell">Lake Marielaburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Sylvester</td>
      <td role="cell">Lesch</td>
      <td data-value="-1641945600000" role="cell" class="epp-ar">1917-12-21</td>
      <td role="cell">Port Darrell</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Winifred</td>
      <td role="cell">Kuhic</td>
      <td data-value="966211200000" role="cell" class="epp-ar">2000-08-14</td>
      <td role="cell">West Margretstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Austen</td>
      <td role="cell">Daugherty</td>
      <td data-value="714182400000" role="cell" class="epp-ar">1992-08-19</td>
      <td role="cell">Steveville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Rey</td>
      <td role="cell">Medhurst</td>
      <td data-value="-560476800000" role="cell" class="epp-ar">1952-03-29</td>
      <td role="cell">Haleyville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kiel</td>
      <td role="cell">Orn</td>
      <td data-value="-1322265600000" role="cell" class="epp-ar">1928-02-07</td>
      <td role="cell">Rippinborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Chandler</td>
      <td role="cell">Zieme</td>
      <td data-value="-235958400000" role="cell" class="epp-ar">1962-07-11</td>
      <td role="cell">North Tremaineview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Halie</td>
      <td role="cell">Stroman</td>
      <td data-value="813715200000" role="cell" class="epp-ar">1995-10-15</td>
      <td role="cell">Stefanmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Mathew</td>
      <td role="cell">Zemlak</td>
      <td data-value="1235260800000" role="cell" class="epp-ar">2009-02-22</td>
      <td role="cell">Millertown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jakayla</td>
      <td role="cell">Waelchi</td>
      <td data-value="1370217600000" role="cell" class="epp-ar">2013-06-03</td>
      <td role="cell">South Sonya</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Pablo</td>
      <td role="cell">Senger</td>
      <td data-value="1326844800000" role="cell" class="epp-ar">2012-01-18</td>
      <td role="cell">Port Brannon</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Aletha</td>
      <td role="cell">Heathcote</td>
      <td data-value="929836800000" role="cell" class="epp-ar">1999-06-20</td>
      <td role="cell">East Vicentemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Darrion</td>
      <td role="cell">Nikolaus</td>
      <td data-value="1096243200000" role="cell" class="epp-ar">2004-09-27</td>
      <td role="cell">West Hollis</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Antone</td>
      <td role="cell">Lemke</td>
      <td data-value="1036108800000" role="cell" class="epp-ar">2002-11-01</td>
      <td role="cell">Omarichester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Shannon</td>
      <td role="cell">Gulgowski</td>
      <td data-value="999302400000" role="cell" class="epp-ar">2001-09-01</td>
      <td role="cell">Karianeville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Rita</td>
      <td role="cell">McLaughlin</td>
      <td data-value="-696816000000" role="cell" class="epp-ar">1947-12-03</td>
      <td role="cell">New Gregoria</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Tre</td>
      <td role="cell">Rohan</td>
      <td data-value="-2015798400000" role="cell" class="epp-ar">1906-02-15</td>
      <td role="cell">East Madelineshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Keith</td>
      <td role="cell">Shields</td>
      <td data-value="489283200000" role="cell" class="epp-ar">1985-07-04</td>
      <td role="cell">Elroyfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Stanford</td>
      <td role="cell">Haag</td>
      <td data-value="-321753600000" role="cell" class="epp-ar">1959-10-22</td>
      <td role="cell">New Devante</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Zoe</td>
      <td role="cell">Gerlach</td>
      <td data-value="-106358400000" role="cell" class="epp-ar">1966-08-19</td>
      <td role="cell">West Theaburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Osvaldo</td>
      <td role="cell">Weissnat</td>
      <td data-value="904780800000" role="cell" class="epp-ar">1998-09-03</td>
      <td role="cell">Aishabury</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;
}