Creating HTMLTable Dynamically

The Blog shows the way to generate the HTMLTable with user defined no. of rows & columns.

Description:

          The blog is intended to demonstrate the use of some HTMLControls for dynamically generating the HTMLTable on webpage using some piece of code.

          Required Namespace: System.Web.UI.HtmlControls

 

Controls used:

1.    Two Textboxes (txtRow & txtCol)

2.    One Button (btnClick)

3.    One Blank Table (htmlTable1)

 

Procedure:

Step 1: Accept the no. of Rows and Columns from User.

            int row = Convert.ToInt32(txtrow.Text);     // No. of Rows

            int col = Convert.ToInt32(txtcol.Text);     // No. of Columns

 Listing 1

 

Step 2: Now, Initialize the new TableRow & TableCell to add Data into Table.

            for (int i = 0; i < row; i++)

            {

                  HtmlTableRow rows = new HtmlTableRow();         //a new Row

                 

                  for (int j = 0; j < col; j++)

                  {

                        HtmlTableCell cell = new HtmlTableCell(); //a new Cell

Listing 2

Step 3: You can put any data into Cell, also can make some FORMATTING for good looks, and then add this cell to the row element…

                  

                   cell.InnerHtml = i + "," + j;               //Insert Data into Cell

            cell.Align = "Center";

            cell.BorderColor = "Gray";

           

            rows.Cells.Add(cell);                       //Attach Cell with Row

Listing 3

 

Step 4: Now, simply insert this row element into htmlTable1 to display that row on the screen.

 

               htmlTable1.Rows.Add(rows);                      //Attach Row with Table

Listing 4

 

Step 5: Now execute the web application and see the result.

         

 

Intended Result:

 

Figure 1

 

 

Summary:

 

          In this piece of writing, we see how to generate the HTML table with user accepted rows and columns. For writing the code here I used the C# and ASP.NET