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 Jayne Morar 1959-01-12 Gleichnermouth
Wales Winifred Emmerich 1958-06-26 South Conor
Northern Ireland Alexa Wilkinson 2006-12-06 Laurianeport
Scotland Annette Dicki 1939-01-13 Bradtkeport
Northern Ireland Niko McGlynn 1999-08-22 Collinsstad
Northern Ireland Estelle Blick 1998-12-25 Celiaton
Scotland Jacey Morissette 1960-02-03 Quitzonburgh
Scotland Faye Hammes 1925-04-25 Blockburgh
England Jermain Boyer 1980-02-04 North Colton
England Whitney Boehm 2011-09-19 Lake Tabithamouth
England Kaelyn Waelchi 1965-01-25 Dibbertmouth
Wales Marlin Prohaska 1974-09-25 East Wendy
England Tina Crooks 1952-08-11 North Isabellview
Scotland Ethan Hyatt 1939-01-28 Lake Tomport
England Leann Schmeler 1953-07-08 Kuvalisborough
England Blake Schoen 1991-03-31 New Shanelton
Scotland Gaetano Legros 1963-03-12 North Kathrynebury
Wales Whitney Cartwright 1977-02-01 New Mikelside
Wales Josephine Hegmann 1982-07-07 New Edison
England Hal Heidenreich 1979-09-21 Port Wellingtonton
Northern Ireland Maci Muller 2011-03-01 North Justyntown
Northern Ireland Barney Mohr 1978-01-14 South Oren
Wales Otto Krajcik 1975-10-22 Simeonburgh
Northern Ireland Jonathan Bednar 1971-09-02 Port Annamae
England Priscilla Collier 2002-04-03 Lenniechester
Wales Kamille Schowalter 2013-06-28 Dickinsonview
Scotland Maureen Rodriguez 1956-01-14 Wintheiserside
Scotland Cody Fisher 1994-10-08 Colefurt
England Luisa Wyman 1953-07-11 Madisonburgh
England Enrique Renner 1986-08-07 South Georgianna
Northern Ireland Joaquin Gleichner 1977-12-13 New Karson
Northern Ireland Ebony Keebler 2015-12-04 Gorczanyburgh
Wales Sabina Weber 2014-03-11 Shadchester
Wales Ulices Johnson 1963-08-09 North Oma
Scotland Murray Reynolds 1986-01-01 Frederiqueland
Wales Alta VonRueden 2004-12-18 West Tatemouth
Northern Ireland Janis Schiller 2012-08-08 New Donnietown
Wales Hector Gulgowski 1955-07-01 South Rickyberg
Northern Ireland Name Bogan 1971-08-14 Boehmside
Scotland Verla Schoen 1970-05-03 Lake Maxwellfort
Wales Violet Pagac 1937-07-05 South Shanie
Wales Rhiannon Ortiz 1914-04-17 Hansenchester
Northern Ireland April Langosh 1958-03-04 Schoenland
Wales Rico Lehner 1997-03-13 Hilperthaven
England Lupe Wilkinson 2015-10-27 West Thorabury
Wales Sandy Kling 1988-10-30 Port Clairstad
Scotland Donato Bernier 2023-07-03 North Antoneburgh
England Candice Parker 1963-06-09 East Michale
Scotland Maxime Ledner 1938-03-13 Runteborough
England Ellie Collier 2017-01-01 North Kalibury

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">Jayne</td>
      <td role="cell">Morar</td>
      <td data-value="-346204800000" role="cell" class="epp-ar">1959-01-12</td>
      <td role="cell">Gleichnermouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Winifred</td>
      <td role="cell">Emmerich</td>
      <td data-value="-363484800000" role="cell" class="epp-ar">1958-06-26</td>
      <td role="cell">South Conor</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Alexa</td>
      <td role="cell">Wilkinson</td>
      <td data-value="1165363200000" role="cell" class="epp-ar">2006-12-06</td>
      <td role="cell">Laurianeport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Annette</td>
      <td role="cell">Dicki</td>
      <td data-value="-977270400000" role="cell" class="epp-ar">1939-01-13</td>
      <td role="cell">Bradtkeport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Niko</td>
      <td role="cell">McGlynn</td>
      <td data-value="935280000000" role="cell" class="epp-ar">1999-08-22</td>
      <td role="cell">Collinsstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Estelle</td>
      <td role="cell">Blick</td>
      <td data-value="914544000000" role="cell" class="epp-ar">1998-12-25</td>
      <td role="cell">Celiaton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jacey</td>
      <td role="cell">Morissette</td>
      <td data-value="-312768000000" role="cell" class="epp-ar">1960-02-03</td>
      <td role="cell">Quitzonburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Faye</td>
      <td role="cell">Hammes</td>
      <td data-value="-1410220800000" role="cell" class="epp-ar">1925-04-25</td>
      <td role="cell">Blockburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jermain</td>
      <td role="cell">Boyer</td>
      <td data-value="318470400000" role="cell" class="epp-ar">1980-02-04</td>
      <td role="cell">North Colton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Whitney</td>
      <td role="cell">Boehm</td>
      <td data-value="1316390400000" role="cell" class="epp-ar">2011-09-19</td>
      <td role="cell">Lake Tabithamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Kaelyn</td>
      <td role="cell">Waelchi</td>
      <td data-value="-155692800000" role="cell" class="epp-ar">1965-01-25</td>
      <td role="cell">Dibbertmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Marlin</td>
      <td role="cell">Prohaska</td>
      <td data-value="149299200000" role="cell" class="epp-ar">1974-09-25</td>
      <td role="cell">East Wendy</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Tina</td>
      <td role="cell">Crooks</td>
      <td data-value="-548812800000" role="cell" class="epp-ar">1952-08-11</td>
      <td role="cell">North Isabellview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Ethan</td>
      <td role="cell">Hyatt</td>
      <td data-value="-975974400000" role="cell" class="epp-ar">1939-01-28</td>
      <td role="cell">Lake Tomport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Leann</td>
      <td role="cell">Schmeler</td>
      <td data-value="-520214400000" role="cell" class="epp-ar">1953-07-08</td>
      <td role="cell">Kuvalisborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Blake</td>
      <td role="cell">Schoen</td>
      <td data-value="670377600000" role="cell" class="epp-ar">1991-03-31</td>
      <td role="cell">New Shanelton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Gaetano</td>
      <td role="cell">Legros</td>
      <td data-value="-214876800000" role="cell" class="epp-ar">1963-03-12</td>
      <td role="cell">North Kathrynebury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Whitney</td>
      <td role="cell">Cartwright</td>
      <td data-value="223603200000" role="cell" class="epp-ar">1977-02-01</td>
      <td role="cell">New Mikelside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Josephine</td>
      <td role="cell">Hegmann</td>
      <td data-value="394848000000" role="cell" class="epp-ar">1982-07-07</td>
      <td role="cell">New Edison</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Hal</td>
      <td role="cell">Heidenreich</td>
      <td data-value="306720000000" role="cell" class="epp-ar">1979-09-21</td>
      <td role="cell">Port Wellingtonton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Maci</td>
      <td role="cell">Muller</td>
      <td data-value="1298937600000" role="cell" class="epp-ar">2011-03-01</td>
      <td role="cell">North Justyntown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Barney</td>
      <td role="cell">Mohr</td>
      <td data-value="253584000000" role="cell" class="epp-ar">1978-01-14</td>
      <td role="cell">South Oren</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Otto</td>
      <td role="cell">Krajcik</td>
      <td data-value="183168000000" role="cell" class="epp-ar">1975-10-22</td>
      <td role="cell">Simeonburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Jonathan</td>
      <td role="cell">Bednar</td>
      <td data-value="52617600000" role="cell" class="epp-ar">1971-09-02</td>
      <td role="cell">Port Annamae</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Priscilla</td>
      <td role="cell">Collier</td>
      <td data-value="1017792000000" role="cell" class="epp-ar">2002-04-03</td>
      <td role="cell">Lenniechester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Kamille</td>
      <td role="cell">Schowalter</td>
      <td data-value="1372377600000" role="cell" class="epp-ar">2013-06-28</td>
      <td role="cell">Dickinsonview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Maureen</td>
      <td role="cell">Rodriguez</td>
      <td data-value="-440726400000" role="cell" class="epp-ar">1956-01-14</td>
      <td role="cell">Wintheiserside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Cody</td>
      <td role="cell">Fisher</td>
      <td data-value="781574400000" role="cell" class="epp-ar">1994-10-08</td>
      <td role="cell">Colefurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Luisa</td>
      <td role="cell">Wyman</td>
      <td data-value="-519955200000" role="cell" class="epp-ar">1953-07-11</td>
      <td role="cell">Madisonburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Enrique</td>
      <td role="cell">Renner</td>
      <td data-value="523756800000" role="cell" class="epp-ar">1986-08-07</td>
      <td role="cell">South Georgianna</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Joaquin</td>
      <td role="cell">Gleichner</td>
      <td data-value="250819200000" role="cell" class="epp-ar">1977-12-13</td>
      <td role="cell">New Karson</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Ebony</td>
      <td role="cell">Keebler</td>
      <td data-value="1449187200000" role="cell" class="epp-ar">2015-12-04</td>
      <td role="cell">Gorczanyburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Sabina</td>
      <td role="cell">Weber</td>
      <td data-value="1394496000000" role="cell" class="epp-ar">2014-03-11</td>
      <td role="cell">Shadchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Ulices</td>
      <td role="cell">Johnson</td>
      <td data-value="-201916800000" role="cell" class="epp-ar">1963-08-09</td>
      <td role="cell">North Oma</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Murray</td>
      <td role="cell">Reynolds</td>
      <td data-value="504921600000" role="cell" class="epp-ar">1986-01-01</td>
      <td role="cell">Frederiqueland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Alta</td>
      <td role="cell">VonRueden</td>
      <td data-value="1103328000000" role="cell" class="epp-ar">2004-12-18</td>
      <td role="cell">West Tatemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Janis</td>
      <td role="cell">Schiller</td>
      <td data-value="1344384000000" role="cell" class="epp-ar">2012-08-08</td>
      <td role="cell">New Donnietown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Hector</td>
      <td role="cell">Gulgowski</td>
      <td data-value="-457747200000" role="cell" class="epp-ar">1955-07-01</td>
      <td role="cell">South Rickyberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Name</td>
      <td role="cell">Bogan</td>
      <td data-value="50976000000" role="cell" class="epp-ar">1971-08-14</td>
      <td role="cell">Boehmside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Verla</td>
      <td role="cell">Schoen</td>
      <td data-value="10540800000" role="cell" class="epp-ar">1970-05-03</td>
      <td role="cell">Lake Maxwellfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Violet</td>
      <td role="cell">Pagac</td>
      <td data-value="-1025395200000" role="cell" class="epp-ar">1937-07-05</td>
      <td role="cell">South Shanie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Rhiannon</td>
      <td role="cell">Ortiz</td>
      <td data-value="-1758067200000" role="cell" class="epp-ar">1914-04-17</td>
      <td role="cell">Hansenchester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">April</td>
      <td role="cell">Langosh</td>
      <td data-value="-373334400000" role="cell" class="epp-ar">1958-03-04</td>
      <td role="cell">Schoenland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Rico</td>
      <td role="cell">Lehner</td>
      <td data-value="858211200000" role="cell" class="epp-ar">1997-03-13</td>
      <td role="cell">Hilperthaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Lupe</td>
      <td role="cell">Wilkinson</td>
      <td data-value="1445904000000" role="cell" class="epp-ar">2015-10-27</td>
      <td role="cell">West Thorabury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Sandy</td>
      <td role="cell">Kling</td>
      <td data-value="594172800000" role="cell" class="epp-ar">1988-10-30</td>
      <td role="cell">Port Clairstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Donato</td>
      <td role="cell">Bernier</td>
      <td data-value="1688342400000" role="cell" class="epp-ar">2023-07-03</td>
      <td role="cell">North Antoneburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Candice</td>
      <td role="cell">Parker</td>
      <td data-value="-207187200000" role="cell" class="epp-ar">1963-06-09</td>
      <td role="cell">East Michale</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Maxime</td>
      <td role="cell">Ledner</td>
      <td data-value="-1003708800000" role="cell" class="epp-ar">1938-03-13</td>
      <td role="cell">Runteborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Ellie</td>
      <td role="cell">Collier</td>
      <td data-value="1483228800000" role="cell" class="epp-ar">2017-01-01</td>
      <td role="cell">North Kalibury</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;
}