articles

Home / DeveloperSection / Articles / Export DataTable to HTML in C#.net

Export DataTable to HTML in C#.net

Devesh Omar8743 13-Jun-2014
Introduction

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

This code can be used as reporting purpose where sometimes client needs output

data in HTML format.

 Steps: first we will bind Datatable to datagridview
a.       Binding DatagridView using Datatable

Steps:
1.     Create datatable and Define Columns

 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

  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


dataGridView1.DataSource=table; 


4.       Running the code following would be screen.


Export DataTable to HTML in C#.net

Exporting Datatable to HTML.


I have written generic code which could create html text for every datatable.


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


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;
 
        }
  1. Understanding the code.

i)         We  created generic function which take datatable as parameter

ii)        We are using stringbuilder to create dynamic html text.

iii)        Here Output would contains equal number of rows and column as we have

in datagridview.

iv)        Creating columns in HTML

foreach (DataColumn myColumn in dt.Columns)
            {
                strHTMLBuilder.Append("<td >");
                strHTMLBuilder.Append(myColumn.ColumnName);
                strHTMLBuilder.Append("</td>"); 
            }


v)    Copy Data. Following code would create equal number of rows as we have in

datatable and copy it 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 above code we would get 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: 

Export DataTable to HTML in C#.net

g.    Conclusion

We have learned how to create html of datatable.


Updated 07-Sep-2019
I am Software Professional

Leave Comment

Comments

Liked By