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 Lexus Johnston 1922-10-25 Croninchester
Scotland Rebeca Ferry 2014-10-15 Gaylordmouth
Scotland Kayli Rempel 2007-06-01 North Ilianashire
England Orpha Kirlin 1996-11-10 Port Marleeburgh
Wales Bernita Kerluke 1940-04-01 Vicentemouth
England Lambert Mohr 1945-02-16 East Laurelland
England Tremayne Gorczany 1951-05-31 Port Mabelfort
England Lavinia Hartmann 1931-08-27 Rohanbury
Scotland Bo Sawayn 2010-06-08 Hammesshire
Wales Oma Crist 1963-07-24 Luettgenview
Wales Eliane Johnson 2020-01-25 Olsonview
England David Huels 1989-08-19 Destineeside
Wales Curt Jerde 2007-11-02 Port Janismouth
Scotland Javonte Gorczany 1943-07-01 Port Markport
Wales Jeanne Raynor 2004-09-24 New Claudiebury
England Nedra Bruen 1994-09-29 Port Soledadbury
Northern Ireland Tiara Kuhlman 1975-08-18 Lake Wilburn
Scotland Brook Thompson 1982-07-26 Brakusmouth
Northern Ireland Grady Mohr 1969-03-26 Laneyberg
England Donnell Bergnaum 1954-01-06 Port Zion
Wales Darrel Weissnat 2000-03-16 New Lukas
Scotland Odessa Howe 1948-08-30 Lake Dorcasville
Northern Ireland Andre Purdy 1927-12-25 West Jeraldbury
England Fletcher Gerhold 2019-05-05 Robertfurt
Scotland Gracie Lesch 1902-01-25 Marisolside
Wales Lynn Kshlerin 2004-10-08 South Lydastad
Scotland Maci Shields 1991-02-12 New Celestino
Wales Ariel Tromp 2005-12-03 Hermistonchester
England Cathy Farrell 2023-08-12 Lake Oma
Northern Ireland Adrain Gibson 1999-11-09 New Piperfurt
Northern Ireland Edison Hammes 2009-12-28 Roderickton
England Kyle Emmerich 1963-07-12 Lake Deshawn
Scotland Anahi Ferry 1998-12-20 Windlershire
England Adriel Kulas 1903-05-03 South Lesley
Wales Bernardo Schulist 1987-04-12 South Wendellshire
Scotland Gavin Bartoletti 1963-02-15 Sheilaport
England Lonnie Ledner 1997-06-17 Casperfort
Wales Arielle Jenkins 1963-05-01 Arvidmouth
England Angie Kihn 2013-10-16 North Kamille
Scotland Payton Simonis 2019-08-27 West Dudley
Scotland Carlotta Hirthe 1992-07-03 North Jermainmouth
Wales Richard Volkman 1976-07-29 New Drew
Northern Ireland Hilda Morissette 1963-03-19 New Norbertburgh
Scotland Celine Runte 2025-01-05 Townehaven
Scotland Drew Cummerata 2012-07-18 Hiltonhaven
Wales Jamison Shanahan 1978-04-12 Schaeferview
Scotland Gabrielle Cremin 1971-07-13 Cassandrastad
Northern Ireland Lillian Christiansen 1984-04-09 Rennerfurt
Wales Florencio Haley 1933-09-23 Marquardtfurt
England Betty Beatty 1981-11-29 Wellingtonstad

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">Lexus</td>
      <td role="cell">Johnston</td>
      <td data-value="-1489104000000" role="cell" class="epp-ar">1922-10-25</td>
      <td role="cell">Croninchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Rebeca</td>
      <td role="cell">Ferry</td>
      <td data-value="1413331200000" role="cell" class="epp-ar">2014-10-15</td>
      <td role="cell">Gaylordmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kayli</td>
      <td role="cell">Rempel</td>
      <td data-value="1180656000000" role="cell" class="epp-ar">2007-06-01</td>
      <td role="cell">North Ilianashire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Orpha</td>
      <td role="cell">Kirlin</td>
      <td data-value="847584000000" role="cell" class="epp-ar">1996-11-10</td>
      <td role="cell">Port Marleeburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Bernita</td>
      <td role="cell">Kerluke</td>
      <td data-value="-938908800000" role="cell" class="epp-ar">1940-04-01</td>
      <td role="cell">Vicentemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lambert</td>
      <td role="cell">Mohr</td>
      <td data-value="-784944000000" role="cell" class="epp-ar">1945-02-16</td>
      <td role="cell">East Laurelland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Tremayne</td>
      <td role="cell">Gorczany</td>
      <td data-value="-586656000000" role="cell" class="epp-ar">1951-05-31</td>
      <td role="cell">Port Mabelfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lavinia</td>
      <td role="cell">Hartmann</td>
      <td data-value="-1210204800000" role="cell" class="epp-ar">1931-08-27</td>
      <td role="cell">Rohanbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Bo</td>
      <td role="cell">Sawayn</td>
      <td data-value="1275955200000" role="cell" class="epp-ar">2010-06-08</td>
      <td role="cell">Hammesshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Oma</td>
      <td role="cell">Crist</td>
      <td data-value="-203299200000" role="cell" class="epp-ar">1963-07-24</td>
      <td role="cell">Luettgenview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Eliane</td>
      <td role="cell">Johnson</td>
      <td data-value="1579910400000" role="cell" class="epp-ar">2020-01-25</td>
      <td role="cell">Olsonview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">David</td>
      <td role="cell">Huels</td>
      <td data-value="619488000000" role="cell" class="epp-ar">1989-08-19</td>
      <td role="cell">Destineeside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Curt</td>
      <td role="cell">Jerde</td>
      <td data-value="1193961600000" role="cell" class="epp-ar">2007-11-02</td>
      <td role="cell">Port Janismouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Javonte</td>
      <td role="cell">Gorczany</td>
      <td data-value="-836438400000" role="cell" class="epp-ar">1943-07-01</td>
      <td role="cell">Port Markport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jeanne</td>
      <td role="cell">Raynor</td>
      <td data-value="1095984000000" role="cell" class="epp-ar">2004-09-24</td>
      <td role="cell">New Claudiebury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Nedra</td>
      <td role="cell">Bruen</td>
      <td data-value="780796800000" role="cell" class="epp-ar">1994-09-29</td>
      <td role="cell">Port Soledadbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Tiara</td>
      <td role="cell">Kuhlman</td>
      <td data-value="177552000000" role="cell" class="epp-ar">1975-08-18</td>
      <td role="cell">Lake Wilburn</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Brook</td>
      <td role="cell">Thompson</td>
      <td data-value="396489600000" role="cell" class="epp-ar">1982-07-26</td>
      <td role="cell">Brakusmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Grady</td>
      <td role="cell">Mohr</td>
      <td data-value="-24278400000" role="cell" class="epp-ar">1969-03-26</td>
      <td role="cell">Laneyberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Donnell</td>
      <td role="cell">Bergnaum</td>
      <td data-value="-504489600000" role="cell" class="epp-ar">1954-01-06</td>
      <td role="cell">Port Zion</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Darrel</td>
      <td role="cell">Weissnat</td>
      <td data-value="953164800000" role="cell" class="epp-ar">2000-03-16</td>
      <td role="cell">New Lukas</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Odessa</td>
      <td role="cell">Howe</td>
      <td data-value="-673401600000" role="cell" class="epp-ar">1948-08-30</td>
      <td role="cell">Lake Dorcasville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Andre</td>
      <td role="cell">Purdy</td>
      <td data-value="-1326067200000" role="cell" class="epp-ar">1927-12-25</td>
      <td role="cell">West Jeraldbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Fletcher</td>
      <td role="cell">Gerhold</td>
      <td data-value="1557014400000" role="cell" class="epp-ar">2019-05-05</td>
      <td role="cell">Robertfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Gracie</td>
      <td role="cell">Lesch</td>
      <td data-value="-2143843200000" role="cell" class="epp-ar">1902-01-25</td>
      <td role="cell">Marisolside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lynn</td>
      <td role="cell">Kshlerin</td>
      <td data-value="1097193600000" role="cell" class="epp-ar">2004-10-08</td>
      <td role="cell">South Lydastad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Maci</td>
      <td role="cell">Shields</td>
      <td data-value="666316800000" role="cell" class="epp-ar">1991-02-12</td>
      <td role="cell">New Celestino</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Ariel</td>
      <td role="cell">Tromp</td>
      <td data-value="1133568000000" role="cell" class="epp-ar">2005-12-03</td>
      <td role="cell">Hermistonchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Cathy</td>
      <td role="cell">Farrell</td>
      <td data-value="1691798400000" role="cell" class="epp-ar">2023-08-12</td>
      <td role="cell">Lake Oma</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Adrain</td>
      <td role="cell">Gibson</td>
      <td data-value="942105600000" role="cell" class="epp-ar">1999-11-09</td>
      <td role="cell">New Piperfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Edison</td>
      <td role="cell">Hammes</td>
      <td data-value="1261958400000" role="cell" class="epp-ar">2009-12-28</td>
      <td role="cell">Roderickton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Kyle</td>
      <td role="cell">Emmerich</td>
      <td data-value="-204336000000" role="cell" class="epp-ar">1963-07-12</td>
      <td role="cell">Lake Deshawn</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Anahi</td>
      <td role="cell">Ferry</td>
      <td data-value="914112000000" role="cell" class="epp-ar">1998-12-20</td>
      <td role="cell">Windlershire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Adriel</td>
      <td role="cell">Kulas</td>
      <td data-value="-2103840000000" role="cell" class="epp-ar">1903-05-03</td>
      <td role="cell">South Lesley</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Bernardo</td>
      <td role="cell">Schulist</td>
      <td data-value="545184000000" role="cell" class="epp-ar">1987-04-12</td>
      <td role="cell">South Wendellshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Gavin</td>
      <td role="cell">Bartoletti</td>
      <td data-value="-217036800000" role="cell" class="epp-ar">1963-02-15</td>
      <td role="cell">Sheilaport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lonnie</td>
      <td role="cell">Ledner</td>
      <td data-value="866505600000" role="cell" class="epp-ar">1997-06-17</td>
      <td role="cell">Casperfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Arielle</td>
      <td role="cell">Jenkins</td>
      <td data-value="-210556800000" role="cell" class="epp-ar">1963-05-01</td>
      <td role="cell">Arvidmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Angie</td>
      <td role="cell">Kihn</td>
      <td data-value="1381881600000" role="cell" class="epp-ar">2013-10-16</td>
      <td role="cell">North Kamille</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Payton</td>
      <td role="cell">Simonis</td>
      <td data-value="1566864000000" role="cell" class="epp-ar">2019-08-27</td>
      <td role="cell">West Dudley</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Carlotta</td>
      <td role="cell">Hirthe</td>
      <td data-value="710121600000" role="cell" class="epp-ar">1992-07-03</td>
      <td role="cell">North Jermainmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Richard</td>
      <td role="cell">Volkman</td>
      <td data-value="207446400000" role="cell" class="epp-ar">1976-07-29</td>
      <td role="cell">New Drew</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Hilda</td>
      <td role="cell">Morissette</td>
      <td data-value="-214272000000" role="cell" class="epp-ar">1963-03-19</td>
      <td role="cell">New Norbertburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Celine</td>
      <td role="cell">Runte</td>
      <td data-value="1736035200000" role="cell" class="epp-ar">2025-01-05</td>
      <td role="cell">Townehaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Drew</td>
      <td role="cell">Cummerata</td>
      <td data-value="1342569600000" role="cell" class="epp-ar">2012-07-18</td>
      <td role="cell">Hiltonhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jamison</td>
      <td role="cell">Shanahan</td>
      <td data-value="261187200000" role="cell" class="epp-ar">1978-04-12</td>
      <td role="cell">Schaeferview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Gabrielle</td>
      <td role="cell">Cremin</td>
      <td data-value="48211200000" role="cell" class="epp-ar">1971-07-13</td>
      <td role="cell">Cassandrastad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Lillian</td>
      <td role="cell">Christiansen</td>
      <td data-value="450316800000" role="cell" class="epp-ar">1984-04-09</td>
      <td role="cell">Rennerfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Florencio</td>
      <td role="cell">Haley</td>
      <td data-value="-1144713600000" role="cell" class="epp-ar">1933-09-23</td>
      <td role="cell">Marquardtfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Betty</td>
      <td role="cell">Beatty</td>
      <td data-value="375840000000" role="cell" class="epp-ar">1981-11-29</td>
      <td role="cell">Wellingtonstad</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;
}