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 Claudie Erdman 1937-01-31 North Leilaniburgh
England Chadrick Schneider 2007-08-22 Melyssastad
England Viva Gleichner 1931-10-29 Hauckmouth
Northern Ireland Dax Ratke 1968-11-22 Kittyborough
England Clay Kerluke 1987-04-08 Port Layne
Wales Enos Schmeler 1933-02-27 West Peggieton
Northern Ireland Lola Bauch 1903-09-29 South Robin
Wales Aubrey Feeney 2016-12-18 Schaeferview
Scotland Brooke Harvey 1989-08-17 Gailton
Northern Ireland Palma Harvey 1915-01-08 New Kellieshire
Northern Ireland Korbin Dietrich 1934-06-15 South Estelleborough
Northern Ireland Hubert Purdy 1998-07-29 Isaiside
Scotland Renee Cassin 1917-08-28 Shieldsfort
Northern Ireland Georgette Gaylord 1970-04-23 New Cristophershire
Scotland Merl Ziemann 1902-05-23 Hermistonport
Northern Ireland Odie Murphy 1963-02-06 Monroetown
Wales Trystan Gislason 1941-09-27 Litzyshire
Scotland Joey Hoeger 1967-02-01 Lake Deangeloshire
Scotland Mossie McGlynn 1935-07-17 Carybury
Scotland Shawna Rogahn 1981-08-05 Medhurstland
Northern Ireland Tyree Carroll 1995-06-12 Braunmouth
Northern Ireland Sasha Schimmel 1911-03-31 East Murray
England Chet Reichel 1968-06-25 Paulhaven
Scotland Agustin Larson 1968-01-13 Port Lila
Northern Ireland Johnathan Kohler 1985-07-11 West Olgaberg
Scotland Thomas Wolff 1970-07-21 North Bernieceberg
Scotland Luella Beer 2003-07-04 New Kelleyborough
Northern Ireland Daniella Beier 1972-02-04 Durganmouth
England Alan Borer 1931-09-07 Gorczanyland
Wales Milford Schimmel 2015-07-23 O'Haraport
Northern Ireland Idell Zieme 1931-10-05 Wehnerburgh
Wales Chaya Paucek 1960-05-18 Mikaylaton
Wales Wallace Hoeger 2023-04-23 Celestineton
Scotland Audie Bernhard 1969-01-03 Eltastad
Scotland Graham Miller 1926-01-19 Lake Berthaport
Northern Ireland Montana Kulas 1941-12-11 Benniestad
Northern Ireland Dixie Bins 1990-04-15 East Ernesto
Northern Ireland Eunice O'Connell 2019-05-24 Strosinville
England Ellsworth Wintheiser 2010-01-22 South Ahmedshire
Northern Ireland Osborne Friesen 1937-11-25 Oswaldoside
Northern Ireland Felipe Lehner 1944-05-24 New Candidoburgh
Wales David Towne 1999-08-25 Pfannerstillland
England Tyshawn Langosh 1966-12-04 Keelingstad
Wales Audrey Price 2000-05-03 North Davionshire
Wales Lew Bernhard 2006-07-17 Albertabury
England Chelsea Ernser 1984-02-10 Robertsmouth
Northern Ireland Margarete Howe 1963-04-29 Simonisberg
England Eldridge Stoltenberg 1949-07-05 Port Jaycee
Scotland Lauretta Mills 1966-12-29 West Rashad
Wales Cecile Auer 2007-06-01 Hackettview

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">Claudie</td>
      <td role="cell">Erdman</td>
      <td data-value="-1038787200000" role="cell" class="epp-ar">1937-01-31</td>
      <td role="cell">North Leilaniburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Chadrick</td>
      <td role="cell">Schneider</td>
      <td data-value="1187740800000" role="cell" class="epp-ar">2007-08-22</td>
      <td role="cell">Melyssastad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Viva</td>
      <td role="cell">Gleichner</td>
      <td data-value="-1204761600000" role="cell" class="epp-ar">1931-10-29</td>
      <td role="cell">Hauckmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Dax</td>
      <td role="cell">Ratke</td>
      <td data-value="-34992000000" role="cell" class="epp-ar">1968-11-22</td>
      <td role="cell">Kittyborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Clay</td>
      <td role="cell">Kerluke</td>
      <td data-value="544838400000" role="cell" class="epp-ar">1987-04-08</td>
      <td role="cell">Port Layne</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Enos</td>
      <td role="cell">Schmeler</td>
      <td data-value="-1162684800000" role="cell" class="epp-ar">1933-02-27</td>
      <td role="cell">West Peggieton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Lola</td>
      <td role="cell">Bauch</td>
      <td data-value="-2090966400000" role="cell" class="epp-ar">1903-09-29</td>
      <td role="cell">South Robin</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Aubrey</td>
      <td role="cell">Feeney</td>
      <td data-value="1482019200000" role="cell" class="epp-ar">2016-12-18</td>
      <td role="cell">Schaeferview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Brooke</td>
      <td role="cell">Harvey</td>
      <td data-value="619315200000" role="cell" class="epp-ar">1989-08-17</td>
      <td role="cell">Gailton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Palma</td>
      <td role="cell">Harvey</td>
      <td data-value="-1735084800000" role="cell" class="epp-ar">1915-01-08</td>
      <td role="cell">New Kellieshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Korbin</td>
      <td role="cell">Dietrich</td>
      <td data-value="-1121817600000" role="cell" class="epp-ar">1934-06-15</td>
      <td role="cell">South Estelleborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Hubert</td>
      <td role="cell">Purdy</td>
      <td data-value="901670400000" role="cell" class="epp-ar">1998-07-29</td>
      <td role="cell">Isaiside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Renee</td>
      <td role="cell">Cassin</td>
      <td data-value="-1651881600000" role="cell" class="epp-ar">1917-08-28</td>
      <td role="cell">Shieldsfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Georgette</td>
      <td role="cell">Gaylord</td>
      <td data-value="9676800000" role="cell" class="epp-ar">1970-04-23</td>
      <td role="cell">New Cristophershire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Merl</td>
      <td role="cell">Ziemann</td>
      <td data-value="-2133648000000" role="cell" class="epp-ar">1902-05-23</td>
      <td role="cell">Hermistonport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Odie</td>
      <td role="cell">Murphy</td>
      <td data-value="-217814400000" role="cell" class="epp-ar">1963-02-06</td>
      <td role="cell">Monroetown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Trystan</td>
      <td role="cell">Gislason</td>
      <td data-value="-891907200000" role="cell" class="epp-ar">1941-09-27</td>
      <td role="cell">Litzyshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Joey</td>
      <td role="cell">Hoeger</td>
      <td data-value="-92016000000" role="cell" class="epp-ar">1967-02-01</td>
      <td role="cell">Lake Deangeloshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Mossie</td>
      <td role="cell">McGlynn</td>
      <td data-value="-1087516800000" role="cell" class="epp-ar">1935-07-17</td>
      <td role="cell">Carybury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Shawna</td>
      <td role="cell">Rogahn</td>
      <td data-value="365817600000" role="cell" class="epp-ar">1981-08-05</td>
      <td role="cell">Medhurstland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Tyree</td>
      <td role="cell">Carroll</td>
      <td data-value="802915200000" role="cell" class="epp-ar">1995-06-12</td>
      <td role="cell">Braunmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Sasha</td>
      <td role="cell">Schimmel</td>
      <td data-value="-1854230400000" role="cell" class="epp-ar">1911-03-31</td>
      <td role="cell">East Murray</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Chet</td>
      <td role="cell">Reichel</td>
      <td data-value="-47952000000" role="cell" class="epp-ar">1968-06-25</td>
      <td role="cell">Paulhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Agustin</td>
      <td role="cell">Larson</td>
      <td data-value="-62121600000" role="cell" class="epp-ar">1968-01-13</td>
      <td role="cell">Port Lila</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Johnathan</td>
      <td role="cell">Kohler</td>
      <td data-value="489888000000" role="cell" class="epp-ar">1985-07-11</td>
      <td role="cell">West Olgaberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Thomas</td>
      <td role="cell">Wolff</td>
      <td data-value="17366400000" role="cell" class="epp-ar">1970-07-21</td>
      <td role="cell">North Bernieceberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Luella</td>
      <td role="cell">Beer</td>
      <td data-value="1057276800000" role="cell" class="epp-ar">2003-07-04</td>
      <td role="cell">New Kelleyborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Daniella</td>
      <td role="cell">Beier</td>
      <td data-value="66009600000" role="cell" class="epp-ar">1972-02-04</td>
      <td role="cell">Durganmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alan</td>
      <td role="cell">Borer</td>
      <td data-value="-1209254400000" role="cell" class="epp-ar">1931-09-07</td>
      <td role="cell">Gorczanyland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Milford</td>
      <td role="cell">Schimmel</td>
      <td data-value="1437609600000" role="cell" class="epp-ar">2015-07-23</td>
      <td role="cell">O'Haraport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Idell</td>
      <td role="cell">Zieme</td>
      <td data-value="-1206835200000" role="cell" class="epp-ar">1931-10-05</td>
      <td role="cell">Wehnerburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Chaya</td>
      <td role="cell">Paucek</td>
      <td data-value="-303696000000" role="cell" class="epp-ar">1960-05-18</td>
      <td role="cell">Mikaylaton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Wallace</td>
      <td role="cell">Hoeger</td>
      <td data-value="1682208000000" role="cell" class="epp-ar">2023-04-23</td>
      <td role="cell">Celestineton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Audie</td>
      <td role="cell">Bernhard</td>
      <td data-value="-31363200000" role="cell" class="epp-ar">1969-01-03</td>
      <td role="cell">Eltastad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Graham</td>
      <td role="cell">Miller</td>
      <td data-value="-1386979200000" role="cell" class="epp-ar">1926-01-19</td>
      <td role="cell">Lake Berthaport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Montana</td>
      <td role="cell">Kulas</td>
      <td data-value="-885427200000" role="cell" class="epp-ar">1941-12-11</td>
      <td role="cell">Benniestad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Dixie</td>
      <td role="cell">Bins</td>
      <td data-value="640137600000" role="cell" class="epp-ar">1990-04-15</td>
      <td role="cell">East Ernesto</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Eunice</td>
      <td role="cell">O'Connell</td>
      <td data-value="1558656000000" role="cell" class="epp-ar">2019-05-24</td>
      <td role="cell">Strosinville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Ellsworth</td>
      <td role="cell">Wintheiser</td>
      <td data-value="1264118400000" role="cell" class="epp-ar">2010-01-22</td>
      <td role="cell">South Ahmedshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Osborne</td>
      <td role="cell">Friesen</td>
      <td data-value="-1013040000000" role="cell" class="epp-ar">1937-11-25</td>
      <td role="cell">Oswaldoside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Felipe</td>
      <td role="cell">Lehner</td>
      <td data-value="-808099200000" role="cell" class="epp-ar">1944-05-24</td>
      <td role="cell">New Candidoburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">David</td>
      <td role="cell">Towne</td>
      <td data-value="935539200000" role="cell" class="epp-ar">1999-08-25</td>
      <td role="cell">Pfannerstillland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Tyshawn</td>
      <td role="cell">Langosh</td>
      <td data-value="-97113600000" role="cell" class="epp-ar">1966-12-04</td>
      <td role="cell">Keelingstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Audrey</td>
      <td role="cell">Price</td>
      <td data-value="957312000000" role="cell" class="epp-ar">2000-05-03</td>
      <td role="cell">North Davionshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lew</td>
      <td role="cell">Bernhard</td>
      <td data-value="1153094400000" role="cell" class="epp-ar">2006-07-17</td>
      <td role="cell">Albertabury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Chelsea</td>
      <td role="cell">Ernser</td>
      <td data-value="445219200000" role="cell" class="epp-ar">1984-02-10</td>
      <td role="cell">Robertsmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Margarete</td>
      <td role="cell">Howe</td>
      <td data-value="-210729600000" role="cell" class="epp-ar">1963-04-29</td>
      <td role="cell">Simonisberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Eldridge</td>
      <td role="cell">Stoltenberg</td>
      <td data-value="-646704000000" role="cell" class="epp-ar">1949-07-05</td>
      <td role="cell">Port Jaycee</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Lauretta</td>
      <td role="cell">Mills</td>
      <td data-value="-94953600000" role="cell" class="epp-ar">1966-12-29</td>
      <td role="cell">West Rashad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Cecile</td>
      <td role="cell">Auer</td>
      <td data-value="1180656000000" role="cell" class="epp-ar">2007-06-01</td>
      <td role="cell">Hackettview</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;
}