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
Wales Ross Tillman 1983-02-02 Wildermanmouth
Northern Ireland Harmon Lockman 1961-11-26 Kubfort
England Corbin O'Hara 1961-06-30 South Sheaborough
England Frieda Huels 1944-03-25 Wisozkview
England Zander Graham 1915-02-09 Simeonburgh
Scotland Rosina Lubowitz 1922-01-15 South Lizeth
Northern Ireland Kelvin Mann 1970-04-03 North Ritachester
Wales Adonis Roob 2006-08-20 North Anissaborough
Northern Ireland Alisha Mann 1914-01-22 New Kirstinside
Scotland Chet Swaniawski 1959-08-29 Stokestown
England Alex Kertzmann 1975-09-24 Port Rodger
Northern Ireland Lucienne Gutmann 2006-05-20 East Davonteport
Scotland Agustina Nienow 1921-10-12 Port Myaburgh
Scotland Paul Boyer 1961-07-14 Wildermanburgh
England Jazmin Marquardt 1980-07-20 Herzogshire
Wales Sheldon Wehner 1976-11-19 Port Mittie
Scotland Paolo Bayer 1963-02-10 Yostton
England Dayana Little 1962-02-21 West Austinstad
England Demarco Gaylord 1992-02-01 East Alannaland
Scotland Shania Blanda 1963-07-06 Durganstad
Wales Cassie Nader 1981-05-19 Mertieburgh
Wales Sigurd Schamberger 1955-11-14 Lake Maud
Scotland Korey Pouros 1973-05-27 Raynorshire
England Gudrun Sawayn 1969-06-15 Haroldton
Wales Gudrun Robel 1951-04-12 West Rowanbury
Scotland Angelo Runolfsdottir 1974-01-12 West Audreytown
England Katelyn Cole 2018-12-24 Smithborough
Wales Stevie Crona 1948-03-22 Goyettebury
Scotland Reina Mitchell 1971-04-24 Halvorsonmouth
Northern Ireland Pedro Rohan 1907-07-22 Lake Giovanna
Scotland Jazmin Cronin 2005-09-09 Clairton
Wales Jewel Hackett 1920-05-24 East Thomas
England Agustina Grady 1925-07-07 Rossietown
England Finn Wiegand 1939-06-27 New Kelvin
Wales Gustave Abbott 2004-06-16 New Burleyport
Wales Lazaro Dickinson 1917-01-24 Johnsonhaven
Northern Ireland Paul Ziemann 1996-09-03 Port Cullenton
England Meda Bartoletti 2023-05-13 Thielmouth
Wales Nick Stracke 1943-09-19 Glenniestad
Northern Ireland Joshua Lang 1942-06-26 Raphaelport
Wales Austin Hickle 1904-02-16 Lake Nicholaus
Scotland Brenda Kutch 1981-10-19 North Connermouth
Scotland Jeramy Jaskolski 1926-02-05 Jaedenmouth
Scotland Eula Bailey 1972-04-20 North Jerrell
Scotland Magnolia Medhurst 1992-11-19 Issacside
Scotland Malika Eichmann 1937-11-25 Stacyberg
England Juana Russel 2005-02-10 Lake Jonathanfurt
England Tanya Abernathy 1964-06-30 New Zoilaside
Northern Ireland Golden Walter 1900-10-15 West Simeon
Scotland Norbert Bernier 1956-02-12 New Adolf

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">Wales</td>
      <td role="cell">Ross</td>
      <td role="cell">Tillman</td>
      <td data-value="412992000000" role="cell" class="epp-ar">1983-02-02</td>
      <td role="cell">Wildermanmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Harmon</td>
      <td role="cell">Lockman</td>
      <td data-value="-255571200000" role="cell" class="epp-ar">1961-11-26</td>
      <td role="cell">Kubfort</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Corbin</td>
      <td role="cell">O'Hara</td>
      <td data-value="-268444800000" role="cell" class="epp-ar">1961-06-30</td>
      <td role="cell">South Sheaborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Frieda</td>
      <td role="cell">Huels</td>
      <td data-value="-813283200000" role="cell" class="epp-ar">1944-03-25</td>
      <td role="cell">Wisozkview</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Zander</td>
      <td role="cell">Graham</td>
      <td data-value="-1732320000000" role="cell" class="epp-ar">1915-02-09</td>
      <td role="cell">Simeonburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Rosina</td>
      <td role="cell">Lubowitz</td>
      <td data-value="-1513555200000" role="cell" class="epp-ar">1922-01-15</td>
      <td role="cell">South Lizeth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Kelvin</td>
      <td role="cell">Mann</td>
      <td data-value="7948800000" role="cell" class="epp-ar">1970-04-03</td>
      <td role="cell">North Ritachester</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Adonis</td>
      <td role="cell">Roob</td>
      <td data-value="1156032000000" role="cell" class="epp-ar">2006-08-20</td>
      <td role="cell">North Anissaborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Alisha</td>
      <td role="cell">Mann</td>
      <td data-value="-1765411200000" role="cell" class="epp-ar">1914-01-22</td>
      <td role="cell">New Kirstinside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Chet</td>
      <td role="cell">Swaniawski</td>
      <td data-value="-326419200000" role="cell" class="epp-ar">1959-08-29</td>
      <td role="cell">Stokestown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Alex</td>
      <td role="cell">Kertzmann</td>
      <td data-value="180748800000" role="cell" class="epp-ar">1975-09-24</td>
      <td role="cell">Port Rodger</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Lucienne</td>
      <td role="cell">Gutmann</td>
      <td data-value="1148083200000" role="cell" class="epp-ar">2006-05-20</td>
      <td role="cell">East Davonteport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Agustina</td>
      <td role="cell">Nienow</td>
      <td data-value="-1521763200000" role="cell" class="epp-ar">1921-10-12</td>
      <td role="cell">Port Myaburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Paul</td>
      <td role="cell">Boyer</td>
      <td data-value="-267235200000" role="cell" class="epp-ar">1961-07-14</td>
      <td role="cell">Wildermanburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Jazmin</td>
      <td role="cell">Marquardt</td>
      <td data-value="332899200000" role="cell" class="epp-ar">1980-07-20</td>
      <td role="cell">Herzogshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Sheldon</td>
      <td role="cell">Wehner</td>
      <td data-value="217209600000" role="cell" class="epp-ar">1976-11-19</td>
      <td role="cell">Port Mittie</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Paolo</td>
      <td role="cell">Bayer</td>
      <td data-value="-217468800000" role="cell" class="epp-ar">1963-02-10</td>
      <td role="cell">Yostton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Dayana</td>
      <td role="cell">Little</td>
      <td data-value="-248054400000" role="cell" class="epp-ar">1962-02-21</td>
      <td role="cell">West Austinstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Demarco</td>
      <td role="cell">Gaylord</td>
      <td data-value="696902400000" role="cell" class="epp-ar">1992-02-01</td>
      <td role="cell">East Alannaland</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Shania</td>
      <td role="cell">Blanda</td>
      <td data-value="-204854400000" role="cell" class="epp-ar">1963-07-06</td>
      <td role="cell">Durganstad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Cassie</td>
      <td role="cell">Nader</td>
      <td data-value="359078400000" role="cell" class="epp-ar">1981-05-19</td>
      <td role="cell">Mertieburgh</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Sigurd</td>
      <td role="cell">Schamberger</td>
      <td data-value="-445996800000" role="cell" class="epp-ar">1955-11-14</td>
      <td role="cell">Lake Maud</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Korey</td>
      <td role="cell">Pouros</td>
      <td data-value="107308800000" role="cell" class="epp-ar">1973-05-27</td>
      <td role="cell">Raynorshire</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Gudrun</td>
      <td role="cell">Sawayn</td>
      <td data-value="-17280000000" role="cell" class="epp-ar">1969-06-15</td>
      <td role="cell">Haroldton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Gudrun</td>
      <td role="cell">Robel</td>
      <td data-value="-590889600000" role="cell" class="epp-ar">1951-04-12</td>
      <td role="cell">West Rowanbury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Angelo</td>
      <td role="cell">Runolfsdottir</td>
      <td data-value="127180800000" role="cell" class="epp-ar">1974-01-12</td>
      <td role="cell">West Audreytown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Katelyn</td>
      <td role="cell">Cole</td>
      <td data-value="1545609600000" role="cell" class="epp-ar">2018-12-24</td>
      <td role="cell">Smithborough</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Stevie</td>
      <td role="cell">Crona</td>
      <td data-value="-687312000000" role="cell" class="epp-ar">1948-03-22</td>
      <td role="cell">Goyettebury</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Reina</td>
      <td role="cell">Mitchell</td>
      <td data-value="41299200000" role="cell" class="epp-ar">1971-04-24</td>
      <td role="cell">Halvorsonmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Pedro</td>
      <td role="cell">Rohan</td>
      <td data-value="-1970697600000" role="cell" class="epp-ar">1907-07-22</td>
      <td role="cell">Lake Giovanna</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jazmin</td>
      <td role="cell">Cronin</td>
      <td data-value="1126224000000" role="cell" class="epp-ar">2005-09-09</td>
      <td role="cell">Clairton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Jewel</td>
      <td role="cell">Hackett</td>
      <td data-value="-1565481600000" role="cell" class="epp-ar">1920-05-24</td>
      <td role="cell">East Thomas</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Agustina</td>
      <td role="cell">Grady</td>
      <td data-value="-1403913600000" role="cell" class="epp-ar">1925-07-07</td>
      <td role="cell">Rossietown</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Finn</td>
      <td role="cell">Wiegand</td>
      <td data-value="-963014400000" role="cell" class="epp-ar">1939-06-27</td>
      <td role="cell">New Kelvin</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Gustave</td>
      <td role="cell">Abbott</td>
      <td data-value="1087344000000" role="cell" class="epp-ar">2004-06-16</td>
      <td role="cell">New Burleyport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Lazaro</td>
      <td role="cell">Dickinson</td>
      <td data-value="-1670544000000" role="cell" class="epp-ar">1917-01-24</td>
      <td role="cell">Johnsonhaven</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Paul</td>
      <td role="cell">Ziemann</td>
      <td data-value="841708800000" role="cell" class="epp-ar">1996-09-03</td>
      <td role="cell">Port Cullenton</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Meda</td>
      <td role="cell">Bartoletti</td>
      <td data-value="1683936000000" role="cell" class="epp-ar">2023-05-13</td>
      <td role="cell">Thielmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Nick</td>
      <td role="cell">Stracke</td>
      <td data-value="-829526400000" role="cell" class="epp-ar">1943-09-19</td>
      <td role="cell">Glenniestad</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Joshua</td>
      <td role="cell">Lang</td>
      <td data-value="-868406400000" role="cell" class="epp-ar">1942-06-26</td>
      <td role="cell">Raphaelport</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Wales</td>
      <td role="cell">Austin</td>
      <td role="cell">Hickle</td>
      <td data-value="-2078870400000" role="cell" class="epp-ar">1904-02-16</td>
      <td role="cell">Lake Nicholaus</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Brenda</td>
      <td role="cell">Kutch</td>
      <td data-value="372297600000" role="cell" class="epp-ar">1981-10-19</td>
      <td role="cell">North Connermouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Jeramy</td>
      <td role="cell">Jaskolski</td>
      <td data-value="-1385510400000" role="cell" class="epp-ar">1926-02-05</td>
      <td role="cell">Jaedenmouth</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Eula</td>
      <td role="cell">Bailey</td>
      <td data-value="72576000000" role="cell" class="epp-ar">1972-04-20</td>
      <td role="cell">North Jerrell</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Magnolia</td>
      <td role="cell">Medhurst</td>
      <td data-value="722131200000" role="cell" class="epp-ar">1992-11-19</td>
      <td role="cell">Issacside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Malika</td>
      <td role="cell">Eichmann</td>
      <td data-value="-1013040000000" role="cell" class="epp-ar">1937-11-25</td>
      <td role="cell">Stacyberg</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Juana</td>
      <td role="cell">Russel</td>
      <td data-value="1107993600000" role="cell" class="epp-ar">2005-02-10</td>
      <td role="cell">Lake Jonathanfurt</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">England</td>
      <td role="cell">Tanya</td>
      <td role="cell">Abernathy</td>
      <td data-value="-173750400000" role="cell" class="epp-ar">1964-06-30</td>
      <td role="cell">New Zoilaside</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Northern Ireland</td>
      <td role="cell">Golden</td>
      <td role="cell">Walter</td>
      <td data-value="-2184192000000" role="cell" class="epp-ar">1900-10-15</td>
      <td role="cell">West Simeon</td>
    </tr>
    <tr role="row" scope="row">
      <td role="cell">Scotland</td>
      <td role="cell">Norbert</td>
      <td role="cell">Bernier</td>
      <td data-value="-438220800000" role="cell" class="epp-ar">1956-02-12</td>
      <td role="cell">New Adolf</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;
}