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 Trycia Senger 2005-04-25 Port Susanaborough
Wales Delilah Altenwerth 1950-05-21 Juanitafort
Wales Golden Kris 1990-12-23 South Janis
Wales Tomasa Bauch 1958-02-22 Lake Lionelton
England Lucinda Cummings 1973-08-16 Kielville
Scotland Delphine Stark 1910-10-15 New Drew
Northern Ireland Vivian Schinner 1998-12-24 Tylershire
England Wilbert Murray 1976-12-21 Lake Elisha
Wales Zoila Doyle 1972-09-17 Keelingside
Wales Samara Mann 1961-02-11 East Stephonton
Scotland Winnifred Schimmel 1957-02-22 Lake Anabelburgh
Northern Ireland Cristian Powlowski 1975-10-13 Valentinville
Northern Ireland Kylie Terry 1998-05-28 New Clay
Scotland Lyda Ernser 1974-02-04 Eltontown
England Lea Zulauf 1960-05-04 Port Adonis
England Jeanne Fadel 1976-01-18 Pourosstad
England Harley Kuhic 2008-02-14 Elsaberg
Northern Ireland Estefania Treutel 1932-03-14 New Gina
England Bartholome Schamberger 1947-09-15 Lake Adalbertoville
England Rebecca Cormier 1956-08-03 Grahamport
Northern Ireland Kayden Blanda 1998-12-13 Hilpertburgh
Northern Ireland Harrison Abernathy 1941-07-11 West Icie
Wales Harry Grady 1955-04-21 Port Walkerstad
Scotland Fletcher Dibbert 2002-04-10 Kubfurt
Northern Ireland Vita Jaskolski 1993-09-17 North Jerel
Wales Shyanne Jaskolski 1980-01-22 Hickleville
Scotland Arely Wisoky 1964-05-11 Arvillafurt
Wales Clint Bayer 2024-02-04 Davismouth
Scotland Nigel Kassulke 1921-01-31 Morarhaven
Scotland Claud Johnson 1993-12-04 Weimannfurt
Northern Ireland Raina Rogahn 1995-09-05 New Daisha
Wales Jaylan Hickle 1994-06-25 Emmaleestad
Northern Ireland Zachary Hintz 1921-11-20 New Emelia
England Josephine Ritchie 1960-04-16 South Adella
Northern Ireland Casper Weber 1995-04-20 North Jevon
Northern Ireland Caleigh Daugherty 1989-06-23 East Ignatius
Scotland Valentina Emmerich 1941-08-06 South Noblestad
England Leland Runolfsdottir 1984-09-03 North Makayla
Wales Ona Durgan 2015-06-18 South Annamarieton
Wales Ena Bosco 1919-06-18 Hermistonfurt
Wales Gregorio Gibson 1959-12-23 Port Zion
Northern Ireland Alek Kirlin 1982-06-29 North Saigeborough
Northern Ireland Randall Pacocha 1909-08-07 New Thurman
Wales Tremaine Bauch 1964-01-20 Port Zachariah
England Loyal Dietrich 2008-08-03 Murphyview
Wales Zula Goldner 1991-06-18 North Pinkieshire
England Merlin Gibson 1960-12-08 Vickiemouth
Scotland Theresa Stehr 2002-06-04 Lake Helenview
England Devante Hahn 1939-09-25 South Darrellmouth
Scotland Clement Tillman 1964-05-10 East Zachariahborough

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">Trycia</td>
      <td role="cell">Senger</td>
      <td data-value="1114387200000" role="cell" class="epp-ar">2005-04-25</td>
      <td role="cell">Port Susanaborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Delilah</td>
      <td role="cell">Altenwerth</td>
      <td data-value="-619056000000" role="cell" class="epp-ar">1950-05-21</td>
      <td role="cell">Juanitafort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Golden</td>
      <td role="cell">Kris</td>
      <td data-value="661910400000" role="cell" class="epp-ar">1990-12-23</td>
      <td role="cell">South Janis</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Tomasa</td>
      <td role="cell">Bauch</td>
      <td data-value="-374198400000" role="cell" class="epp-ar">1958-02-22</td>
      <td role="cell">Lake Lionelton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lucinda</td>
      <td role="cell">Cummings</td>
      <td data-value="114307200000" role="cell" class="epp-ar">1973-08-16</td>
      <td role="cell">Kielville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Delphine</td>
      <td role="cell">Stark</td>
      <td data-value="-1868659200000" role="cell" class="epp-ar">1910-10-15</td>
      <td role="cell">New Drew</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Vivian</td>
      <td role="cell">Schinner</td>
      <td data-value="914457600000" role="cell" class="epp-ar">1998-12-24</td>
      <td role="cell">Tylershire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Wilbert</td>
      <td role="cell">Murray</td>
      <td data-value="219974400000" role="cell" class="epp-ar">1976-12-21</td>
      <td role="cell">Lake Elisha</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Zoila</td>
      <td role="cell">Doyle</td>
      <td data-value="85536000000" role="cell" class="epp-ar">1972-09-17</td>
      <td role="cell">Keelingside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Samara</td>
      <td role="cell">Mann</td>
      <td data-value="-280454400000" role="cell" class="epp-ar">1961-02-11</td>
      <td role="cell">East Stephonton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Winnifred</td>
      <td role="cell">Schimmel</td>
      <td data-value="-405734400000" role="cell" class="epp-ar">1957-02-22</td>
      <td role="cell">Lake Anabelburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Cristian</td>
      <td role="cell">Powlowski</td>
      <td data-value="182390400000" role="cell" class="epp-ar">1975-10-13</td>
      <td role="cell">Valentinville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kylie</td>
      <td role="cell">Terry</td>
      <td data-value="896313600000" role="cell" class="epp-ar">1998-05-28</td>
      <td role="cell">New Clay</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Lyda</td>
      <td role="cell">Ernser</td>
      <td data-value="129168000000" role="cell" class="epp-ar">1974-02-04</td>
      <td role="cell">Eltontown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lea</td>
      <td role="cell">Zulauf</td>
      <td data-value="-304905600000" role="cell" class="epp-ar">1960-05-04</td>
      <td role="cell">Port Adonis</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jeanne</td>
      <td role="cell">Fadel</td>
      <td data-value="190771200000" role="cell" class="epp-ar">1976-01-18</td>
      <td role="cell">Pourosstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Harley</td>
      <td role="cell">Kuhic</td>
      <td data-value="1202947200000" role="cell" class="epp-ar">2008-02-14</td>
      <td role="cell">Elsaberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Estefania</td>
      <td role="cell">Treutel</td>
      <td data-value="-1192924800000" role="cell" class="epp-ar">1932-03-14</td>
      <td role="cell">New Gina</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Bartholome</td>
      <td role="cell">Schamberger</td>
      <td data-value="-703641600000" role="cell" class="epp-ar">1947-09-15</td>
      <td role="cell">Lake Adalbertoville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Rebecca</td>
      <td role="cell">Cormier</td>
      <td data-value="-423273600000" role="cell" class="epp-ar">1956-08-03</td>
      <td role="cell">Grahamport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kayden</td>
      <td role="cell">Blanda</td>
      <td data-value="913507200000" role="cell" class="epp-ar">1998-12-13</td>
      <td role="cell">Hilpertburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Harrison</td>
      <td role="cell">Abernathy</td>
      <td data-value="-898646400000" role="cell" class="epp-ar">1941-07-11</td>
      <td role="cell">West Icie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Harry</td>
      <td role="cell">Grady</td>
      <td data-value="-463881600000" role="cell" class="epp-ar">1955-04-21</td>
      <td role="cell">Port Walkerstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Fletcher</td>
      <td role="cell">Dibbert</td>
      <td data-value="1018396800000" role="cell" class="epp-ar">2002-04-10</td>
      <td role="cell">Kubfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Vita</td>
      <td role="cell">Jaskolski</td>
      <td data-value="748224000000" role="cell" class="epp-ar">1993-09-17</td>
      <td role="cell">North Jerel</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Shyanne</td>
      <td role="cell">Jaskolski</td>
      <td data-value="317347200000" role="cell" class="epp-ar">1980-01-22</td>
      <td role="cell">Hickleville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Arely</td>
      <td role="cell">Wisoky</td>
      <td data-value="-178070400000" role="cell" class="epp-ar">1964-05-11</td>
      <td role="cell">Arvillafurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Clint</td>
      <td role="cell">Bayer</td>
      <td data-value="1707004800000" role="cell" class="epp-ar">2024-02-04</td>
      <td role="cell">Davismouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Nigel</td>
      <td role="cell">Kassulke</td>
      <td data-value="-1543708800000" role="cell" class="epp-ar">1921-01-31</td>
      <td role="cell">Morarhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Claud</td>
      <td role="cell">Johnson</td>
      <td data-value="754963200000" role="cell" class="epp-ar">1993-12-04</td>
      <td role="cell">Weimannfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Raina</td>
      <td role="cell">Rogahn</td>
      <td data-value="810259200000" role="cell" class="epp-ar">1995-09-05</td>
      <td role="cell">New Daisha</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jaylan</td>
      <td role="cell">Hickle</td>
      <td data-value="772502400000" role="cell" class="epp-ar">1994-06-25</td>
      <td role="cell">Emmaleestad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Zachary</td>
      <td role="cell">Hintz</td>
      <td data-value="-1518393600000" role="cell" class="epp-ar">1921-11-20</td>
      <td role="cell">New Emelia</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Josephine</td>
      <td role="cell">Ritchie</td>
      <td data-value="-306460800000" role="cell" class="epp-ar">1960-04-16</td>
      <td role="cell">South Adella</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Casper</td>
      <td role="cell">Weber</td>
      <td data-value="798336000000" role="cell" class="epp-ar">1995-04-20</td>
      <td role="cell">North Jevon</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Caleigh</td>
      <td role="cell">Daugherty</td>
      <td data-value="614563200000" role="cell" class="epp-ar">1989-06-23</td>
      <td role="cell">East Ignatius</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Valentina</td>
      <td role="cell">Emmerich</td>
      <td data-value="-896400000000" role="cell" class="epp-ar">1941-08-06</td>
      <td role="cell">South Noblestad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Leland</td>
      <td role="cell">Runolfsdottir</td>
      <td data-value="463017600000" role="cell" class="epp-ar">1984-09-03</td>
      <td role="cell">North Makayla</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Ona</td>
      <td role="cell">Durgan</td>
      <td data-value="1434585600000" role="cell" class="epp-ar">2015-06-18</td>
      <td role="cell">South Annamarieton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Ena</td>
      <td role="cell">Bosco</td>
      <td data-value="-1594944000000" role="cell" class="epp-ar">1919-06-18</td>
      <td role="cell">Hermistonfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Gregorio</td>
      <td role="cell">Gibson</td>
      <td data-value="-316396800000" role="cell" class="epp-ar">1959-12-23</td>
      <td role="cell">Port Zion</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Alek</td>
      <td role="cell">Kirlin</td>
      <td data-value="394156800000" role="cell" class="epp-ar">1982-06-29</td>
      <td role="cell">North Saigeborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Randall</td>
      <td role="cell">Pacocha</td>
      <td data-value="-1906156800000" role="cell" class="epp-ar">1909-08-07</td>
      <td role="cell">New Thurman</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Tremaine</td>
      <td role="cell">Bauch</td>
      <td data-value="-187747200000" role="cell" class="epp-ar">1964-01-20</td>
      <td role="cell">Port Zachariah</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Loyal</td>
      <td role="cell">Dietrich</td>
      <td data-value="1217721600000" role="cell" class="epp-ar">2008-08-03</td>
      <td role="cell">Murphyview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Zula</td>
      <td role="cell">Goldner</td>
      <td data-value="677203200000" role="cell" class="epp-ar">1991-06-18</td>
      <td role="cell">North Pinkieshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Merlin</td>
      <td role="cell">Gibson</td>
      <td data-value="-286070400000" role="cell" class="epp-ar">1960-12-08</td>
      <td role="cell">Vickiemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Theresa</td>
      <td role="cell">Stehr</td>
      <td data-value="1023148800000" role="cell" class="epp-ar">2002-06-04</td>
      <td role="cell">Lake Helenview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Devante</td>
      <td role="cell">Hahn</td>
      <td data-value="-955238400000" role="cell" class="epp-ar">1939-09-25</td>
      <td role="cell">South Darrellmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Clement</td>
      <td role="cell">Tillman</td>
      <td data-value="-178156800000" role="cell" class="epp-ar">1964-05-10</td>
      <td role="cell">East Zachariahborough</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;
}