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 Eloy Strosin 1905-08-18 Kshlerinborough
Scotland Regan Brekke 1930-08-27 West Anissa
England Precious Grant 1935-10-01 South Addisonville
Northern Ireland Ole Swaniawski 1964-02-08 Lake Americo
Scotland Waylon Zieme 2003-03-06 South Tommietown
Wales Brando Jones 1958-01-08 Giovanniland
Scotland Kathleen Reichert 1964-01-24 North Ivah
Scotland Mitchel Sauer 1951-05-10 East Presleyland
Northern Ireland Onie Langosh 1991-05-04 Lake Cole
Wales Steve Skiles 1949-07-25 North Maxtown
Northern Ireland Greg Howe 2013-08-01 New Jasonton
Northern Ireland Kianna Larkin 1977-12-29 Harberborough
Wales Mose Kub 1915-04-09 Rosalindfurt
Northern Ireland Uriah Schamberger 1959-05-17 Lake Summerton
Wales Cristian Jones 1958-03-21 South Elvera
Wales Sage Thompson 1957-05-17 Mathewmouth
Wales Esmeralda Greenfelder 1991-04-24 South Paige
Scotland Quinn Bednar 2010-12-10 New Alphonso
Wales Hiram Grant 1948-09-26 New Sabrinamouth
Northern Ireland Zackery Langworth 1926-06-06 Vandervortfort
England Joaquin Herman 2009-07-17 Hayesside
Wales Karolann Tromp 2013-11-21 Lake Britney
Northern Ireland Ray Macejkovic 1951-10-10 East Carafort
England Katlynn Hilpert 1990-10-09 Jordiville
England Loren Kuhlman 1964-08-27 Lake Rosemaryborough
Wales Pamela Leuschke 1964-06-15 North Joanieburgh
Scotland Garry Zulauf 2018-08-30 Gerdaburgh
Northern Ireland Carmel Kertzmann 1950-05-21 Maggiostad
Northern Ireland Max Gutkowski 1963-10-03 Stiedemannview
Wales Keira Treutel 1916-05-12 New Marina
Wales Carolyn Romaguera 1910-03-05 Marlenland
Northern Ireland Ethyl Harris 1942-12-25 West Darrin
Wales Fredy Rogahn 1964-06-18 Port Derick
Scotland Heidi Carroll 1983-06-21 South Pansymouth
Northern Ireland Eileen Borer 1957-01-10 West Arely
Northern Ireland Adrianna Johnson 1964-05-16 Runtemouth
England Donavon Jakubowski 1999-07-31 New Madaline
England Ephraim Wyman 2021-09-21 North Maryjaneborough
Wales Karli Effertz 1959-07-16 North Aracely
Northern Ireland Molly Jerde 1960-07-15 Sonnymouth
Scotland Annabel Anderson 2014-06-04 South Adityaland
Scotland Kaitlyn Roberts 2025-08-07 West Deloresshire
Scotland Gertrude Bruen 1952-02-21 West Benton
Scotland Loyce Nader 1949-07-21 East Marjorychester
Northern Ireland Myrl Wintheiser 1917-09-13 North Enosshire
Northern Ireland Deanna Halvorson 1947-07-30 Faymouth
Scotland Danial Kub 2015-03-31 North Rudy
Northern Ireland Melyna Lindgren 1922-06-30 Jakubowskiburgh
Wales Jazlyn Trantow 1964-04-14 North Vaughnburgh
Northern Ireland Tre Littel 1963-01-16 East Lizeth

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">Eloy</td>
      <td role="cell">Strosin</td>
      <td data-value="-2031436800000" role="cell" class="epp-ar">1905-08-18</td>
      <td role="cell">Kshlerinborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Regan</td>
      <td role="cell">Brekke</td>
      <td data-value="-1241740800000" role="cell" class="epp-ar">1930-08-27</td>
      <td role="cell">West Anissa</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Precious</td>
      <td role="cell">Grant</td>
      <td data-value="-1080950400000" role="cell" class="epp-ar">1935-10-01</td>
      <td role="cell">South Addisonville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Ole</td>
      <td role="cell">Swaniawski</td>
      <td data-value="-186105600000" role="cell" class="epp-ar">1964-02-08</td>
      <td role="cell">Lake Americo</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Waylon</td>
      <td role="cell">Zieme</td>
      <td data-value="1046908800000" role="cell" class="epp-ar">2003-03-06</td>
      <td role="cell">South Tommietown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Brando</td>
      <td role="cell">Jones</td>
      <td data-value="-378086400000" role="cell" class="epp-ar">1958-01-08</td>
      <td role="cell">Giovanniland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kathleen</td>
      <td role="cell">Reichert</td>
      <td data-value="-187401600000" role="cell" class="epp-ar">1964-01-24</td>
      <td role="cell">North Ivah</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Mitchel</td>
      <td role="cell">Sauer</td>
      <td data-value="-588470400000" role="cell" class="epp-ar">1951-05-10</td>
      <td role="cell">East Presleyland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Onie</td>
      <td role="cell">Langosh</td>
      <td data-value="673315200000" role="cell" class="epp-ar">1991-05-04</td>
      <td role="cell">Lake Cole</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Steve</td>
      <td role="cell">Skiles</td>
      <td data-value="-644976000000" role="cell" class="epp-ar">1949-07-25</td>
      <td role="cell">North Maxtown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Greg</td>
      <td role="cell">Howe</td>
      <td data-value="1375315200000" role="cell" class="epp-ar">2013-08-01</td>
      <td role="cell">New Jasonton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kianna</td>
      <td role="cell">Larkin</td>
      <td data-value="252201600000" role="cell" class="epp-ar">1977-12-29</td>
      <td role="cell">Harberborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Mose</td>
      <td role="cell">Kub</td>
      <td data-value="-1727222400000" role="cell" class="epp-ar">1915-04-09</td>
      <td role="cell">Rosalindfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Uriah</td>
      <td role="cell">Schamberger</td>
      <td data-value="-335404800000" role="cell" class="epp-ar">1959-05-17</td>
      <td role="cell">Lake Summerton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Cristian</td>
      <td role="cell">Jones</td>
      <td data-value="-371865600000" role="cell" class="epp-ar">1958-03-21</td>
      <td role="cell">South Elvera</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Sage</td>
      <td role="cell">Thompson</td>
      <td data-value="-398476800000" role="cell" class="epp-ar">1957-05-17</td>
      <td role="cell">Mathewmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Esmeralda</td>
      <td role="cell">Greenfelder</td>
      <td data-value="672451200000" role="cell" class="epp-ar">1991-04-24</td>
      <td role="cell">South Paige</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Quinn</td>
      <td role="cell">Bednar</td>
      <td data-value="1291939200000" role="cell" class="epp-ar">2010-12-10</td>
      <td role="cell">New Alphonso</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Hiram</td>
      <td role="cell">Grant</td>
      <td data-value="-671068800000" role="cell" class="epp-ar">1948-09-26</td>
      <td role="cell">New Sabrinamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Zackery</td>
      <td role="cell">Langworth</td>
      <td data-value="-1375056000000" role="cell" class="epp-ar">1926-06-06</td>
      <td role="cell">Vandervortfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Joaquin</td>
      <td role="cell">Herman</td>
      <td data-value="1247788800000" role="cell" class="epp-ar">2009-07-17</td>
      <td role="cell">Hayesside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Karolann</td>
      <td role="cell">Tromp</td>
      <td data-value="1384992000000" role="cell" class="epp-ar">2013-11-21</td>
      <td role="cell">Lake Britney</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Ray</td>
      <td role="cell">Macejkovic</td>
      <td data-value="-575251200000" role="cell" class="epp-ar">1951-10-10</td>
      <td role="cell">East Carafort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Katlynn</td>
      <td role="cell">Hilpert</td>
      <td data-value="655430400000" role="cell" class="epp-ar">1990-10-09</td>
      <td role="cell">Jordiville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Loren</td>
      <td role="cell">Kuhlman</td>
      <td data-value="-168739200000" role="cell" class="epp-ar">1964-08-27</td>
      <td role="cell">Lake Rosemaryborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Pamela</td>
      <td role="cell">Leuschke</td>
      <td data-value="-175046400000" role="cell" class="epp-ar">1964-06-15</td>
      <td role="cell">North Joanieburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Garry</td>
      <td role="cell">Zulauf</td>
      <td data-value="1535587200000" role="cell" class="epp-ar">2018-08-30</td>
      <td role="cell">Gerdaburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Carmel</td>
      <td role="cell">Kertzmann</td>
      <td data-value="-619056000000" role="cell" class="epp-ar">1950-05-21</td>
      <td role="cell">Maggiostad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Max</td>
      <td role="cell">Gutkowski</td>
      <td data-value="-197164800000" role="cell" class="epp-ar">1963-10-03</td>
      <td role="cell">Stiedemannview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Keira</td>
      <td role="cell">Treutel</td>
      <td data-value="-1692748800000" role="cell" class="epp-ar">1916-05-12</td>
      <td role="cell">New Marina</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Carolyn</td>
      <td role="cell">Romaguera</td>
      <td data-value="-1888012800000" role="cell" class="epp-ar">1910-03-05</td>
      <td role="cell">Marlenland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Ethyl</td>
      <td role="cell">Harris</td>
      <td data-value="-852681600000" role="cell" class="epp-ar">1942-12-25</td>
      <td role="cell">West Darrin</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Fredy</td>
      <td role="cell">Rogahn</td>
      <td data-value="-174787200000" role="cell" class="epp-ar">1964-06-18</td>
      <td role="cell">Port Derick</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Heidi</td>
      <td role="cell">Carroll</td>
      <td data-value="425001600000" role="cell" class="epp-ar">1983-06-21</td>
      <td role="cell">South Pansymouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Eileen</td>
      <td role="cell">Borer</td>
      <td data-value="-409449600000" role="cell" class="epp-ar">1957-01-10</td>
      <td role="cell">West Arely</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Adrianna</td>
      <td role="cell">Johnson</td>
      <td data-value="-177638400000" role="cell" class="epp-ar">1964-05-16</td>
      <td role="cell">Runtemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Donavon</td>
      <td role="cell">Jakubowski</td>
      <td data-value="933379200000" role="cell" class="epp-ar">1999-07-31</td>
      <td role="cell">New Madaline</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Ephraim</td>
      <td role="cell">Wyman</td>
      <td data-value="1632182400000" role="cell" class="epp-ar">2021-09-21</td>
      <td role="cell">North Maryjaneborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Karli</td>
      <td role="cell">Effertz</td>
      <td data-value="-330220800000" role="cell" class="epp-ar">1959-07-16</td>
      <td role="cell">North Aracely</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Molly</td>
      <td role="cell">Jerde</td>
      <td data-value="-298684800000" role="cell" class="epp-ar">1960-07-15</td>
      <td role="cell">Sonnymouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Annabel</td>
      <td role="cell">Anderson</td>
      <td data-value="1401840000000" role="cell" class="epp-ar">2014-06-04</td>
      <td role="cell">South Adityaland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kaitlyn</td>
      <td role="cell">Roberts</td>
      <td data-value="1754524800000" role="cell" class="epp-ar">2025-08-07</td>
      <td role="cell">West Deloresshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Gertrude</td>
      <td role="cell">Bruen</td>
      <td data-value="-563673600000" role="cell" class="epp-ar">1952-02-21</td>
      <td role="cell">West Benton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Loyce</td>
      <td role="cell">Nader</td>
      <td data-value="-645321600000" role="cell" class="epp-ar">1949-07-21</td>
      <td role="cell">East Marjorychester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Myrl</td>
      <td role="cell">Wintheiser</td>
      <td data-value="-1650499200000" role="cell" class="epp-ar">1917-09-13</td>
      <td role="cell">North Enosshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Deanna</td>
      <td role="cell">Halvorson</td>
      <td data-value="-707702400000" role="cell" class="epp-ar">1947-07-30</td>
      <td role="cell">Faymouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Danial</td>
      <td role="cell">Kub</td>
      <td data-value="1427760000000" role="cell" class="epp-ar">2015-03-31</td>
      <td role="cell">North Rudy</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Melyna</td>
      <td role="cell">Lindgren</td>
      <td data-value="-1499212800000" role="cell" class="epp-ar">1922-06-30</td>
      <td role="cell">Jakubowskiburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jazlyn</td>
      <td role="cell">Trantow</td>
      <td data-value="-180403200000" role="cell" class="epp-ar">1964-04-14</td>
      <td role="cell">North Vaughnburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Tre</td>
      <td role="cell">Littel</td>
      <td data-value="-219628800000" role="cell" class="epp-ar">1963-01-16</td>
      <td role="cell">East Lizeth</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;
}