# HTML & CSS

**EPPlus 6 introduces the ability to export a table or a range to HTML/CSS. The best way to get started with this functionality is to have a look at the examples in our [web samples project](<https://samples.epplussoftware.com/HtmlExport>).**

## Overview

This feature supports integration of spreadsheet data and styling into web applications - and it is not an implementation of Excel's "Save the workbook as html" feature. Our intention is to make EPPlus a useful tool for bringing the spreadsheet model to web applications rather than providing a pixel-perfect html-representation of an existing workbook.

### Html

The spreadsheet data is always exported as a html table. The html has support for [accessibility](<https://epplussoftware.com/docs/output-formats/html/accessibility/index.md>) (aria-\*) attributes that can be configured when exporting the data. You can also get the raw cell data and javascript compatible datatypes included via [data-\* attributes](<https://epplussoftware.com/docs/output-formats/html/data-attributes/index.md>) in order to use the exported table not only as a UI element but also as a data carrier.

### Style/css

EPPlus separates styling from html and creates a separate stylesheet (css) for the exported data. The classes in this stylesheet are created based on the internal Excel styles. This is per default based on the built in Office theme, but you can easily switch to another theme as demonstrated in our [html sample 1](<https://samples.epplussoftware.com/HtmlExport/ExportTable1>). EPPlus will export css for table styles when exporting a table. NOTE: Exporting a range that contains a table will not include the table styles in the css.

### Pictures/Images

Pictures are not included in the export per default. When they are included, they are added to the stylesheet as base64 encoded strings. For more details, see [Picture settings](<https://epplussoftware.com/docs/output-formats/html/settings/#picture-settings>).

### Limitations

We will add new features to this export over time, but please note that some Excel features such as charts, shapes, pivot tables, sparklines and threaded comments are not included in the export. Full support for conditional formatting was added in version 7.2.

## Basic usage

### Create Html exporter

You can export html/css either from a range or from a table in your workbook. This is done via the `CreateHtmlExporter()` function, see below. Please note that table styles are not included in the css, if you export a range that contains a table via the `ExcelRangeBase.CreateHtmlExporter()`.

#### Export from a range

```csharp
var exporter = sheet.Cells["B5:M19"].CreateHtmlExporter();
var html = exporter.GetHtmlString();
var css = exporter.GetCssString();
```

```vbnet
Dim exporter = sheet.Cells("B5:M19").CreateHtmlExporter()
Dim html = exporter.GetHtmlString()
Dim css = exporter.GetCssString()
```

#### Export from a table

This export will contain the css for the table style as well as any cell style css.

```csharp
var exporter = sheet.Tables[0].CreateHtmlExporter();
var html = exporter.GetHtmlString();
var css = exporter.GetCssString();
```

```vbnet
Dim exporter = sheet.Tables(0).CreateHtmlExporter()
Dim html = exporter.GetHtmlString()
Dim css = exporter.GetCssString()
```

#### Export multiple ranges

You can also create an exporter for several ranges at once to get a shared css for multiple ranges over multiple worksheets. Our [web sample 6](<https://samples.epplussoftware.com/HtmlExport/ExportRanges6>) shows how to do this in detail.

```csharp
var exporter = package.Workbook.CreateHtmlExporter(
                 package.Workbook.Worksheets[0].Cells["B5:M19"],
                 package.Workbook.Worksheets[1].Cells["A1:D35"]
);

//This will get the html for the first range, B5:M19 in the first sheet
var html1 = exporter.GetHtmlString(0);
//This will get the html for the second range, A1:D35 in the second sheet
var html2 = exporter.GetHtmlString(1);
//This gets the combined css for both ranges.
var css = exporter.GetCssString();
```

```vbnet
Dim exporter = package.Workbook.CreateHtmlExporter(
                 package.Workbook.Worksheets(0).Cells("B5:M19"),
                 package.Workbook.Worksheets(1).Cells("A1:D35")
)

'This will get the html for the first range, B5:M19 in the first sheet
Dim html1 = exporter.GetHtmlString(0)
'This will get the html for the second range, A1:D35 in the second sheet
Dim html2 = exporter.GetHtmlString(1)
'This gets the combined css for both ranges.
Dim css = exporter.GetCssString()
```

### Methods

There are async versions of `GetHtmlString()` and `GetCssString()`, suffixed with "Async". Other methods render html and css on a `System.IO.Stream`, see `RenderHtml(stream)`, `RenderHtmlAsync(stream)`, `RenderCss(stream)` and `RenderCssAsync(stream)`.

### Table Id and additional table classes

Use the properties below to set the id attribute and add additional css classes on the exported html table.

```csharp
var settings = exporter.Settings;
settings.TableId = "currency-table";
settings.AdditionalTableClassNames.Add("table");
settings.AdditionalTableClassNames.Add("table-sm");
settings.AdditionalTableClassNames.Add("table-borderless");
```

```vbnet
Dim settings = exporter.Settings
settings.TableId = "currency-table"
settings.AdditionalTableClassNames.Add("table")
settings.AdditionalTableClassNames.Add("table-sm")
settings.AdditionalTableClassNames.Add("table-borderless")
```

## More about the html export

- [Settings](<https://epplussoftware.com/docs/output-formats/html/settings/index.md>) - All settings for the html, the css and pictures.
- [Data attributes](<https://epplussoftware.com/docs/output-formats/html/data-attributes/index.md>) - Use the exported table as a data carrier, with raw values and data types in data-\* attributes.
- [Accessibility](<https://epplussoftware.com/docs/output-formats/html/accessibility/index.md>) - Configure the aria-\* attributes and roles of the exported table.

## See also

- [Sample 2.5 (C\#)](<https://github.com/EPPlusSoftware/EPPlus.Samples.CSharp/tree/master/02-Import and export/05-Export to html>) and [Sample 2.5 (VB.NET)](<https://github.com/EPPlusSoftware/EPPlus.Samples.VB/tree/master/02-Import and export/05-Export to html>)
- [EPPlus Web samples](<https://samples.epplussoftware.com/HtmlExport/>)
- [Export data](<https://epplussoftware.com/docs/import-export-data/export/index.md>)