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

By FoxLearn 9/3/2020 6:17:01 AM 5.78K

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#, you can do it by following way.

Creating a simple form 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.

northwind

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.
    this.customersTableAdapter.Fill(this.appData.Customers);
}

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.

private string ExportDatatableToHtml(DataTable dt)
{
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.Append("<html >");
    stringBuilder.Append("<head>");
    stringBuilder.Append("<meta charset='utf-8'>");
    stringBuilder.Append("</head>");
    stringBuilder.Append(@"<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' integrity='sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk' crossorigin='anonymous'>");
    stringBuilder.Append("<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>");
    stringBuilder.Append("<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>");
    stringBuilder.Append("<body>");
    stringBuilder.Append("<table class='table table-sm table-hover' style='margin: 20px;'>");
    stringBuilder.Append("<thead>");
    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'>");
        stringBuilder.Append(column.ColumnName);
        stringBuilder.Append("</th>");
    }
    stringBuilder.Append("</tr>");
    stringBuilder.Append("</thead>");
    foreach (DataRow row in dt.Rows)
    {
        stringBuilder.Append("<tr>");
        foreach (DataColumn column in dt.Columns)
        {
            stringBuilder.Append("<td class='border border-secondary'>");
            stringBuilder.Append(row[column.ColumnName].ToString());
            stringBuilder.Append("</td>");
        }
        stringBuilder.Append("</tr>");
    }
    stringBuilder.Append("</table>");
    stringBuilder.Append("</body>");
    stringBuilder.Append("</html>");
    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.

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