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
Scotland Ladarius Mayert 1935-10-04 West Trenthaven
England Alden Prosacco 1981-08-18 East Penelope
England Marcella Reichert 2018-08-24 West Elisabethfurt
Northern Ireland Cathryn Huel 1963-07-19 Satterfieldville
Northern Ireland Kobe Fay 1986-01-29 Lake Justen
Scotland Michaela Emard 1937-09-04 Klingburgh
Scotland Jeffery Heaney 1942-06-11 Valentinafurt
Scotland Casper Koepp 1988-12-16 South Sarahhaven
Northern Ireland Estefania Dibbert 1915-11-30 South Amariside
Scotland Shaylee Moore 1991-11-09 South Jeanette
England Jaeden Conroy 1953-01-25 South Ardellaside
Wales Buster O'Conner 2001-10-01 East Adahshire
Northern Ireland Jessica Glover 1975-01-20 Jordyborough
Wales Esperanza Terry 2019-08-19 Heathcotetown
Wales Jany Ward 1989-05-02 Lemkehaven
Wales Elva Senger 1975-04-03 Denisview
Wales Eleanora Wisozk 2001-01-17 Powlowskifort
Scotland Ernesto Konopelski 1956-08-16 East Clevelandside
Northern Ireland Gianni Cronin 1953-04-21 Lake Darrin
England Colt Tremblay 1963-04-27 New Uniqueberg
Northern Ireland Keaton Windler 1957-10-31 North Yesseniahaven
Wales Gene Hansen 1955-09-28 West Mosheside
England Annamae Schulist 1973-06-28 North Dorisshire
England Quinten Conn 1963-10-24 Port Mekhi
England Benjamin Rolfson 1963-03-31 Marcohaven
England Alba Feeney 1940-10-15 Lake Deondre
England Luther Collins 1911-02-11 Kunzemouth
Scotland Austen Runolfsson 1924-11-10 New Hilarioview
England Larissa Shields 1974-03-26 Rosamouth
Wales Nick Vandervort 1963-03-31 Weberhaven
Wales Lizzie Johnson 2008-12-08 Ankundingfurt
Wales Thaddeus Lebsack 1982-02-06 Muellerfurt
Scotland Felipa Kozey 1922-05-20 Balistrerimouth
Scotland Addison Hessel 1939-05-16 North Jeramyfurt
Northern Ireland Ryan Brekke 1963-05-19 Roobtown
England Maxine Hayes 1948-07-14 Dickensmouth
Wales Aubree Sauer 1995-05-21 Nikolausburgh
Northern Ireland Patsy Lind 1947-09-04 West Zane
Northern Ireland Danika Reilly 2014-03-16 New Major
Northern Ireland Jeremy Dibbert 1955-09-27 Dibbertview
England Naomi Heathcote 1928-08-23 Pourosfurt
Scotland Delphine Gerhold 1981-08-08 Buckridgeville
Wales Virginia Lakin 1955-04-10 Saultown
Wales Anastasia Labadie 1964-06-06 South Anissamouth
Wales Yolanda Witting 1997-11-09 Prudenceland
Northern Ireland Roma O'Conner 1998-01-02 Mannhaven
Northern Ireland Dariana Kris 1945-08-27 Port Aminaview
England Lillian Kilback 1917-02-06 East Sigrid
England Benjamin Pollich 1954-09-21 New Krista
Scotland Teagan Graham 1977-04-25 O'Haraside

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">Scotland</td>
      <td role="cell">Ladarius</td>
      <td role="cell">Mayert</td>
      <td data-value="-1080691200000" role="cell" class="epp-ar">1935-10-04</td>
      <td role="cell">West Trenthaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alden</td>
      <td role="cell">Prosacco</td>
      <td data-value="366940800000" role="cell" class="epp-ar">1981-08-18</td>
      <td role="cell">East Penelope</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Marcella</td>
      <td role="cell">Reichert</td>
      <td data-value="1535068800000" role="cell" class="epp-ar">2018-08-24</td>
      <td role="cell">West Elisabethfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Cathryn</td>
      <td role="cell">Huel</td>
      <td data-value="-203731200000" role="cell" class="epp-ar">1963-07-19</td>
      <td role="cell">Satterfieldville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kobe</td>
      <td role="cell">Fay</td>
      <td data-value="507340800000" role="cell" class="epp-ar">1986-01-29</td>
      <td role="cell">Lake Justen</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Michaela</td>
      <td role="cell">Emard</td>
      <td data-value="-1020124800000" role="cell" class="epp-ar">1937-09-04</td>
      <td role="cell">Klingburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jeffery</td>
      <td role="cell">Heaney</td>
      <td data-value="-869702400000" role="cell" class="epp-ar">1942-06-11</td>
      <td role="cell">Valentinafurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Casper</td>
      <td role="cell">Koepp</td>
      <td data-value="598233600000" role="cell" class="epp-ar">1988-12-16</td>
      <td role="cell">South Sarahhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Estefania</td>
      <td role="cell">Dibbert</td>
      <td data-value="-1706918400000" role="cell" class="epp-ar">1915-11-30</td>
      <td role="cell">South Amariside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Shaylee</td>
      <td role="cell">Moore</td>
      <td data-value="689644800000" role="cell" class="epp-ar">1991-11-09</td>
      <td role="cell">South Jeanette</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jaeden</td>
      <td role="cell">Conroy</td>
      <td data-value="-534384000000" role="cell" class="epp-ar">1953-01-25</td>
      <td role="cell">South Ardellaside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Buster</td>
      <td role="cell">O'Conner</td>
      <td data-value="1001894400000" role="cell" class="epp-ar">2001-10-01</td>
      <td role="cell">East Adahshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jessica</td>
      <td role="cell">Glover</td>
      <td data-value="159408000000" role="cell" class="epp-ar">1975-01-20</td>
      <td role="cell">Jordyborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Esperanza</td>
      <td role="cell">Terry</td>
      <td data-value="1566172800000" role="cell" class="epp-ar">2019-08-19</td>
      <td role="cell">Heathcotetown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jany</td>
      <td role="cell">Ward</td>
      <td data-value="610070400000" role="cell" class="epp-ar">1989-05-02</td>
      <td role="cell">Lemkehaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Elva</td>
      <td role="cell">Senger</td>
      <td data-value="165715200000" role="cell" class="epp-ar">1975-04-03</td>
      <td role="cell">Denisview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Eleanora</td>
      <td role="cell">Wisozk</td>
      <td data-value="979689600000" role="cell" class="epp-ar">2001-01-17</td>
      <td role="cell">Powlowskifort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Ernesto</td>
      <td role="cell">Konopelski</td>
      <td data-value="-422150400000" role="cell" class="epp-ar">1956-08-16</td>
      <td role="cell">East Clevelandside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Gianni</td>
      <td role="cell">Cronin</td>
      <td data-value="-526953600000" role="cell" class="epp-ar">1953-04-21</td>
      <td role="cell">Lake Darrin</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Colt</td>
      <td role="cell">Tremblay</td>
      <td data-value="-210902400000" role="cell" class="epp-ar">1963-04-27</td>
      <td role="cell">New Uniqueberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Keaton</td>
      <td role="cell">Windler</td>
      <td data-value="-384048000000" role="cell" class="epp-ar">1957-10-31</td>
      <td role="cell">North Yesseniahaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Gene</td>
      <td role="cell">Hansen</td>
      <td data-value="-450057600000" role="cell" class="epp-ar">1955-09-28</td>
      <td role="cell">West Mosheside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Annamae</td>
      <td role="cell">Schulist</td>
      <td data-value="110073600000" role="cell" class="epp-ar">1973-06-28</td>
      <td role="cell">North Dorisshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Quinten</td>
      <td role="cell">Conn</td>
      <td data-value="-195350400000" role="cell" class="epp-ar">1963-10-24</td>
      <td role="cell">Port Mekhi</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Benjamin</td>
      <td role="cell">Rolfson</td>
      <td data-value="-213235200000" role="cell" class="epp-ar">1963-03-31</td>
      <td role="cell">Marcohaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alba</td>
      <td role="cell">Feeney</td>
      <td data-value="-921888000000" role="cell" class="epp-ar">1940-10-15</td>
      <td role="cell">Lake Deondre</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Luther</td>
      <td role="cell">Collins</td>
      <td data-value="-1858377600000" role="cell" class="epp-ar">1911-02-11</td>
      <td role="cell">Kunzemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Austen</td>
      <td role="cell">Runolfsson</td>
      <td data-value="-1424563200000" role="cell" class="epp-ar">1924-11-10</td>
      <td role="cell">New Hilarioview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Larissa</td>
      <td role="cell">Shields</td>
      <td data-value="133488000000" role="cell" class="epp-ar">1974-03-26</td>
      <td role="cell">Rosamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Nick</td>
      <td role="cell">Vandervort</td>
      <td data-value="-213235200000" role="cell" class="epp-ar">1963-03-31</td>
      <td role="cell">Weberhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lizzie</td>
      <td role="cell">Johnson</td>
      <td data-value="1228694400000" role="cell" class="epp-ar">2008-12-08</td>
      <td role="cell">Ankundingfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Thaddeus</td>
      <td role="cell">Lebsack</td>
      <td data-value="381801600000" role="cell" class="epp-ar">1982-02-06</td>
      <td role="cell">Muellerfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Felipa</td>
      <td role="cell">Kozey</td>
      <td data-value="-1502755200000" role="cell" class="epp-ar">1922-05-20</td>
      <td role="cell">Balistrerimouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Addison</td>
      <td role="cell">Hessel</td>
      <td data-value="-966643200000" role="cell" class="epp-ar">1939-05-16</td>
      <td role="cell">North Jeramyfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Ryan</td>
      <td role="cell">Brekke</td>
      <td data-value="-209001600000" role="cell" class="epp-ar">1963-05-19</td>
      <td role="cell">Roobtown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Maxine</td>
      <td role="cell">Hayes</td>
      <td data-value="-677462400000" role="cell" class="epp-ar">1948-07-14</td>
      <td role="cell">Dickensmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Aubree</td>
      <td role="cell">Sauer</td>
      <td data-value="801014400000" role="cell" class="epp-ar">1995-05-21</td>
      <td role="cell">Nikolausburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Patsy</td>
      <td role="cell">Lind</td>
      <td data-value="-704592000000" role="cell" class="epp-ar">1947-09-04</td>
      <td role="cell">West Zane</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Danika</td>
      <td role="cell">Reilly</td>
      <td data-value="1394928000000" role="cell" class="epp-ar">2014-03-16</td>
      <td role="cell">New Major</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jeremy</td>
      <td role="cell">Dibbert</td>
      <td data-value="-450144000000" role="cell" class="epp-ar">1955-09-27</td>
      <td role="cell">Dibbertview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Naomi</td>
      <td role="cell">Heathcote</td>
      <td data-value="-1305158400000" role="cell" class="epp-ar">1928-08-23</td>
      <td role="cell">Pourosfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Delphine</td>
      <td role="cell">Gerhold</td>
      <td data-value="366076800000" role="cell" class="epp-ar">1981-08-08</td>
      <td role="cell">Buckridgeville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Virginia</td>
      <td role="cell">Lakin</td>
      <td data-value="-464832000000" role="cell" class="epp-ar">1955-04-10</td>
      <td role="cell">Saultown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Anastasia</td>
      <td role="cell">Labadie</td>
      <td data-value="-175824000000" role="cell" class="epp-ar">1964-06-06</td>
      <td role="cell">South Anissamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Yolanda</td>
      <td role="cell">Witting</td>
      <td data-value="879033600000" role="cell" class="epp-ar">1997-11-09</td>
      <td role="cell">Prudenceland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Roma</td>
      <td role="cell">O'Conner</td>
      <td data-value="883699200000" role="cell" class="epp-ar">1998-01-02</td>
      <td role="cell">Mannhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Dariana</td>
      <td role="cell">Kris</td>
      <td data-value="-768355200000" role="cell" class="epp-ar">1945-08-27</td>
      <td role="cell">Port Aminaview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lillian</td>
      <td role="cell">Kilback</td>
      <td data-value="-1669420800000" role="cell" class="epp-ar">1917-02-06</td>
      <td role="cell">East Sigrid</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Benjamin</td>
      <td role="cell">Pollich</td>
      <td data-value="-482198400000" role="cell" class="epp-ar">1954-09-21</td>
      <td role="cell">New Krista</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Teagan</td>
      <td role="cell">Graham</td>
      <td data-value="230774400000" role="cell" class="epp-ar">1977-04-25</td>
      <td role="cell">O'Haraside</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;
}