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 Maiya Gleichner 1962-06-10 New Vidal
Wales Devin Breitenberg 1962-12-08 South Taurean
Northern Ireland Humberto Senger 1927-11-19 Port Birdieside
Wales Timmothy Powlowski 1994-01-19 East Garlandmouth
Wales Demarco Altenwerth 2011-01-30 Lednerview
Scotland Kyleigh Willms 1923-08-09 Alville
Northern Ireland Raven Casper 1937-10-25 Lorinebury
Northern Ireland Genoveva Swaniawski 1983-03-19 Lake Adrain
Northern Ireland Gaston Lakin 1942-01-31 Mantehaven
England Sigmund Fritsch 2005-08-19 East Luis
Northern Ireland Nash Schmitt 1962-04-28 Port Tiana
Scotland Gennaro Fritsch 1970-07-19 Lake Mylene
Scotland Anabelle Cormier 1990-03-02 South Vita
Northern Ireland Llewellyn Upton 1904-11-30 Feeneymouth
Scotland Kaia Altenwerth 1974-05-09 Mossieberg
Wales Deanna Dietrich 1960-02-14 Tierrafort
Wales Wendell Stracke 1951-11-24 Jerodfort
England Prudence Murazik 1986-05-02 New Dayne
England Otho Witting 1905-02-04 Callieshire
England Landen Kirlin 1911-03-18 Torpland
Wales Maybell Bauch 1951-04-07 East Joan
England Abelardo Nicolas 1985-06-11 Lake Torrance
Wales Lura Reichert 1962-12-27 Nitzscheside
Northern Ireland Roslyn Hilpert 1913-07-02 Port Elsie
Wales Everardo Goldner 2007-05-31 North Assuntatown
Scotland Hilario Larson 2012-08-24 Dooleymouth
England Herminio Bahringer 1950-06-16 Danialland
England Thelma Zboncak 2007-10-09 Willburgh
Wales Casey Hilpert 1946-07-22 South Taurean
Northern Ireland Asha Murazik 2002-03-26 Gutkowskihaven
England Guadalupe Anderson 2017-06-05 North Kameron
England Parker Mosciski 1981-02-21 Eichmannfurt
Wales Chaim Wunsch 2017-08-25 New Alaina
Scotland Clinton Abbott 1979-08-14 Corybury
Scotland Nikko Bradtke 1906-08-02 North Anahi
Wales Odell Becker 1962-11-02 Martamouth
Northern Ireland Annie Osinski 2003-06-03 West Sisterport
Scotland Myrtice Hansen 2020-08-05 Lake Darien
England Noelia Jakubowski 1947-07-07 Schowaltershire
Northern Ireland Trudie Upton 1935-05-30 Port Domingo
Northern Ireland Maybelle Breitenberg 2008-03-03 East Pauline
Scotland Christina Schiller 2022-02-06 North Valentinafort
Wales Lelah Nader 1943-12-14 Lake Sophie
England Zander Lockman 1917-04-09 O'Konshire
Wales Maggie Mueller 1975-06-30 South Harrisonside
Northern Ireland Antonia Abernathy 1957-03-20 Port Janickmouth
Northern Ireland Reggie Robel 1925-12-30 West Brantborough
Wales Monte Muller 1996-12-20 Bartberg
Scotland Reid Bogisich 1999-06-30 Earnestton
Scotland Eduardo Prohaska 2013-05-08 Emoryland

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">Maiya</td>
      <td role="cell">Gleichner</td>
      <td data-value="-238636800000" role="cell" class="epp-ar">1962-06-10</td>
      <td role="cell">New Vidal</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Devin</td>
      <td role="cell">Breitenberg</td>
      <td data-value="-222998400000" role="cell" class="epp-ar">1962-12-08</td>
      <td role="cell">South Taurean</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Humberto</td>
      <td role="cell">Senger</td>
      <td data-value="-1329177600000" role="cell" class="epp-ar">1927-11-19</td>
      <td role="cell">Port Birdieside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Timmothy</td>
      <td role="cell">Powlowski</td>
      <td data-value="758937600000" role="cell" class="epp-ar">1994-01-19</td>
      <td role="cell">East Garlandmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Demarco</td>
      <td role="cell">Altenwerth</td>
      <td data-value="1296345600000" role="cell" class="epp-ar">2011-01-30</td>
      <td role="cell">Lednerview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kyleigh</td>
      <td role="cell">Willms</td>
      <td data-value="-1464220800000" role="cell" class="epp-ar">1923-08-09</td>
      <td role="cell">Alville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Raven</td>
      <td role="cell">Casper</td>
      <td data-value="-1015718400000" role="cell" class="epp-ar">1937-10-25</td>
      <td role="cell">Lorinebury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Genoveva</td>
      <td role="cell">Swaniawski</td>
      <td data-value="416880000000" role="cell" class="epp-ar">1983-03-19</td>
      <td role="cell">Lake Adrain</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Gaston</td>
      <td role="cell">Lakin</td>
      <td data-value="-881020800000" role="cell" class="epp-ar">1942-01-31</td>
      <td role="cell">Mantehaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Sigmund</td>
      <td role="cell">Fritsch</td>
      <td data-value="1124409600000" role="cell" class="epp-ar">2005-08-19</td>
      <td role="cell">East Luis</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Nash</td>
      <td role="cell">Schmitt</td>
      <td data-value="-242352000000" role="cell" class="epp-ar">1962-04-28</td>
      <td role="cell">Port Tiana</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Gennaro</td>
      <td role="cell">Fritsch</td>
      <td data-value="17193600000" role="cell" class="epp-ar">1970-07-19</td>
      <td role="cell">Lake Mylene</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Anabelle</td>
      <td role="cell">Cormier</td>
      <td data-value="636336000000" role="cell" class="epp-ar">1990-03-02</td>
      <td role="cell">South Vita</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Llewellyn</td>
      <td role="cell">Upton</td>
      <td data-value="-2053987200000" role="cell" class="epp-ar">1904-11-30</td>
      <td role="cell">Feeneymouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Kaia</td>
      <td role="cell">Altenwerth</td>
      <td data-value="137289600000" role="cell" class="epp-ar">1974-05-09</td>
      <td role="cell">Mossieberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Deanna</td>
      <td role="cell">Dietrich</td>
      <td data-value="-311817600000" role="cell" class="epp-ar">1960-02-14</td>
      <td role="cell">Tierrafort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Wendell</td>
      <td role="cell">Stracke</td>
      <td data-value="-571363200000" role="cell" class="epp-ar">1951-11-24</td>
      <td role="cell">Jerodfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Prudence</td>
      <td role="cell">Murazik</td>
      <td data-value="515376000000" role="cell" class="epp-ar">1986-05-02</td>
      <td role="cell">New Dayne</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Otho</td>
      <td role="cell">Witting</td>
      <td data-value="-2048284800000" role="cell" class="epp-ar">1905-02-04</td>
      <td role="cell">Callieshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Landen</td>
      <td role="cell">Kirlin</td>
      <td data-value="-1855353600000" role="cell" class="epp-ar">1911-03-18</td>
      <td role="cell">Torpland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Maybell</td>
      <td role="cell">Bauch</td>
      <td data-value="-591321600000" role="cell" class="epp-ar">1951-04-07</td>
      <td role="cell">East Joan</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Abelardo</td>
      <td role="cell">Nicolas</td>
      <td data-value="487296000000" role="cell" class="epp-ar">1985-06-11</td>
      <td role="cell">Lake Torrance</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lura</td>
      <td role="cell">Reichert</td>
      <td data-value="-221356800000" role="cell" class="epp-ar">1962-12-27</td>
      <td role="cell">Nitzscheside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Roslyn</td>
      <td role="cell">Hilpert</td>
      <td data-value="-1783036800000" role="cell" class="epp-ar">1913-07-02</td>
      <td role="cell">Port Elsie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Everardo</td>
      <td role="cell">Goldner</td>
      <td data-value="1180569600000" role="cell" class="epp-ar">2007-05-31</td>
      <td role="cell">North Assuntatown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Hilario</td>
      <td role="cell">Larson</td>
      <td data-value="1345766400000" role="cell" class="epp-ar">2012-08-24</td>
      <td role="cell">Dooleymouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Herminio</td>
      <td role="cell">Bahringer</td>
      <td data-value="-616809600000" role="cell" class="epp-ar">1950-06-16</td>
      <td role="cell">Danialland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Thelma</td>
      <td role="cell">Zboncak</td>
      <td data-value="1191888000000" role="cell" class="epp-ar">2007-10-09</td>
      <td role="cell">Willburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Casey</td>
      <td role="cell">Hilpert</td>
      <td data-value="-739929600000" role="cell" class="epp-ar">1946-07-22</td>
      <td role="cell">South Taurean</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Asha</td>
      <td role="cell">Murazik</td>
      <td data-value="1017100800000" role="cell" class="epp-ar">2002-03-26</td>
      <td role="cell">Gutkowskihaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Guadalupe</td>
      <td role="cell">Anderson</td>
      <td data-value="1496620800000" role="cell" class="epp-ar">2017-06-05</td>
      <td role="cell">North Kameron</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Parker</td>
      <td role="cell">Mosciski</td>
      <td data-value="351561600000" role="cell" class="epp-ar">1981-02-21</td>
      <td role="cell">Eichmannfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Chaim</td>
      <td role="cell">Wunsch</td>
      <td data-value="1503619200000" role="cell" class="epp-ar">2017-08-25</td>
      <td role="cell">New Alaina</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Clinton</td>
      <td role="cell">Abbott</td>
      <td data-value="303436800000" role="cell" class="epp-ar">1979-08-14</td>
      <td role="cell">Corybury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Nikko</td>
      <td role="cell">Bradtke</td>
      <td data-value="-2001283200000" role="cell" class="epp-ar">1906-08-02</td>
      <td role="cell">North Anahi</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Odell</td>
      <td role="cell">Becker</td>
      <td data-value="-226108800000" role="cell" class="epp-ar">1962-11-02</td>
      <td role="cell">Martamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Annie</td>
      <td role="cell">Osinski</td>
      <td data-value="1054598400000" role="cell" class="epp-ar">2003-06-03</td>
      <td role="cell">West Sisterport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Myrtice</td>
      <td role="cell">Hansen</td>
      <td data-value="1596585600000" role="cell" class="epp-ar">2020-08-05</td>
      <td role="cell">Lake Darien</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Noelia</td>
      <td role="cell">Jakubowski</td>
      <td data-value="-709689600000" role="cell" class="epp-ar">1947-07-07</td>
      <td role="cell">Schowaltershire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Trudie</td>
      <td role="cell">Upton</td>
      <td data-value="-1091664000000" role="cell" class="epp-ar">1935-05-30</td>
      <td role="cell">Port Domingo</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Maybelle</td>
      <td role="cell">Breitenberg</td>
      <td data-value="1204502400000" role="cell" class="epp-ar">2008-03-03</td>
      <td role="cell">East Pauline</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Christina</td>
      <td role="cell">Schiller</td>
      <td data-value="1644105600000" role="cell" class="epp-ar">2022-02-06</td>
      <td role="cell">North Valentinafort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lelah</td>
      <td role="cell">Nader</td>
      <td data-value="-822096000000" role="cell" class="epp-ar">1943-12-14</td>
      <td role="cell">Lake Sophie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Zander</td>
      <td role="cell">Lockman</td>
      <td data-value="-1664064000000" role="cell" class="epp-ar">1917-04-09</td>
      <td role="cell">O'Konshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Maggie</td>
      <td role="cell">Mueller</td>
      <td data-value="173318400000" role="cell" class="epp-ar">1975-06-30</td>
      <td role="cell">South Harrisonside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Antonia</td>
      <td role="cell">Abernathy</td>
      <td data-value="-403488000000" role="cell" class="epp-ar">1957-03-20</td>
      <td role="cell">Port Janickmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Reggie</td>
      <td role="cell">Robel</td>
      <td data-value="-1388707200000" role="cell" class="epp-ar">1925-12-30</td>
      <td role="cell">West Brantborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Monte</td>
      <td role="cell">Muller</td>
      <td data-value="851040000000" role="cell" class="epp-ar">1996-12-20</td>
      <td role="cell">Bartberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Reid</td>
      <td role="cell">Bogisich</td>
      <td data-value="930700800000" role="cell" class="epp-ar">1999-06-30</td>
      <td role="cell">Earnestton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Eduardo</td>
      <td role="cell">Prohaska</td>
      <td data-value="1367971200000" role="cell" class="epp-ar">2013-05-08</td>
      <td role="cell">Emoryland</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;
}