JavaScript Editor jscript editor     Web designer 



Main Page

It is common to add rows and cells to a Table Web server control at run time. The Table Web server control is designed specifically for this task.

NoteNote

To design a table visually in Design view, use an HtmlTable control. If you also need to programmatically manipulate the contents of the HtmlTable control, convert its rows and cells to HtmlTableRow and HtmlTableCell controls by setting their runat attribute to server. For details, see Converting HTML Server Controls to HTML Elements.

Rows in a Table Web server control are objects of type TableRow. The Rows property of the Table control supports a collection of TableRow objects. To add a row to the table, you add a TableRow object to this collection.

Similarly, the TableRow object has a Cells property that supports a collection of objects of type TableCell. You can add cells to a row by manipulating this collection.

To add rows and cells to a table dynamically

  1. To add a row, create a new object of type TableRow:

    Visual BasicВ CopyCode imageCopy Code
    Dim tRow As New TableRow()
    Table1.Rows.Add(tRow)

    C#В CopyCode imageCopy Code
    TableRow tRow = new TableRow();
    Table1.Rows.Add(tRow);
  2. To add cells to the row, create one or more objects of type TableCell:

    Visual BasicВ CopyCode imageCopy Code
    Dim tCell As New TableCell()
    tRow.Cells.Add(tCell)

    C#В CopyCode imageCopy Code
    TableCell tCell = new TableCell();
    tRow.Cells.Add(tCell);
  3. Add content to the new cell. You can do this in several ways, as shown in the following table.

    To add Do this

    Static text

    Set the cell's Text property.

    Controls

    Declare an instance of the control and add it to the cell's Controls collection.

    Both text and controls in the same cell

    Declare the text by creating an instance of the Literal class. Add it to the cell's Controls collection as you would other controls.

    NoteNote

    By default, controls that you add dynamically to a Web Forms page are added to the page's view state. If you recreate controls with each round trip, this can result in unexpected behavior when the page is processed, because view state is restored before the controls are recreated. You can avoid problems by setting the EnableViewState property of the container control (for example, of the Table control) to false. For more information, see Adding ASP.NET Controls Programmatically.

    The following code example shows how you can add rows and cells to a Table control. The number of rows and columns is determined by what the user enters into two text boxes. Each cell displays the row and cell number as static text.

    Visual BasicВ CopyCode imageCopy Code
    Protected Sub Button1_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles Button1.Click
       ' Total number of rows.
       Dim rowCnt As Integer
       ' Current row count
       Dim rowCtr As Integer
       ' Total number of cells (columns).
       Dim cellCtr As Integer
       ' Current cell counter.
       Dim cellCnt As Integer
        
       rowCnt = CInt(Textbox1.Text)
       cellCnt = CInt(Textbox2.Text)
        
       For rowCtr = 1 To rowCnt
          Dim tRow As New TableRow()
          For cellCtr = 1 To cellCnt
             Dim tCell As New TableCell()
             tCell.Text = "Row " & rowCtr & ", Cell " & cellCtr
             ' Add new TableCell object to row.
             tRow.Cells.Add(tCell)
          Next
          ' Add new row to table.
          Table1.Rows.Add(tRow)
       Next
          
    End Sub

    C#В CopyCode imageCopy Code
    protected void Button1_Click (object sender, System.EventArgs e)
    {
       // Total number of rows.
       int rowCnt;
       // Current row count.
       int rowCtr;
       // Total number of cells per row (columns).
       int cellCtr;
       // Current cell counter
       int cellCnt;
    
       rowCnt = int.Parse(TextBox1.Text);
       cellCnt = int.Parse(TextBox2.Text);
    
       for(rowCtr=1; rowCtr <= rowCnt; rowCtr++) {
          // Create new row and add it to the table.
          TableRow tRow = new TableRow();
          Table1.Rows.Add(tRow);
          for (cellCtr = 1; cellCtr <= cellCnt; cellCtr++) {
             // Create a new cell and add it to the row.
             TableCell tCell = new TableCell();
             tCell.Text = "Row " + rowCtr + ", Cell " + cellCtr;
             tRow.Cells.Add(tCell);
          }
       }
    }

    The following code example is similar to the previous one, but displays static text and a Hyperlink control in each cell. The Hyperlink control navigates to a mocked-up URL, passing a mock product ID. Because the example mixes static text and controls, the static text is implemented as a Literal object, which is added to the cell's Controls collection just like the Hyperlink control is.

    Visual BasicВ CopyCode imageCopy Code
    Protected Sub Button1_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles Button1.Click
       ' Total number of rows.
       Dim rowCnt As Integer
       ' Current row count
       Dim rowCtr As Integer
       ' Total number of cells (columns).
       Dim cellCtr As Integer
       ' Current cell counter.
       Dim cellCnt As Integer
          
       rowCnt = CInt(TextBox1.Text)
       cellCnt = CInt(TextBox2.Text)
    
       For rowCtr = 1 To rowCnt
          Dim tRow As New TableRow()
          For cellCtr = 1 To cellCnt
             Dim tCell As New TableCell()
             ' Mock up a product ID
             Dim prodID As String
             prodID = rowCtr & "_" & cellCtr
             
             ' Create literal text as control.
             Dim s As New LiteralControl()
             s.Text = "Buy: "
             ' Add to cell.
             tCell.Controls.Add(s)
             ' Create Hyperlink Web Server control and add to cell.
             Dim h As New HyperLink()
             h.Text = rowCtr & ":" & cellCtr
             h.NavigateUrl = "http://www.microsoft.com/net"
             ' Add cell to row.
             tCell.Controls.Add(h)
             ' Add new TableCell object to row.
             tRow.Cells.Add(tCell) 
          Next cellCtr
          ' Add new row to table.
          Table1.Rows.Add(tRow) 
       Next rowCtr
    End Sub

    C#В CopyCode imageCopy Code
    Protected void Button1_Click (object sender, System.EventArgs e)
    {
       // Total number of rows.
       int rowCnt;
       // Current row count.
       int rowCtr;
       // Total number of cells per row (columns).
       int cellCtr;
       // Current cell counter.
       int cellCnt;
    
    
       rowCnt = int.Parse(TextBox1.Text);
       cellCnt = int.Parse(TextBox2.Text);
    
       for(rowCtr=1; rowCtr <= rowCnt; rowCtr++) {
          // Create a new row and add it to the table.
          TableRow tRow = new TableRow();
          Table1.Rows.Add(tRow);
          for (cellCtr = 1; cellCtr <= cellCnt; cellCtr++) {
             // Create a new cell and add it to the row.
             TableCell tCell = new TableCell();
             tRow.Cells.Add(tCell);               
             // Mock up a product ID.
             string prodID = rowCtr + "_" + cellCtr;
    
             // Add a literal text as control.
             tCell.Controls.Add(new LiteralControl("Buy: "));
             // Create a Hyperlink Web server control and add it to the cell.
             System.Web.UI.WebControls.HyperLink h = new HyperLink();
             h.Text = rowCtr + ":" + cellCtr;
             h.NavigateUrl = "http://www.microsoft.com/net";
             tCell.Controls.Add(h);
          }
       }
    }

See Also



JavaScript Editor jscript editor     Web designer