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
Wales Zachary Johns 2023-06-21 Lewfurt
Wales Evie Dickinson 1962-09-18 East Ellaville
Northern Ireland Anthony Lind 1916-02-17 New Myrtieberg
Northern Ireland John Schoen 1968-02-29 North Eldridgestad
Scotland German Hammes 1999-12-19 Rebekahberg
Wales Karine Beier 1962-06-12 Marlenstad
Wales Eliseo Marks 1986-09-12 Madalineborough
England Claud Hirthe 2013-03-04 Lake Rolando
Wales Dayana Heathcote 2023-09-20 New Cristobalburgh
Scotland Magali Rempel 1996-12-31 Hillaryburgh
England Keagan Koch 1968-05-07 Deckowstad
Northern Ireland Lester Barton 1962-09-01 Kuphalbury
Northern Ireland Hadley Considine 2011-01-31 Maximilliaton
Northern Ireland Alexandra Connelly 2016-08-08 South Willishaven
Wales Rosetta Ondricka 1969-10-30 Giovanniville
Scotland Sherwood Hackett 1960-01-29 New Rebeka
England Lily Morar 1941-06-25 Schneiderport
Northern Ireland Jaylan Stoltenberg 1916-12-21 Kennethbury
Wales Kamille Koss 2015-12-05 Thadborough
England Alena Rolfson 2017-08-08 Williamsonberg
England Brielle Daniel 1963-08-15 Lake Maurine
Wales Bonita Collier 1948-03-28 Sashamouth
Scotland Mallory Rau 1994-11-19 Lake Jean
Wales Palma Corwin 1933-10-28 Hickleborough
Wales Aurelio Bins 2008-05-05 Audiemouth
England Janice Hoppe 2010-03-30 Tyrelfurt
Wales Zane Walsh 2000-07-28 North Zoie
Wales Candido Kertzmann 1917-06-26 Natalieside
Scotland Linnie Mayert 2011-12-13 Macejkovicmouth
England Kassandra Purdy 1990-06-11 McLaughlinshire
England Dennis Cremin 1994-02-18 Rosemarieville
Northern Ireland Queen Haag 1952-10-29 Hilpertborough
England Shanon Boyer 2017-01-28 Lake Bonitaville
England Carlee Emard 2017-06-13 Beckertown
Northern Ireland Gia Kutch 1974-05-16 West Orvalland
Northern Ireland Gretchen Mraz 1999-08-22 West Myrtlemouth
Northern Ireland Haleigh Schuppe 1962-05-04 Litzyburgh
Scotland Nicola Kreiger 2003-06-11 New Maiyamouth
Northern Ireland Tara Rogahn 1942-01-19 North Chelsieport
Scotland Joanny Runolfsdottir 2002-03-17 Aufderharport
England Jazmyn Herman 1962-07-22 Dickihaven
England Antonietta Legros 2002-03-24 Beerside
England Freeda Herzog 1964-06-24 Eleonoretown
Wales Remington Hagenes 1967-05-28 Kozeyville
Wales Zora Heaney 1995-03-05 Cruickshankmouth
Wales Cielo Schinner 1965-01-07 New Nicoburgh
England Rickie Kihn 2009-12-16 Jaquanberg
Scotland Lemuel Fritsch 1977-01-18 Port Richmondchester
Wales Anne Hilll 1962-07-10 Raynorburgh
Scotland Zelma D'Amore 1962-02-17 New Lornachester

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">Wales</td>
      <td role="cell">Zachary</td>
      <td role="cell">Johns</td>
      <td data-value="1687305600000" role="cell" class="epp-ar">2023-06-21</td>
      <td role="cell">Lewfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Evie</td>
      <td role="cell">Dickinson</td>
      <td data-value="-229996800000" role="cell" class="epp-ar">1962-09-18</td>
      <td role="cell">East Ellaville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Anthony</td>
      <td role="cell">Lind</td>
      <td data-value="-1700092800000" role="cell" class="epp-ar">1916-02-17</td>
      <td role="cell">New Myrtieberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">John</td>
      <td role="cell">Schoen</td>
      <td data-value="-58060800000" role="cell" class="epp-ar">1968-02-29</td>
      <td role="cell">North Eldridgestad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">German</td>
      <td role="cell">Hammes</td>
      <td data-value="945561600000" role="cell" class="epp-ar">1999-12-19</td>
      <td role="cell">Rebekahberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Karine</td>
      <td role="cell">Beier</td>
      <td data-value="-238464000000" role="cell" class="epp-ar">1962-06-12</td>
      <td role="cell">Marlenstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Eliseo</td>
      <td role="cell">Marks</td>
      <td data-value="526867200000" role="cell" class="epp-ar">1986-09-12</td>
      <td role="cell">Madalineborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Claud</td>
      <td role="cell">Hirthe</td>
      <td data-value="1362355200000" role="cell" class="epp-ar">2013-03-04</td>
      <td role="cell">Lake Rolando</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Dayana</td>
      <td role="cell">Heathcote</td>
      <td data-value="1695168000000" role="cell" class="epp-ar">2023-09-20</td>
      <td role="cell">New Cristobalburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Magali</td>
      <td role="cell">Rempel</td>
      <td data-value="851990400000" role="cell" class="epp-ar">1996-12-31</td>
      <td role="cell">Hillaryburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Keagan</td>
      <td role="cell">Koch</td>
      <td data-value="-52185600000" role="cell" class="epp-ar">1968-05-07</td>
      <td role="cell">Deckowstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Lester</td>
      <td role="cell">Barton</td>
      <td data-value="-231465600000" role="cell" class="epp-ar">1962-09-01</td>
      <td role="cell">Kuphalbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Hadley</td>
      <td role="cell">Considine</td>
      <td data-value="1296432000000" role="cell" class="epp-ar">2011-01-31</td>
      <td role="cell">Maximilliaton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Alexandra</td>
      <td role="cell">Connelly</td>
      <td data-value="1470614400000" role="cell" class="epp-ar">2016-08-08</td>
      <td role="cell">South Willishaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Rosetta</td>
      <td role="cell">Ondricka</td>
      <td data-value="-5443200000" role="cell" class="epp-ar">1969-10-30</td>
      <td role="cell">Giovanniville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Sherwood</td>
      <td role="cell">Hackett</td>
      <td data-value="-313200000000" role="cell" class="epp-ar">1960-01-29</td>
      <td role="cell">New Rebeka</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lily</td>
      <td role="cell">Morar</td>
      <td data-value="-900028800000" role="cell" class="epp-ar">1941-06-25</td>
      <td role="cell">Schneiderport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jaylan</td>
      <td role="cell">Stoltenberg</td>
      <td data-value="-1673481600000" role="cell" class="epp-ar">1916-12-21</td>
      <td role="cell">Kennethbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Kamille</td>
      <td role="cell">Koss</td>
      <td data-value="1449273600000" role="cell" class="epp-ar">2015-12-05</td>
      <td role="cell">Thadborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alena</td>
      <td role="cell">Rolfson</td>
      <td data-value="1502150400000" role="cell" class="epp-ar">2017-08-08</td>
      <td role="cell">Williamsonberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Brielle</td>
      <td role="cell">Daniel</td>
      <td data-value="-201398400000" role="cell" class="epp-ar">1963-08-15</td>
      <td role="cell">Lake Maurine</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Bonita</td>
      <td role="cell">Collier</td>
      <td data-value="-686793600000" role="cell" class="epp-ar">1948-03-28</td>
      <td role="cell">Sashamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Mallory</td>
      <td role="cell">Rau</td>
      <td data-value="785203200000" role="cell" class="epp-ar">1994-11-19</td>
      <td role="cell">Lake Jean</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Palma</td>
      <td role="cell">Corwin</td>
      <td data-value="-1141689600000" role="cell" class="epp-ar">1933-10-28</td>
      <td role="cell">Hickleborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Aurelio</td>
      <td role="cell">Bins</td>
      <td data-value="1209945600000" role="cell" class="epp-ar">2008-05-05</td>
      <td role="cell">Audiemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Janice</td>
      <td role="cell">Hoppe</td>
      <td data-value="1269907200000" role="cell" class="epp-ar">2010-03-30</td>
      <td role="cell">Tyrelfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Zane</td>
      <td role="cell">Walsh</td>
      <td data-value="964742400000" role="cell" class="epp-ar">2000-07-28</td>
      <td role="cell">North Zoie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Candido</td>
      <td role="cell">Kertzmann</td>
      <td data-value="-1657324800000" role="cell" class="epp-ar">1917-06-26</td>
      <td role="cell">Natalieside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Linnie</td>
      <td role="cell">Mayert</td>
      <td data-value="1323734400000" role="cell" class="epp-ar">2011-12-13</td>
      <td role="cell">Macejkovicmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Kassandra</td>
      <td role="cell">Purdy</td>
      <td data-value="645062400000" role="cell" class="epp-ar">1990-06-11</td>
      <td role="cell">McLaughlinshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Dennis</td>
      <td role="cell">Cremin</td>
      <td data-value="761529600000" role="cell" class="epp-ar">1994-02-18</td>
      <td role="cell">Rosemarieville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Queen</td>
      <td role="cell">Haag</td>
      <td data-value="-541987200000" role="cell" class="epp-ar">1952-10-29</td>
      <td role="cell">Hilpertborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Shanon</td>
      <td role="cell">Boyer</td>
      <td data-value="1485561600000" role="cell" class="epp-ar">2017-01-28</td>
      <td role="cell">Lake Bonitaville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Carlee</td>
      <td role="cell">Emard</td>
      <td data-value="1497312000000" role="cell" class="epp-ar">2017-06-13</td>
      <td role="cell">Beckertown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Gia</td>
      <td role="cell">Kutch</td>
      <td data-value="137894400000" role="cell" class="epp-ar">1974-05-16</td>
      <td role="cell">West Orvalland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Gretchen</td>
      <td role="cell">Mraz</td>
      <td data-value="935280000000" role="cell" class="epp-ar">1999-08-22</td>
      <td role="cell">West Myrtlemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Haleigh</td>
      <td role="cell">Schuppe</td>
      <td data-value="-241833600000" role="cell" class="epp-ar">1962-05-04</td>
      <td role="cell">Litzyburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Nicola</td>
      <td role="cell">Kreiger</td>
      <td data-value="1055289600000" role="cell" class="epp-ar">2003-06-11</td>
      <td role="cell">New Maiyamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Tara</td>
      <td role="cell">Rogahn</td>
      <td data-value="-882057600000" role="cell" class="epp-ar">1942-01-19</td>
      <td role="cell">North Chelsieport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Joanny</td>
      <td role="cell">Runolfsdottir</td>
      <td data-value="1016323200000" role="cell" class="epp-ar">2002-03-17</td>
      <td role="cell">Aufderharport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jazmyn</td>
      <td role="cell">Herman</td>
      <td data-value="-235008000000" role="cell" class="epp-ar">1962-07-22</td>
      <td role="cell">Dickihaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Antonietta</td>
      <td role="cell">Legros</td>
      <td data-value="1016928000000" role="cell" class="epp-ar">2002-03-24</td>
      <td role="cell">Beerside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Freeda</td>
      <td role="cell">Herzog</td>
      <td data-value="-174268800000" role="cell" class="epp-ar">1964-06-24</td>
      <td role="cell">Eleonoretown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Remington</td>
      <td role="cell">Hagenes</td>
      <td data-value="-81993600000" role="cell" class="epp-ar">1967-05-28</td>
      <td role="cell">Kozeyville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Zora</td>
      <td role="cell">Heaney</td>
      <td data-value="794361600000" role="cell" class="epp-ar">1995-03-05</td>
      <td role="cell">Cruickshankmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Cielo</td>
      <td role="cell">Schinner</td>
      <td data-value="-157248000000" role="cell" class="epp-ar">1965-01-07</td>
      <td role="cell">New Nicoburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Rickie</td>
      <td role="cell">Kihn</td>
      <td data-value="1260921600000" role="cell" class="epp-ar">2009-12-16</td>
      <td role="cell">Jaquanberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Lemuel</td>
      <td role="cell">Fritsch</td>
      <td data-value="222393600000" role="cell" class="epp-ar">1977-01-18</td>
      <td role="cell">Port Richmondchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Anne</td>
      <td role="cell">Hilll</td>
      <td data-value="-236044800000" role="cell" class="epp-ar">1962-07-10</td>
      <td role="cell">Raynorburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Zelma</td>
      <td role="cell">D'Amore</td>
      <td data-value="-248400000000" role="cell" class="epp-ar">1962-02-17</td>
      <td role="cell">New Lornachester</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;
}