Introduction

I would like to share a way by which we can export a DataTable to HTML format.

This code can be used for reporting purposes where sometimes the client needs output data in HTML format.

First we will bind the DataTable to a DataGridView.

A. Binding DataGridView using DataTable

  1. Create a DataTable and define columns as in the following: 
    DataTable table = new DataTable();  
table.Columns.Add("ID", typeof(int));  
table.Columns.Add("NAME", typeof(string));  
table.Columns.Add("CITY", typeof(string)); 
  2. Add rows as in the following: 
    table.Rows.Add(111, "Devesh", "Ghaziabad");  
table.Rows.Add(222, "ROLI", "KANPUR");  
table.Rows.Add(102, "ROLI", "MAINPURI");  
table.Rows.Add(212, "DEVESH", "KANPUR");
  3. Binding DataGridView as in the following: 
    dataGridView1.DataSource=table;
  4. Running the code, the following will be the screen.

B. Exporting DataTable to HTML

I have written generic code that creates HTML text for every DataTable.

You can use this code directly in your project for reporting purposes.

Code below:

protected string ExportDatatableToHtml(DataTable dt)  
{  
StringBuilder strHTMLBuilder = new StringBuilder();  
strHTMLBuilder.Append("<html >");  
strHTMLBuilder.Append("<head>");  
strHTMLBuilder.Append("</head>");  
strHTMLBuilder.Append("<body>");  
strHTMLBuilder.Append("<table border='1px' cellpadding='1' cellspacing='1' bgcolor='lightyellow' style='font-family:Garamond; font-size:smaller'>");
strHTMLBuilder.Append("<tr >");  
foreach (DataColumn myColumn in dt.Columns)  
{  
strHTMLBuilder.Append("<td >");  
strHTMLBuilder.Append(myColumn.ColumnName);  
strHTMLBuilder.Append("</td>");  
}  
strHTMLBuilder.Append("</tr>");
foreach (DataRow myRow in dt.Rows)  
{  
strHTMLBuilder.Append("<tr >");  
foreach (DataColumn myColumn in dt.Columns)  
{  
strHTMLBuilder.Append("<td >");  
strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());  
strHTMLBuilder.Append("</td>");  
}  
strHTMLBuilder.Append("</tr>");  
}  
//Close tags.  
strHTMLBuilder.Append("</table>");  
strHTMLBuilder.Append("</body>");  
strHTMLBuilder.Append("</html>");  
string Htmltext = strHTMLBuilder.ToString();  
return Htmltext;  
} 

c. Understanding the code

  • We created a generic function that uses a DataTable as a parameter.
  • We are using stringbuilder to create dynamic HTML text.
  • Here the output contains an equal number of rows and column as we have in the DataGridView.
  • Creating columns in HTML.
foreach (DataColumn myColumn in dt.Columns)  
{  
strHTMLBuilder.Append("<td >");  
strHTMLBuilder.Append(myColumn.ColumnName);  
strHTMLBuilder.Append("</td>");  
  
} 

v. Copy Data. The following code creates an equal number of rows as in the DataTable and copies the data to HTML rows.

foreach (DataRow myRow in dt.Rows)  
{  
  
strHTMLBuilder.Append("<tr >");  
foreach (DataColumn myColumn in dt.Columns)  
{  
strHTMLBuilder.Append("<td >");  
strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());  
strHTMLBuilder.Append("</td>");  
  
}  
strHTMLBuilder.Append("</tr>");  
} 

d. After executing the code above we would get the following HTML

<html >
<head>
</head>
<body>
<table border='1px' cellpadding='1' cellspacing='1' bgcolor='lightyellow' style='font-family:Garamond; font-size:smaller'>
<tr >
<td >ID</td>
<td >NAME</td>
<td >CITY</td>
</tr><tr >
<td >111</td><td >Devesh</td>
<td >Ghaziabad</td></tr>
<tr ><td >222</td><td >ROLI</td>
<td >KANPUR</td></tr><tr >
<td >102</td><td >ROLI</td>
<td >MAINPURI</td></tr><tr >
<td >212</td><td >DEVESH</td>
<td >KANPUR</td></tr></table>
</body>
</html>

e. Creating HTML file

string HtmlBody = ExportDatatableToHtml(table)  
System.IO.File.WriteAllText(@"c:\abc.HTML", HtmlBody); 

f. Output

Conclusion

We have learned how to create HTML from a DataTable.