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 Dwight Keeling 1926-04-19 Port Anderson
Wales Rubye Bashirian 1918-09-06 Port Gerryfurt
Northern Ireland Heber Brakus 1945-02-01 Prohaskaview
Scotland Deron Senger 1966-04-18 Lemkeland
Scotland Domenica Christiansen 1964-03-20 Evalynville
Wales Allie Will 2025-04-04 New Destini
England Isidro Walker 1964-05-12 Port Oscar
Wales Orlando Cremin 1919-05-19 South Elisabeth
England Evans Kautzer 1963-11-03 South Stefaniemouth
Scotland Caroline Leffler 2005-04-15 Lake Anissahaven
Northern Ireland Kory Blanda 1930-06-25 Beverlyton
Wales Dedrick Lowe 1983-08-31 Heaneyport
Scotland Helmer Hintz 1947-12-08 Lake Parkerland
Northern Ireland Domenic Hilpert 1945-10-07 North Arielle
England Katelin Osinski 1909-06-11 West Mortimerville
Wales Bailee Stark 1990-06-28 South Jaylonside
Scotland Asia Abbott 1993-02-02 New Euniceview
Northern Ireland Lenna Beahan 1964-11-14 West Velvaburgh
Northern Ireland Joan Daugherty 1996-07-01 Leolabury
Wales Casimer Davis 1988-04-18 New Clara
Wales Bonita Hartmann 1963-09-13 Jaysonhaven
England Annalise Kovacek 1973-03-24 Larsonville
England Dan Nienow 1982-07-15 Port Reva
England Franco Muller 1960-01-25 North Vernon
Northern Ireland Abelardo Spencer 1905-02-02 Port Brandon
Wales Sophia Pfannerstill 1923-08-28 Ortizstad
Northern Ireland Saige Keebler 1958-02-13 Annamouth
England Alberto Vandervort 1953-01-30 Lafayetteberg
Scotland June Osinski 2008-12-13 South Juniusport
Northern Ireland Bernita Zemlak 1958-11-24 Lake Orentown
Scotland Nash Koepp 1995-11-14 West Jarrell
Wales Maia Sporer 1984-12-30 Jolieshire
Scotland Brice Bogan 1964-01-15 Port Johnmouth
Wales Jace Morar 1930-03-26 West Bernhard
Northern Ireland Fred Turcotte 1933-03-06 Joaniefurt
England Arthur Quitzon 1910-12-19 West Ayla
England Alysa Boyer 2022-08-20 Spencerstad
Northern Ireland Herta Abbott 1986-08-13 Sawaynland
Wales Juvenal Bruen 1963-12-08 New Garret
Northern Ireland Emilio Roberts 1983-10-31 East Milesville
Northern Ireland Delphine Anderson 1964-01-11 West Wainoshire
Wales Modesta Abernathy 1933-11-05 Rosenbaumbury
Wales Alvis Lubowitz 2007-05-27 New Emmieborough
Scotland Newton Padberg 1971-09-22 Flatleyview
Wales Corrine Langosh 1933-11-16 Lake Randal
Wales Ardella Mraz 1963-08-05 West Kristy
Wales Joesph Rippin 1963-10-26 Gaylordfort
Northern Ireland Daniela Beahan 1963-12-27 Port Mia
England Jacinto Cummings 2006-07-15 East Chance
Wales Jedediah Jaskolski 1998-02-12 East Simborough

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">Dwight</td>
      <td role="cell">Keeling</td>
      <td data-value="-1379203200000" role="cell" class="epp-ar">1926-04-19</td>
      <td role="cell">Port Anderson</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Rubye</td>
      <td role="cell">Bashirian</td>
      <td data-value="-1619568000000" role="cell" class="epp-ar">1918-09-06</td>
      <td role="cell">Port Gerryfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Heber</td>
      <td role="cell">Brakus</td>
      <td data-value="-786240000000" role="cell" class="epp-ar">1945-02-01</td>
      <td role="cell">Prohaskaview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Deron</td>
      <td role="cell">Senger</td>
      <td data-value="-116985600000" role="cell" class="epp-ar">1966-04-18</td>
      <td role="cell">Lemkeland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Domenica</td>
      <td role="cell">Christiansen</td>
      <td data-value="-182563200000" role="cell" class="epp-ar">1964-03-20</td>
      <td role="cell">Evalynville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Allie</td>
      <td role="cell">Will</td>
      <td data-value="1743724800000" role="cell" class="epp-ar">2025-04-04</td>
      <td role="cell">New Destini</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Isidro</td>
      <td role="cell">Walker</td>
      <td data-value="-177984000000" role="cell" class="epp-ar">1964-05-12</td>
      <td role="cell">Port Oscar</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Orlando</td>
      <td role="cell">Cremin</td>
      <td data-value="-1597536000000" role="cell" class="epp-ar">1919-05-19</td>
      <td role="cell">South Elisabeth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Evans</td>
      <td role="cell">Kautzer</td>
      <td data-value="-194486400000" role="cell" class="epp-ar">1963-11-03</td>
      <td role="cell">South Stefaniemouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Caroline</td>
      <td role="cell">Leffler</td>
      <td data-value="1113523200000" role="cell" class="epp-ar">2005-04-15</td>
      <td role="cell">Lake Anissahaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kory</td>
      <td role="cell">Blanda</td>
      <td data-value="-1247184000000" role="cell" class="epp-ar">1930-06-25</td>
      <td role="cell">Beverlyton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Dedrick</td>
      <td role="cell">Lowe</td>
      <td data-value="431136000000" role="cell" class="epp-ar">1983-08-31</td>
      <td role="cell">Heaneyport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Helmer</td>
      <td role="cell">Hintz</td>
      <td data-value="-696384000000" role="cell" class="epp-ar">1947-12-08</td>
      <td role="cell">Lake Parkerland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Domenic</td>
      <td role="cell">Hilpert</td>
      <td data-value="-764812800000" role="cell" class="epp-ar">1945-10-07</td>
      <td role="cell">North Arielle</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Katelin</td>
      <td role="cell">Osinski</td>
      <td data-value="-1911081600000" role="cell" class="epp-ar">1909-06-11</td>
      <td role="cell">West Mortimerville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Bailee</td>
      <td role="cell">Stark</td>
      <td data-value="646531200000" role="cell" class="epp-ar">1990-06-28</td>
      <td role="cell">South Jaylonside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Asia</td>
      <td role="cell">Abbott</td>
      <td data-value="728611200000" role="cell" class="epp-ar">1993-02-02</td>
      <td role="cell">New Euniceview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Lenna</td>
      <td role="cell">Beahan</td>
      <td data-value="-161913600000" role="cell" class="epp-ar">1964-11-14</td>
      <td role="cell">West Velvaburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Joan</td>
      <td role="cell">Daugherty</td>
      <td data-value="836179200000" role="cell" class="epp-ar">1996-07-01</td>
      <td role="cell">Leolabury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Casimer</td>
      <td role="cell">Davis</td>
      <td data-value="577324800000" role="cell" class="epp-ar">1988-04-18</td>
      <td role="cell">New Clara</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Bonita</td>
      <td role="cell">Hartmann</td>
      <td data-value="-198892800000" role="cell" class="epp-ar">1963-09-13</td>
      <td role="cell">Jaysonhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Annalise</td>
      <td role="cell">Kovacek</td>
      <td data-value="101779200000" role="cell" class="epp-ar">1973-03-24</td>
      <td role="cell">Larsonville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Dan</td>
      <td role="cell">Nienow</td>
      <td data-value="395539200000" role="cell" class="epp-ar">1982-07-15</td>
      <td role="cell">Port Reva</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Franco</td>
      <td role="cell">Muller</td>
      <td data-value="-313545600000" role="cell" class="epp-ar">1960-01-25</td>
      <td role="cell">North Vernon</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Abelardo</td>
      <td role="cell">Spencer</td>
      <td data-value="-2048457600000" role="cell" class="epp-ar">1905-02-02</td>
      <td role="cell">Port Brandon</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Sophia</td>
      <td role="cell">Pfannerstill</td>
      <td data-value="-1462579200000" role="cell" class="epp-ar">1923-08-28</td>
      <td role="cell">Ortizstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Saige</td>
      <td role="cell">Keebler</td>
      <td data-value="-374976000000" role="cell" class="epp-ar">1958-02-13</td>
      <td role="cell">Annamouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alberto</td>
      <td role="cell">Vandervort</td>
      <td data-value="-533952000000" role="cell" class="epp-ar">1953-01-30</td>
      <td role="cell">Lafayetteberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">June</td>
      <td role="cell">Osinski</td>
      <td data-value="1229126400000" role="cell" class="epp-ar">2008-12-13</td>
      <td role="cell">South Juniusport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Bernita</td>
      <td role="cell">Zemlak</td>
      <td data-value="-350438400000" role="cell" class="epp-ar">1958-11-24</td>
      <td role="cell">Lake Orentown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Nash</td>
      <td role="cell">Koepp</td>
      <td data-value="816307200000" role="cell" class="epp-ar">1995-11-14</td>
      <td role="cell">West Jarrell</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Maia</td>
      <td role="cell">Sporer</td>
      <td data-value="473212800000" role="cell" class="epp-ar">1984-12-30</td>
      <td role="cell">Jolieshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Brice</td>
      <td role="cell">Bogan</td>
      <td data-value="-188179200000" role="cell" class="epp-ar">1964-01-15</td>
      <td role="cell">Port Johnmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jace</td>
      <td role="cell">Morar</td>
      <td data-value="-1255046400000" role="cell" class="epp-ar">1930-03-26</td>
      <td role="cell">West Bernhard</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Fred</td>
      <td role="cell">Turcotte</td>
      <td data-value="-1162080000000" role="cell" class="epp-ar">1933-03-06</td>
      <td role="cell">Joaniefurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Arthur</td>
      <td role="cell">Quitzon</td>
      <td data-value="-1863043200000" role="cell" class="epp-ar">1910-12-19</td>
      <td role="cell">West Ayla</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alysa</td>
      <td role="cell">Boyer</td>
      <td data-value="1660953600000" role="cell" class="epp-ar">2022-08-20</td>
      <td role="cell">Spencerstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Herta</td>
      <td role="cell">Abbott</td>
      <td data-value="524275200000" role="cell" class="epp-ar">1986-08-13</td>
      <td role="cell">Sawaynland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Juvenal</td>
      <td role="cell">Bruen</td>
      <td data-value="-191462400000" role="cell" class="epp-ar">1963-12-08</td>
      <td role="cell">New Garret</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Emilio</td>
      <td role="cell">Roberts</td>
      <td data-value="436406400000" role="cell" class="epp-ar">1983-10-31</td>
      <td role="cell">East Milesville</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Delphine</td>
      <td role="cell">Anderson</td>
      <td data-value="-188524800000" role="cell" class="epp-ar">1964-01-11</td>
      <td role="cell">West Wainoshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Modesta</td>
      <td role="cell">Abernathy</td>
      <td data-value="-1140998400000" role="cell" class="epp-ar">1933-11-05</td>
      <td role="cell">Rosenbaumbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Alvis</td>
      <td role="cell">Lubowitz</td>
      <td data-value="1180224000000" role="cell" class="epp-ar">2007-05-27</td>
      <td role="cell">New Emmieborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Newton</td>
      <td role="cell">Padberg</td>
      <td data-value="54345600000" role="cell" class="epp-ar">1971-09-22</td>
      <td role="cell">Flatleyview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Corrine</td>
      <td role="cell">Langosh</td>
      <td data-value="-1140048000000" role="cell" class="epp-ar">1933-11-16</td>
      <td role="cell">Lake Randal</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Ardella</td>
      <td role="cell">Mraz</td>
      <td data-value="-202262400000" role="cell" class="epp-ar">1963-08-05</td>
      <td role="cell">West Kristy</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Joesph</td>
      <td role="cell">Rippin</td>
      <td data-value="-195177600000" role="cell" class="epp-ar">1963-10-26</td>
      <td role="cell">Gaylordfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Daniela</td>
      <td role="cell">Beahan</td>
      <td data-value="-189820800000" role="cell" class="epp-ar">1963-12-27</td>
      <td role="cell">Port Mia</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jacinto</td>
      <td role="cell">Cummings</td>
      <td data-value="1152921600000" role="cell" class="epp-ar">2006-07-15</td>
      <td role="cell">East Chance</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jedediah</td>
      <td role="cell">Jaskolski</td>
      <td data-value="887241600000" role="cell" class="epp-ar">1998-02-12</td>
      <td role="cell">East Simborough</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;
}