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
Procedure
- 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));
- 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");
- Binding DataGridView as in the following:
- dataGridView1.DataSource=table;
- 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>");
- }
-
-
- 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.