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

  1. Create a DataTable and define columns as in the following:
    1.  DataTable table = new DataTable();  
    2.  table.Columns.Add("ID", typeof(int));  
    3.  table.Columns.Add("NAME", typeof(string));  
    4.  table.Columns.Add("CITY", typeof(string)); 
  2. Add rows as in the following:
    1. table.Rows.Add(111, "Devesh", "Ghaziabad");  
    2. table.Rows.Add(222, "ROLI", "KANPUR");  
    3. table.Rows.Add(102, "ROLI", "MAINPURI");  
    4. table.Rows.Add(212, "DEVESH", "KANPUR"); 
  3. Binding DataGridView as in the following:
    1. 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:
  1. protected string ExportDatatableToHtml(DataTable dt)  
  2. {  
  3. StringBuilder strHTMLBuilder = new StringBuilder();  
  4. strHTMLBuilder.Append("<html >");  
  5. strHTMLBuilder.Append("<head>");  
  6. strHTMLBuilder.Append("</head>");  
  7. strHTMLBuilder.Append("<body>");  
  8. strHTMLBuilder.Append("<table border='1px' cellpadding='1' cellspacing='1' bgcolor='lightyellow' style='font-family:Garamond; font-size:smaller'>");  
  9.   
  10. strHTMLBuilder.Append("<tr >");  
  11. foreach (DataColumn myColumn in dt.Columns)  
  12. {  
  13. strHTMLBuilder.Append("<td >");  
  14. strHTMLBuilder.Append(myColumn.ColumnName);  
  15. strHTMLBuilder.Append("</td>");  
  16.   
  17. }  
  18. strHTMLBuilder.Append("</tr>");  
  19.   
  20.   
  21. foreach (DataRow myRow in dt.Rows)  
  22. {  
  23.   
  24. strHTMLBuilder.Append("<tr >");  
  25. foreach (DataColumn myColumn in dt.Columns)  
  26. {  
  27. strHTMLBuilder.Append("<td >");  
  28. strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());  
  29. strHTMLBuilder.Append("</td>");  
  30.   
  31. }  
  32. strHTMLBuilder.Append("</tr>");  
  33. }  
  34.   
  35. //Close tags.  
  36. strHTMLBuilder.Append("</table>");  
  37. strHTMLBuilder.Append("</body>");  
  38. strHTMLBuilder.Append("</html>");  
  39.   
  40. string Htmltext = strHTMLBuilder.ToString();  
  41.   
  42. return Htmltext;  
  43.   

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.
  1. foreach (DataColumn myColumn in dt.Columns)  
  2. {  
  3. strHTMLBuilder.Append("<td >");  
  4. strHTMLBuilder.Append(myColumn.ColumnName);  
  5. strHTMLBuilder.Append("</td>");  
  6.   

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

  1. foreach (DataRow myRow in dt.Rows)  
  2. {  
  3.   
  4. strHTMLBuilder.Append("<tr >");  
  5. foreach (DataColumn myColumn in dt.Columns)  
  6. {  
  7. strHTMLBuilder.Append("<td >");  
  8. strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());  
  9. strHTMLBuilder.Append("</td>");  
  10.   
  11. }  
  12. strHTMLBuilder.Append("</tr>");  

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

  1. <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

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

f. Output



Conclusion

We have learned how to create HTML from a DataTable.

Next Recommended Readings