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
Scotland Everardo Fritsch 1904-07-09 Port Theresehaven
Scotland Cassandra Wuckert 1936-11-26 Haylieport
Northern Ireland Berneice Sipes 1983-09-22 North Amara
Scotland Jamey Wehner 1961-03-30 West Solonfurt
Scotland Agnes Swaniawski 1950-11-24 North Josieshire
England Gladys Okuneva 1982-05-28 Deontaefort
Wales Adelbert Lehner 2020-01-02 Jamilberg
Wales Tremayne Schumm 2021-09-11 East Keatonfort
Wales Raphaelle Rosenbaum 1915-04-06 South Margieton
Northern Ireland Adrienne Hoeger 2018-10-26 East Savanahshire
Wales Myrna Koss 2010-12-12 Ignatiusmouth
Scotland Filomena Wolf 1966-07-03 Wayneview
Scotland Katarina Yost 1944-07-19 South Camronport
Northern Ireland Tracey Weber 1968-11-10 New Sigurd
Northern Ireland Gianni Marvin 1961-05-09 Izabellaside
Scotland Mavis Lesch 1969-05-12 North Elsaside
Scotland Murray Mertz 1999-12-23 O'Reillyville
Scotland Ashlee Swift 2012-02-09 New Tracemouth
England Isac White 2013-11-02 North Jerald
Northern Ireland Kaela Jaskolski 1990-07-30 Maggiomouth
Scotland Kole Purdy 2005-06-03 North Arvilla
Northern Ireland Dorian Buckridge 1969-09-22 East Dax
Northern Ireland Angelo Nicolas 2013-09-21 Port Carleystad
Wales Carli Mayert 1916-06-14 East Terencefort
England Iliana Funk 2007-08-23 Juliaberg
Northern Ireland Verlie Oberbrunner 1978-09-10 Cleoraburgh
Wales Immanuel Bailey 1961-04-17 Stehrbury
Northern Ireland Jewell Hirthe 1961-12-08 Rasheedburgh
Scotland Krystina Orn 1926-03-10 Generalview
Scotland Abbey Considine 1924-09-05 Hadleyberg
Scotland Orrin Kuhlman 1917-12-04 Turcotteland
Wales Lucinda Wisoky 1934-12-14 Kathleenport
Scotland Janick Beier 2022-05-20 Pollichmouth
Scotland Amari Stroman 1967-03-14 East Rhiannon
Scotland Thelma Mills 1937-04-26 Daughertyfurt
Scotland Lela Barton 1926-05-09 East Mack
Northern Ireland Mark Gutmann 1941-10-22 New Berryshire
England Jamal Aufderhar 1961-08-28 Trystanshire
Scotland Kieran Windler 1975-03-25 Jaceview
England Ebony Jast 1917-10-09 Kirstinstad
England Lonny Ebert 1939-11-23 Port Maxine
Scotland Lizeth Runolfsdottir 2005-02-28 South Lelia
Wales Zaria Nicolas 1961-01-20 Port Lauraville
Scotland Kory Smith 2014-06-18 South Toyhaven
Northern Ireland Clemens Gleichner 1959-06-12 Lazarobury
Scotland Jessika Bergstrom 1960-06-12 New Luztown
Northern Ireland Jermey Huels 1970-05-04 Karliefort
Wales Jaime Swift 2003-03-15 Port Ernashire
Scotland Pearlie Emmerich 1978-02-16 East Deborah
Scotland Kareem Schultz 1940-02-20 West Brandi

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">Scotland</td>
      <td role="cell">Everardo</td>
      <td role="cell">Fritsch</td>
      <td data-value="-2066428800000" role="cell" class="epp-ar">1904-07-09</td>
      <td role="cell">Port Theresehaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Cassandra</td>
      <td role="cell">Wuckert</td>
      <td data-value="-1044489600000" role="cell" class="epp-ar">1936-11-26</td>
      <td role="cell">Haylieport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Berneice</td>
      <td role="cell">Sipes</td>
      <td data-value="433036800000" role="cell" class="epp-ar">1983-09-22</td>
      <td role="cell">North Amara</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jamey</td>
      <td role="cell">Wehner</td>
      <td data-value="-276393600000" role="cell" class="epp-ar">1961-03-30</td>
      <td role="cell">West Solonfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Agnes</td>
      <td role="cell">Swaniawski</td>
      <td data-value="-602899200000" role="cell" class="epp-ar">1950-11-24</td>
      <td role="cell">North Josieshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Gladys</td>
      <td role="cell">Okuneva</td>
      <td data-value="391392000000" role="cell" class="epp-ar">1982-05-28</td>
      <td role="cell">Deontaefort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Adelbert</td>
      <td role="cell">Lehner</td>
      <td data-value="1577923200000" role="cell" class="epp-ar">2020-01-02</td>
      <td role="cell">Jamilberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Tremayne</td>
      <td role="cell">Schumm</td>
      <td data-value="1631318400000" role="cell" class="epp-ar">2021-09-11</td>
      <td role="cell">East Keatonfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Raphaelle</td>
      <td role="cell">Rosenbaum</td>
      <td data-value="-1727481600000" role="cell" class="epp-ar">1915-04-06</td>
      <td role="cell">South Margieton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Adrienne</td>
      <td role="cell">Hoeger</td>
      <td data-value="1540512000000" role="cell" class="epp-ar">2018-10-26</td>
      <td role="cell">East Savanahshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Myrna</td>
      <td role="cell">Koss</td>
      <td data-value="1292112000000" role="cell" class="epp-ar">2010-12-12</td>
      <td role="cell">Ignatiusmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Filomena</td>
      <td role="cell">Wolf</td>
      <td data-value="-110419200000" role="cell" class="epp-ar">1966-07-03</td>
      <td role="cell">Wayneview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Katarina</td>
      <td role="cell">Yost</td>
      <td data-value="-803260800000" role="cell" class="epp-ar">1944-07-19</td>
      <td role="cell">South Camronport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Tracey</td>
      <td role="cell">Weber</td>
      <td data-value="-36028800000" role="cell" class="epp-ar">1968-11-10</td>
      <td role="cell">New Sigurd</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Gianni</td>
      <td role="cell">Marvin</td>
      <td data-value="-272937600000" role="cell" class="epp-ar">1961-05-09</td>
      <td role="cell">Izabellaside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Mavis</td>
      <td role="cell">Lesch</td>
      <td data-value="-20217600000" role="cell" class="epp-ar">1969-05-12</td>
      <td role="cell">North Elsaside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Murray</td>
      <td role="cell">Mertz</td>
      <td data-value="945907200000" role="cell" class="epp-ar">1999-12-23</td>
      <td role="cell">O'Reillyville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Ashlee</td>
      <td role="cell">Swift</td>
      <td data-value="1328745600000" role="cell" class="epp-ar">2012-02-09</td>
      <td role="cell">New Tracemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Isac</td>
      <td role="cell">White</td>
      <td data-value="1383350400000" role="cell" class="epp-ar">2013-11-02</td>
      <td role="cell">North Jerald</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kaela</td>
      <td role="cell">Jaskolski</td>
      <td data-value="649296000000" role="cell" class="epp-ar">1990-07-30</td>
      <td role="cell">Maggiomouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kole</td>
      <td role="cell">Purdy</td>
      <td data-value="1117756800000" role="cell" class="epp-ar">2005-06-03</td>
      <td role="cell">North Arvilla</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Dorian</td>
      <td role="cell">Buckridge</td>
      <td data-value="-8726400000" role="cell" class="epp-ar">1969-09-22</td>
      <td role="cell">East Dax</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Angelo</td>
      <td role="cell">Nicolas</td>
      <td data-value="1379721600000" role="cell" class="epp-ar">2013-09-21</td>
      <td role="cell">Port Carleystad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Carli</td>
      <td role="cell">Mayert</td>
      <td data-value="-1689897600000" role="cell" class="epp-ar">1916-06-14</td>
      <td role="cell">East Terencefort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Iliana</td>
      <td role="cell">Funk</td>
      <td data-value="1187827200000" role="cell" class="epp-ar">2007-08-23</td>
      <td role="cell">Juliaberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Verlie</td>
      <td role="cell">Oberbrunner</td>
      <td data-value="274233600000" role="cell" class="epp-ar">1978-09-10</td>
      <td role="cell">Cleoraburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Immanuel</td>
      <td role="cell">Bailey</td>
      <td data-value="-274838400000" role="cell" class="epp-ar">1961-04-17</td>
      <td role="cell">Stehrbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jewell</td>
      <td role="cell">Hirthe</td>
      <td data-value="-254534400000" role="cell" class="epp-ar">1961-12-08</td>
      <td role="cell">Rasheedburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Krystina</td>
      <td role="cell">Orn</td>
      <td data-value="-1382659200000" role="cell" class="epp-ar">1926-03-10</td>
      <td role="cell">Generalview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Abbey</td>
      <td role="cell">Considine</td>
      <td data-value="-1430265600000" role="cell" class="epp-ar">1924-09-05</td>
      <td role="cell">Hadleyberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Orrin</td>
      <td role="cell">Kuhlman</td>
      <td data-value="-1643414400000" role="cell" class="epp-ar">1917-12-04</td>
      <td role="cell">Turcotteland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lucinda</td>
      <td role="cell">Wisoky</td>
      <td data-value="-1106092800000" role="cell" class="epp-ar">1934-12-14</td>
      <td role="cell">Kathleenport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Janick</td>
      <td role="cell">Beier</td>
      <td data-value="1653004800000" role="cell" class="epp-ar">2022-05-20</td>
      <td role="cell">Pollichmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Amari</td>
      <td role="cell">Stroman</td>
      <td data-value="-88473600000" role="cell" class="epp-ar">1967-03-14</td>
      <td role="cell">East Rhiannon</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Thelma</td>
      <td role="cell">Mills</td>
      <td data-value="-1031443200000" role="cell" class="epp-ar">1937-04-26</td>
      <td role="cell">Daughertyfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Lela</td>
      <td role="cell">Barton</td>
      <td data-value="-1377475200000" role="cell" class="epp-ar">1926-05-09</td>
      <td role="cell">East Mack</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Mark</td>
      <td role="cell">Gutmann</td>
      <td data-value="-889747200000" role="cell" class="epp-ar">1941-10-22</td>
      <td role="cell">New Berryshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jamal</td>
      <td role="cell">Aufderhar</td>
      <td data-value="-263347200000" role="cell" class="epp-ar">1961-08-28</td>
      <td role="cell">Trystanshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kieran</td>
      <td role="cell">Windler</td>
      <td data-value="164937600000" role="cell" class="epp-ar">1975-03-25</td>
      <td role="cell">Jaceview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Ebony</td>
      <td role="cell">Jast</td>
      <td data-value="-1648252800000" role="cell" class="epp-ar">1917-10-09</td>
      <td role="cell">Kirstinstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lonny</td>
      <td role="cell">Ebert</td>
      <td data-value="-950140800000" role="cell" class="epp-ar">1939-11-23</td>
      <td role="cell">Port Maxine</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Lizeth</td>
      <td role="cell">Runolfsdottir</td>
      <td data-value="1109548800000" role="cell" class="epp-ar">2005-02-28</td>
      <td role="cell">South Lelia</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Zaria</td>
      <td role="cell">Nicolas</td>
      <td data-value="-282355200000" role="cell" class="epp-ar">1961-01-20</td>
      <td role="cell">Port Lauraville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kory</td>
      <td role="cell">Smith</td>
      <td data-value="1403049600000" role="cell" class="epp-ar">2014-06-18</td>
      <td role="cell">South Toyhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Clemens</td>
      <td role="cell">Gleichner</td>
      <td data-value="-333158400000" role="cell" class="epp-ar">1959-06-12</td>
      <td role="cell">Lazarobury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jessika</td>
      <td role="cell">Bergstrom</td>
      <td data-value="-301536000000" role="cell" class="epp-ar">1960-06-12</td>
      <td role="cell">New Luztown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jermey</td>
      <td role="cell">Huels</td>
      <td data-value="10627200000" role="cell" class="epp-ar">1970-05-04</td>
      <td role="cell">Karliefort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jaime</td>
      <td role="cell">Swift</td>
      <td data-value="1047686400000" role="cell" class="epp-ar">2003-03-15</td>
      <td role="cell">Port Ernashire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Pearlie</td>
      <td role="cell">Emmerich</td>
      <td data-value="256435200000" role="cell" class="epp-ar">1978-02-16</td>
      <td role="cell">East Deborah</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kareem</td>
      <td role="cell">Schultz</td>
      <td data-value="-942451200000" role="cell" class="epp-ar">1940-02-20</td>
      <td role="cell">West Brandi</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;
}