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
England Edythe Douglas 1962-09-05 Kennethmouth
England Jose Tillman 1969-10-11 New Candidoborough
England German Hammes 1915-08-21 Wunschborough
England Donnie Johns 1961-12-03 South Tannerhaven
England Jessyca Mosciski 1991-01-03 Lake Alexisborough
Northern Ireland Michael Mills 1990-07-17 West Robert
Northern Ireland Kip Von 1963-05-05 Silasland
England Bertram Hyatt 1998-08-05 Wunschport
Wales Shad Gibson 1948-01-09 Hackettchester
England Candido Heathcote 1994-10-08 Lake Sophieton
Northern Ireland Berta West 1964-05-22 Jakubowskiside
Northern Ireland Emory Jewess 1952-12-30 Murphyside
Wales Jessika O'Kon 1960-06-06 Port Alleneshire
Northern Ireland Justina Emmerich 1988-10-26 Breannafurt
Scotland Monique Wilderman 1939-05-22 Boyleland
Northern Ireland Karolann Klocko 2024-02-03 New Braedenmouth
England Earl Mills 1918-08-18 Lefflerstad
Scotland Benjamin Predovic 1979-04-28 Lake Ceciliafort
Wales Ronny Jones 1999-06-15 Port Thoraberg
Wales Audra Jerde 1979-11-26 Rempelburgh
Scotland Angelica Rohan 1964-12-01 Cleoraland
England D'angelo Wisozk 1945-10-07 East Olafton
England Ebony Nader 1945-03-11 South Alejandrin
Scotland Adelbert Powlowski 2001-11-13 New Daryl
Wales Deven Grant 1951-07-18 Wainoview
England Willy Stamm 2009-07-29 Bartolettistad
Northern Ireland Nicolas Sanford 1949-09-22 South Jarredfurt
Northern Ireland Zoey Kovacek 2000-05-14 South Evanborough
Scotland Richmond Upton 1963-11-20 Port Julietland
Wales Nadia Gorczany 1935-05-29 Terencebury
Scotland Paris Huel 1986-10-28 Vernicestad
Wales Herman Howe 1949-05-18 Port Karina
Wales Chandler Crona 2000-10-16 West Rosario
England Kameron Lowe 2007-12-05 West Jabaritown
Northern Ireland Flavio Schaefer 1915-03-31 Lake Angelport
Wales Era Miller 1973-09-10 North Eda
Scotland Fernando Herman 1990-10-20 Libbytown
Wales Buck Bode 1963-09-12 Chelseyside
Scotland Ofelia Cassin 1966-08-19 East Hiltonberg
Northern Ireland Cullen Buckridge 2019-11-16 North Kennethmouth
England Russel Baumbach 1997-08-14 South Kade
Scotland Sterling Carroll 1929-07-24 Port Branson
Scotland Norval Hirthe 1981-03-16 Lebsackchester
Wales Dakota Kohler 2021-05-15 Monserratstad
England Maximus Hermann 1957-02-22 South Kenneth
England Audrey Hermann 1963-08-02 Jordihaven
Scotland Hardy Kuhic 1987-11-30 Greenfelderview
Wales Delfina Crona 1957-10-21 Lake Pink
Wales Dolores Daniel 1988-09-28 West Aryanna
Northern Ireland Genesis Quigley 1947-01-22 South Nakiabury

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">England</td>
      <td role="cell">Edythe</td>
      <td role="cell">Douglas</td>
      <td data-value="-231120000000" role="cell" class="epp-ar">1962-09-05</td>
      <td role="cell">Kennethmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jose</td>
      <td role="cell">Tillman</td>
      <td data-value="-7084800000" role="cell" class="epp-ar">1969-10-11</td>
      <td role="cell">New Candidoborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">German</td>
      <td role="cell">Hammes</td>
      <td data-value="-1715644800000" role="cell" class="epp-ar">1915-08-21</td>
      <td role="cell">Wunschborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Donnie</td>
      <td role="cell">Johns</td>
      <td data-value="-254966400000" role="cell" class="epp-ar">1961-12-03</td>
      <td role="cell">South Tannerhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jessyca</td>
      <td role="cell">Mosciski</td>
      <td data-value="662860800000" role="cell" class="epp-ar">1991-01-03</td>
      <td role="cell">Lake Alexisborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Michael</td>
      <td role="cell">Mills</td>
      <td data-value="648172800000" role="cell" class="epp-ar">1990-07-17</td>
      <td role="cell">West Robert</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kip</td>
      <td role="cell">Von</td>
      <td data-value="-210211200000" role="cell" class="epp-ar">1963-05-05</td>
      <td role="cell">Silasland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Bertram</td>
      <td role="cell">Hyatt</td>
      <td data-value="902275200000" role="cell" class="epp-ar">1998-08-05</td>
      <td role="cell">Wunschport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Shad</td>
      <td role="cell">Gibson</td>
      <td data-value="-693619200000" role="cell" class="epp-ar">1948-01-09</td>
      <td role="cell">Hackettchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Candido</td>
      <td role="cell">Heathcote</td>
      <td data-value="781574400000" role="cell" class="epp-ar">1994-10-08</td>
      <td role="cell">Lake Sophieton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Berta</td>
      <td role="cell">West</td>
      <td data-value="-177120000000" role="cell" class="epp-ar">1964-05-22</td>
      <td role="cell">Jakubowskiside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Emory</td>
      <td role="cell">Jewess</td>
      <td data-value="-536630400000" role="cell" class="epp-ar">1952-12-30</td>
      <td role="cell">Murphyside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jessika</td>
      <td role="cell">O'Kon</td>
      <td data-value="-302054400000" role="cell" class="epp-ar">1960-06-06</td>
      <td role="cell">Port Alleneshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Justina</td>
      <td role="cell">Emmerich</td>
      <td data-value="593827200000" role="cell" class="epp-ar">1988-10-26</td>
      <td role="cell">Breannafurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Monique</td>
      <td role="cell">Wilderman</td>
      <td data-value="-966124800000" role="cell" class="epp-ar">1939-05-22</td>
      <td role="cell">Boyleland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Karolann</td>
      <td role="cell">Klocko</td>
      <td data-value="1706918400000" role="cell" class="epp-ar">2024-02-03</td>
      <td role="cell">New Braedenmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Earl</td>
      <td role="cell">Mills</td>
      <td data-value="-1621209600000" role="cell" class="epp-ar">1918-08-18</td>
      <td role="cell">Lefflerstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Benjamin</td>
      <td role="cell">Predovic</td>
      <td data-value="294105600000" role="cell" class="epp-ar">1979-04-28</td>
      <td role="cell">Lake Ceciliafort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Ronny</td>
      <td role="cell">Jones</td>
      <td data-value="929404800000" role="cell" class="epp-ar">1999-06-15</td>
      <td role="cell">Port Thoraberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Audra</td>
      <td role="cell">Jerde</td>
      <td data-value="312422400000" role="cell" class="epp-ar">1979-11-26</td>
      <td role="cell">Rempelburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Angelica</td>
      <td role="cell">Rohan</td>
      <td data-value="-160444800000" role="cell" class="epp-ar">1964-12-01</td>
      <td role="cell">Cleoraland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">D'angelo</td>
      <td role="cell">Wisozk</td>
      <td data-value="-764812800000" role="cell" class="epp-ar">1945-10-07</td>
      <td role="cell">East Olafton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Ebony</td>
      <td role="cell">Nader</td>
      <td data-value="-782956800000" role="cell" class="epp-ar">1945-03-11</td>
      <td role="cell">South Alejandrin</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Adelbert</td>
      <td role="cell">Powlowski</td>
      <td data-value="1005609600000" role="cell" class="epp-ar">2001-11-13</td>
      <td role="cell">New Daryl</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Deven</td>
      <td role="cell">Grant</td>
      <td data-value="-582508800000" role="cell" class="epp-ar">1951-07-18</td>
      <td role="cell">Wainoview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Willy</td>
      <td role="cell">Stamm</td>
      <td data-value="1248825600000" role="cell" class="epp-ar">2009-07-29</td>
      <td role="cell">Bartolettistad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Nicolas</td>
      <td role="cell">Sanford</td>
      <td data-value="-639878400000" role="cell" class="epp-ar">1949-09-22</td>
      <td role="cell">South Jarredfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Zoey</td>
      <td role="cell">Kovacek</td>
      <td data-value="958262400000" role="cell" class="epp-ar">2000-05-14</td>
      <td role="cell">South Evanborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Richmond</td>
      <td role="cell">Upton</td>
      <td data-value="-193017600000" role="cell" class="epp-ar">1963-11-20</td>
      <td role="cell">Port Julietland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Nadia</td>
      <td role="cell">Gorczany</td>
      <td data-value="-1091750400000" role="cell" class="epp-ar">1935-05-29</td>
      <td role="cell">Terencebury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Paris</td>
      <td role="cell">Huel</td>
      <td data-value="530841600000" role="cell" class="epp-ar">1986-10-28</td>
      <td role="cell">Vernicestad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Herman</td>
      <td role="cell">Howe</td>
      <td data-value="-650851200000" role="cell" class="epp-ar">1949-05-18</td>
      <td role="cell">Port Karina</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Chandler</td>
      <td role="cell">Crona</td>
      <td data-value="971654400000" role="cell" class="epp-ar">2000-10-16</td>
      <td role="cell">West Rosario</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Kameron</td>
      <td role="cell">Lowe</td>
      <td data-value="1196812800000" role="cell" class="epp-ar">2007-12-05</td>
      <td role="cell">West Jabaritown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Flavio</td>
      <td role="cell">Schaefer</td>
      <td data-value="-1728000000000" role="cell" class="epp-ar">1915-03-31</td>
      <td role="cell">Lake Angelport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Era</td>
      <td role="cell">Miller</td>
      <td data-value="116467200000" role="cell" class="epp-ar">1973-09-10</td>
      <td role="cell">North Eda</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Fernando</td>
      <td role="cell">Herman</td>
      <td data-value="656380800000" role="cell" class="epp-ar">1990-10-20</td>
      <td role="cell">Libbytown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Buck</td>
      <td role="cell">Bode</td>
      <td data-value="-198979200000" role="cell" class="epp-ar">1963-09-12</td>
      <td role="cell">Chelseyside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Ofelia</td>
      <td role="cell">Cassin</td>
      <td data-value="-106358400000" role="cell" class="epp-ar">1966-08-19</td>
      <td role="cell">East Hiltonberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Cullen</td>
      <td role="cell">Buckridge</td>
      <td data-value="1573862400000" role="cell" class="epp-ar">2019-11-16</td>
      <td role="cell">North Kennethmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Russel</td>
      <td role="cell">Baumbach</td>
      <td data-value="871516800000" role="cell" class="epp-ar">1997-08-14</td>
      <td role="cell">South Kade</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Sterling</td>
      <td role="cell">Carroll</td>
      <td data-value="-1276214400000" role="cell" class="epp-ar">1929-07-24</td>
      <td role="cell">Port Branson</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Norval</td>
      <td role="cell">Hirthe</td>
      <td data-value="353548800000" role="cell" class="epp-ar">1981-03-16</td>
      <td role="cell">Lebsackchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Dakota</td>
      <td role="cell">Kohler</td>
      <td data-value="1621036800000" role="cell" class="epp-ar">2021-05-15</td>
      <td role="cell">Monserratstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Maximus</td>
      <td role="cell">Hermann</td>
      <td data-value="-405734400000" role="cell" class="epp-ar">1957-02-22</td>
      <td role="cell">South Kenneth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Audrey</td>
      <td role="cell">Hermann</td>
      <td data-value="-202521600000" role="cell" class="epp-ar">1963-08-02</td>
      <td role="cell">Jordihaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Hardy</td>
      <td role="cell">Kuhic</td>
      <td data-value="565228800000" role="cell" class="epp-ar">1987-11-30</td>
      <td role="cell">Greenfelderview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Delfina</td>
      <td role="cell">Crona</td>
      <td data-value="-384912000000" role="cell" class="epp-ar">1957-10-21</td>
      <td role="cell">Lake Pink</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Dolores</td>
      <td role="cell">Daniel</td>
      <td data-value="591408000000" role="cell" class="epp-ar">1988-09-28</td>
      <td role="cell">West Aryanna</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Genesis</td>
      <td role="cell">Quigley</td>
      <td data-value="-724032000000" role="cell" class="epp-ar">1947-01-22</td>
      <td role="cell">South Nakiabury</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;
}