Windows Forms: How to Convert DataTable to Html Table in C#

This post shows you How to Convert DataTable to Html Table in C# Windows Forms Application.

Sometimes you need to export file or convert from datatable to html string in c#. Convert a DataTable to an HTML table in C# Windows Forms involves iterating over the rows and columns of the DataTable and constructing the HTML markup accordingly.

How to Convert DataTable to Html Table in C#

Here's a simple example of how you can achieve this

Drag and drop the DataGridView, Button controls from the Visual Studio toolbox onto your form designer, then design a simple layout as shown below.

c# convert datatable to html table

I'm using Northwind database to play the demo.

Adding a datasource to your table in sql server.

add datasource to form designer

Entering your dataset name is AppData.

private void frmConvertDataTableToHtmlTable_Load(object sender, EventArgs e)
    // TODO: This line of code loads data into the 'appData.Customers' table. You can move, or remove it, as needed.

You can see the code is automatically added to the Form_Load event to help you get data from the customers table.

Creating an ExportDatatableToHtml method to help you convert data from DataTable to Html as shown below.

// c# export datatable to html
private string ExportDatatableToHtml(DataTable dt)
   // Start building HTML table
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.Append("<html >");
    stringBuilder.Append("<meta charset='utf-8'>");
    stringBuilder.Append(@"<link rel='stylesheet' href='' integrity='sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk' crossorigin='anonymous'>");
    stringBuilder.Append("<script src='' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>");
    stringBuilder.Append("<script src='' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>");
    stringBuilder.Append("<table class='table table-sm table-hover' style='margin: 20px;'>");
    // Add table header
    stringBuilder.Append("<tr class='bg-primary' style='color: white; text-align: left;'>");
    foreach (DataColumn column in dt.Columns)
        stringBuilder.Append("<th class='border border-secondary'>");
    foreach (DataRow row in dt.Rows)
        // Add table rows
        foreach (DataColumn column in dt.Columns)
            stringBuilder.Append("<td class='border border-secondary'>");
    // Close HTML table
    // return html as a string
    var html = stringBuilder.ToString();
    return html;

You should use StringBuilder in loop to increase speed.

Finally, Add a click event handler to the Convert button allows you to export from datatable to html file.

// c# convert datatable to html
private void btnConvert_Click(object sender, EventArgs e)
    using (SaveFileDialog saveFileDialog = new SaveFileDialog() { Filter = "Html files|*.html" })
        if (saveFileDialog.ShowDialog() == DialogResult.OK)
           //c# write data to html file
            string html = ExportDatatableToHtml(this.appData.Customers.CopyToDataTable());
            System.IO.File.WriteAllText(saveFileDialog.FileName, html);

We create a StringBuilder to construct the HTML markup, then we iterate over the columns of the DataTable to build the table headers (<th>).

We iterate over the rows of the DataTable and then over the items within each row to build the table cells (<td>).

Finally, we close the HTML table and set the generated HTML as the content of a WebBrowser control.

You can place a WebBrowser control on your form to display the generated HTML. Make sure to call ExportDataTableToHtml() method with your DataTable whenever you need to display it.