HtmlTable Control

Article
10/23/2006

Creates a server-side control that maps to the <table> HTML element and allows you to create a table.

<table id="programmaticID"
       align=left | center | right
       bgcolor="bgcolor"
       border="borderwidthinpixels"
       bordercolor="bordercolor"
       cellpadding="spacingwithincellsinpixels"
       cellspacing="spacingbetweencellsinpixels"
       height="tableheight"
       rows="collectionofrows"
       width="tablewidth"
       runat="server" >

   <tr>
      <td></td>
   </tr>

</table>

Remarks

Use the HtmlTable control to program against the HTML <table> element. An HtmlTable control is made up of rows (represented by HtmlTableRow objects) stored in the Rows collection of a table. Each row is made up of cells (represented by HtmlTableCell objects) stored in the Cells collection of a row.

To create a table, first declare an HtmlTable control in the form on your page. Next, place HtmlTableRow objects between the opening and closing tags of the HtmlTable control, one for each row you want in your table. Once the rows of the table are defined, declare HtmlTableCell objects between the opening and closing tags of each HtmlTableRow object to create the cells of the row.

Note Make sure you have correct number of cells in each row and column, otherwise the table might not display as expected. In general, each row should have the same number or cells. Likewise, each column should also share the same number of cells. If you're spanning cells, each row should be the same width and each column should be the same height.

The HtmlTable control allows you to customize the appearance of a table. You can specify the background color, border width, border color, table height, and table width of the table by setting the BgColor, Border, BorderColor, Height, and Width properties, respectively. You can also control spacing between cells and spacing between the contents of a cell and the cell border by setting the CellSpacing and CellPadding properties.

Example

The following example generates table rows and table cells, based on user selections from two HtmlSelect controls. Every time the page is loaded, the code checks to see what values the user has selected in the HtmlSelect controls. The number of rows and columns in the HtmlTable control is dynamically generated based on these values. To construct a table, create the rows of the table (represented by HtmlTableRow objects) and add them to the Rows collection of the HtmlTable control. To construct the rows, create the cells of the row (represented by HtmlTableCell objects) and add them to Cells collection of the HtmlTableRow.

<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      Sub Page_Load(sender As Object, e As EventArgs)
         Dim row As Integer = 0
         ' Generate rows and cells.
         Dim numrows As Integer = Convert.ToInt32(Select1.Value)
         Dim numcells As Integer = Convert.ToInt32(Select2.Value)
         Dim j As Integer
         For j = 0 To numrows - 1
            Dim r As New HtmlTableRow()
            ' Set bgcolor on alternating rows.
            If row Mod 2 = 1 Then
               r.BgColor = "Gainsboro"
            End If
            row += 1
            Dim i As Integer
            For i = 0 To numcells - 1
               Dim c As New HtmlTableCell()
               c.Controls.Add(New LiteralControl("row " & j.ToString() & _
                                                ", cell " & i.ToString()))
               r.Cells.Add(c)
            Next i
            Table1.Rows.Add(r)
         Next j
      End Sub 
   </script>
</head>
<body>  
   <h3>HtmlTable Example</h3>
   <form runat="server">
      <p>
      <table id="Table1" 
             CellPadding=5 
             CellSpacing=0 
             Border="1" 
             BorderColor="black" 
             runat="server" /> 
      <p>
      Table rows:
      <select id="Select1" runat="server">
         <option Value="1">1</option>
         <option Value="2">2</option>
         <option Value="3">3</option>
         <option Value="4">4</option>
         <option Value="5">5</option>
      </select>
      <br>
      Table cells:
      <select id="Select2" runat="server">
         <option Value="1">1</option>
         <option Value="2">2</option>
         <option Value="3">3</option>
         <option Value="4">4</option>
         <option Value="5">5</option>
      </select>
      <input type="submit" value="Generate Table" runat="server">
   </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      void Page_Load(Object sender, EventArgs e) 
      {
         int row = 0;
         // Generate rows and cells.
         int numrows = Convert.ToInt32(Select1.Value);
         int numcells = Convert.ToInt32(Select2.Value);
         for (int j=0; j<numrows; j++) 
         {
            HtmlTableRow r = new HtmlTableRow();
            // Set bgcolor on alternating rows.
            if (row%2 == 1)
               r.BgColor="Gainsboro";
            row++;
            for (int i=0; i<numcells; i++) 
            {
               HtmlTableCell c = new HtmlTableCell();
               c.Controls.Add(new LiteralControl("row " + j.ToString() +
                              ", cell " + i.ToString()));
               r.Cells.Add(c);
            }
            Table1.Rows.Add(r);
         }
      }
   </script>
</head>
<body>  
   <h3>HtmlTable Example</h3>
   <form runat="server">
      <p>
      <table id="Table1" 
             CellPadding=5 
             CellSpacing=0 
             Border="1" 
             BorderColor="black" 
             runat="server" /> 
      <p>
      Table rows:
      <select id="Select1" runat="server">
         <option Value="1">1</option>
         <option Value="2">2</option>
         <option Value="3">3</option>
         <option Value="4">4</option>
         <option Value="5">5</option>
      </select>
      <br>
      Table cells:
      <select id="Select2" runat="server">
         <option Value="1">1</option>
         <option Value="2">2</option>
         <option Value="3">3</option>
         <option Value="4">4</option>
         <option Value="5">5</option>
      </select>
      <input type="submit" value="Generate Table" runat="server">
   </form>
</body>
</html>

HtmlTable Control

Remarks

Example

See Also

Additional resources