ASP.Net C# Code to Create Dynamic Tables

by top54u.com 06 Mar, 2008

Inside ASP .NET Tutorials

ASP.Net Repeater dynamically using C# code

Adding Simple Code to ASP .Net Page

Inline-Code vs Code-Behind

Create dynamic tables using HtmlControls HtmlTable

ASP.Net Gridview Confirm Delete Using Javascript with C# Code

ASP.Net C# Code to Load Image from Database

ASP.Net 2.0 GridView Compute Column Sum using C#

In ASP.Net 2.0 there are number of controls to display the data retrieved from the database in tabular form using Grid View Control, list view Control, Repeater. But in some cases when there is no option to custom these default controls. At that time a questions arises – how to generate dynamic tables? How to display the data according to requirement?

You can use the Literal Control to display the html tagged string generated by using VB/C# code in ASP.Net 2.0.

(Advance ASP.Net developers: See Alternate Example here using Panel Control to Create dynamic tables using HtmlControls HtmlTable)

To generate the table using string variables you can use the following C# code:

// create a string type variable to generate dynamic table

string dynTable="";

// start with table tag with following attributes

dynTable = "<table cellspacing=\"0\" cellpadding=\"2\" border=\"1\">";

// outer loop to generate table rows

for (int tRows = 0; tRows < 5; tRows++)

{

//start table row

dynTable += "<tr>";

// inner loop to generate columns

for (int tCols = 0; tCols < 4; tCols++)

{

// create column

dynTable += "<td>"; dynTable += "Row: " + (tRows+1) + " Col: " + (tCols+1) ;

// close td column tag

dynTable += "</td>";

}

// close table row

dynTable += "</tr>";

}

// close the table tag

dynTable += "</table>";

Literal1.Text = dynTable;

Above C# code will build a string having table tag, tr as table row, td as table data/column. To display the data retrieved from database you can set the tRows < [No. of DataRows Retrieved] and tCols < [No. of DataColmns].

Output Result of above code:

Row: 1 Col: 1	Row: 1 Col: 2	Row: 1 Col: 3	Row: 1 Col: 4
Row: 2 Col: 1	Row: 2 Col: 2	Row: 2 Col: 3	Row: 2 Col: 4
Row: 3 Col: 1	Row: 3 Col: 2	Row: 3 Col: 3	Row: 3 Col: 4
Row: 4 Col: 1	Row: 4 Col: 2	Row: 4 Col: 3	Row: 4 Col: 4
Row: 5 Col: 1	Row: 5 Col: 2	Row: 5 Col: 3	Row: 5 Col: 4