Export (0) Print
Expand All
2 out of 10 rated this helpful - Rate this topic

HtmlTable Class

Allows programmatic access on the server to the HTML <table> element.

For a list of all members of this type, see HtmlTable Members.

System.Object
   System.Web.UI.Control
      System.Web.UI.HtmlControls.HtmlControl
         System.Web.UI.HtmlControls.HtmlContainerControl
            System.Web.UI.HtmlControls.HtmlTable

[Visual Basic]
Public Class HtmlTable
   Inherits HtmlContainerControl
[C#]
public class HtmlTable : HtmlContainerControl
[C++]
public __gc class HtmlTable : public HtmlContainerControl
[JScript]
public class HtmlTable extends HtmlContainerControl

Thread Safety

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Remarks

Use the HtmlTable control to programmatically control the HTML <table> element on the server. This allows you to create a table on a Web page.

You can dynamically change the appearance of the <table> element by setting the BgColor, Border, BorderColor, Height, and Width properties. You can also control how the content of a cell is displayed by setting the Align, CellPadding, and CellSpacing properties.

The rows of the HtmlTable control are stored in the Rows property of the control. This allows you to programmatically access the individual rows of the table.

Note   A complex table model is not supported. You cannot have an HtmlTable control that nests <caption>, <col>, <colgroup>, <tbody>, <thead>, or <tfoot> elements. These elements are removed without warning and do not appear in the output HTML. An exception will be thrown if you attempt to programmatically add these table model elements to the Control.Controls collection of the HtmlTable control.

For a list of initial property values for an instance of HtmlTable, see the HtmlTable constructor.

Example

[Visual Basic, C#, JScript] The following example demonstrates how to use an HtmlTable control to display information in a table.

[Visual Basic] 
<%@ Page Language="VB" AutoEventWireup="True" %>

<html>
<head>

   <script runat="server">

      Sub Button_Click(sender As Object, e As EventArgs ) 

         Table1.BgColor = BgColorSelect.Value
         Table1.Border = CInt(BorderSelect.Value)
         Table1.BorderColor = BorderColorSelect.Value
         Table1.Height = HeightSelect.Value
         Table1.Width = WidthSelect.Value

      End Sub

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTable Example</h3>

      <table id="Table1" 
             Border="1" 
             BorderColor="black" 
             runat="server">

         <tr>
            <th>
               Column 1
            </th>
            <th>
               Column 2
            </th>
            <th>
               Column 3
            </th>
         </tr>
         <tr>
            <td>
               Cell 1
            </td>
            <td>
               Cell 2
            </td>
            <td>
               Cell 3
            </td>
         </tr>
         <tr>
            <td>
               Cell 4
            </td>
            <td>
               Cell 5
            </td>
            <td>
               Cell 6
            </td>
         </tr>

      </table>
      
      <hr>

      Select the display settings: <br><br>

      BgColor:
      <select id="BgColorSelect" 
              runat="server">

         <option Value="Red">Red</option>
         <option Value="Blue">Blue</option>
         <option Value="Green">Green</option>
         <option Value="Black">Black</option>
         <option Value="White" Selected="True">White</option>
        
      </select>

      &nbsp;&nbsp;

      Border:
      <select id="BorderSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="1" Selected="True">1</option>
         <option Value="2">2</option>
         <option Value="3">3</option>
         <option Value="4">4</option>
         <option Value="5">5</option>

      </select>

      &nbsp;&nbsp;

      BorderColor:
      <select id="BorderColorSelect" 
              runat="server">

         <option Value="Red">Red</option>
         <option Value="Blue">Blue</option>
         <option Value="Green">Green</option>
         <option Value="Black" Selected="True">Black</option>
         <option Value="White">White</option>

      </select>

      <br><br>

      Height:
      <select id="HeightSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="100">100</option>
         <option Value="150">150</option>
         <option Value="200">200</option>
         <option Value="250">250</option>

      </select>

      &nbsp;&nbsp;

      Width:
      <select id="WidthSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="200">200</option>
         <option Value="250">250</option>
         <option Value="300">300</option>
         <option Value="350">350</option>

      </select>
       
      <br><br>
  
      <input type="button" 
             value="Generate Table"
             OnServerClick = "Button_Click" 
             runat="server"/>

   </form>

</body>
</html>

[C#] 
<%@ Page Language="C#" AutoEventWireup="True" %>

<html>
<head>

   <script runat="server">

      void Button_Click(Object sender, EventArgs e)
      { 

         Table1.BgColor = BgColorSelect.Value;
         Table1.Border = Convert.ToInt32(BorderSelect.Value);
         Table1.BorderColor = BorderColorSelect.Value;
         Table1.Height = HeightSelect.Value;
         Table1.Width = WidthSelect.Value;

      }

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTable Example</h3>

      <table id="Table1" 
             Border="1" 
             BorderColor="black" 
             runat="server">

         <tr>
            <th>
               Column 1
            </th>
            <th>
               Column 2
            </th>
            <th>
               Column 3
            </th>
         </tr>
         <tr>
            <td>
               Cell 1
            </td>
            <td>
               Cell 2
            </td>
            <td>
               Cell 3
            </td>
         </tr>
         <tr>
            <td>
               Cell 4
            </td>
            <td>
               Cell 5
            </td>
            <td>
               Cell 6
            </td>
         </tr>

      </table>
      
      <hr>

      Select the display settings: <br><br>

      BgColor:
      <select id="BgColorSelect" 
              runat="server">

         <option Value="Red">Red</option>
         <option Value="Blue">Blue</option>
         <option Value="Green">Green</option>
         <option Value="Black">Black</option>
         <option Value="White" Selected="True">White</option>
        
      </select>

      &nbsp;&nbsp;

      Border:
      <select id="BorderSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="1" Selected="True">1</option>
         <option Value="2">2</option>
         <option Value="3">3</option>
         <option Value="4">4</option>
         <option Value="5">5</option>

      </select>

      &nbsp;&nbsp;

      BorderColor:
      <select id="BorderColorSelect" 
              runat="server">

         <option Value="Red">Red</option>
         <option Value="Blue">Blue</option>
         <option Value="Green">Green</option>
         <option Value="Black" Selected="True">Black</option>
         <option Value="White">White</option>

      </select>

      <br><br>

      Height:
      <select id="HeightSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="100">100</option>
         <option Value="150">150</option>
         <option Value="200">200</option>
         <option Value="250">250</option>

      </select>

      &nbsp;&nbsp;

      Width:
      <select id="WidthSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="200">200</option>
         <option Value="250">250</option>
         <option Value="300">300</option>
         <option Value="350">350</option>

      </select>
       
      <br><br>
  
      <input type="button" 
             value="Generate Table"
             OnServerClick = "Button_Click" 
             runat="server"/>

   </form>

</body>
</html>

[JScript] 
<%@ Page Language="JScript" AutoEventWireup="True" %>

<html>
<head>

   <script runat="server">

      function Button_Click(sender : Object, e : EventArgs)
      { 

         Table1.BgColor = BgColorSelect.Value;
         Table1.Border = Convert.ToInt32(BorderSelect.Value);
         Table1.BorderColor = BorderColorSelect.Value;
         Table1.Height = HeightSelect.Value;
         Table1.Width = WidthSelect.Value;

      }

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTable Example</h3>

      <table id="Table1" 
             Border="1" 
             BorderColor="black" 
             runat="server">

         <tr>
            <th>
               Column 1
            </th>
            <th>
               Column 2
            </th>
            <th>
               Column 3
            </th>
         </tr>
         <tr>
            <td>
               Cell 1
            </td>
            <td>
               Cell 2
            </td>
            <td>
               Cell 3
            </td>
         </tr>
         <tr>
            <td>
               Cell 4
            </td>
            <td>
               Cell 5
            </td>
            <td>
               Cell 6
            </td>
         </tr>

      </table>
      
      <hr>

      Select the display settings: <br><br>

      BgColor:
      <select id="BgColorSelect" 
              runat="server">

         <option Value="Red">Red</option>
         <option Value="Blue">Blue</option>
         <option Value="Green">Green</option>
         <option Value="Black">Black</option>
         <option Value="White" Selected="True">White</option>
        
      </select>

      &nbsp;&nbsp;

      Border:
      <select id="BorderSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="1" Selected="True">1</option>
         <option Value="2">2</option>
         <option Value="3">3</option>
         <option Value="4">4</option>
         <option Value="5">5</option>

      </select>

      &nbsp;&nbsp;

      BorderColor:
      <select id="BorderColorSelect" 
              runat="server">

         <option Value="Red">Red</option>
         <option Value="Blue">Blue</option>
         <option Value="Green">Green</option>
         <option Value="Black" Selected="True">Black</option>
         <option Value="White">White</option>

      </select>

      <br><br>

      Height:
      <select id="HeightSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="100">100</option>
         <option Value="150">150</option>
         <option Value="200">200</option>
         <option Value="250">250</option>

      </select>

      &nbsp;&nbsp;

      Width:
      <select id="WidthSelect" 
              runat="server">

         <option Value="0">0</option>
         <option Value="200">200</option>
         <option Value="250">250</option>
         <option Value="300">300</option>
         <option Value="350">350</option>

      </select>
       
      <br><br>
  
      <input type="button" 
             value="Generate Table"
             OnServerClick = "Button_Click" 
             runat="server"/>

   </form>

</body>
</html>

[Visual Basic, C#, JScript] The following example demonstrates how to dynamically create an HtmlTable control.

[Visual Basic] 
<%@ Page Language="VB" %>

<html>
<head>

   <script runat="server">

      Sub Page_Load(sender As Object, e As EventArgs)

         Dim i As Integer
         Dim j As Integer
         Dim row As HtmlTableRow
         Dim cell As HtmlTableCell 

         ' Get the number of rows and columns selected by the user.
         Dim numrows As Integer = CInt(Select1.Value)
         Dim numcells As Integer = CInt(Select2.Value)

         ' Iterate through the rows.
         For j = 0 to numrows - 1 

            ' Create a new row and add it to the Rows collection.
            row = New HtmlTableRow()

            ' Provide a different background color for alternating rows.
            If (j Mod 2) = 1 Then
               row.BgColor="Gainsboro"
            End If

            ' Iterate through the cells of a row.
            For i = 0 to numcells - 1 
           
               ' Create a new cell and add it to the Cells collection.
               cell = New HtmlTableCell()
               cell.Controls.Add(new LiteralControl("row " & _ 
                                                 j.ToString() & _ 
                                                 ", cell " & _
                                                 i.ToString()))
               row.Cells.Add(cell)
            
            Next i

            Table1.Rows.Add(row)
         
         Next j
      
      End Sub

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTable Example</h3>

      <table id="Table1" 
             CellPadding="5" 
             CellSpacing="0" 
             Border="1" 
             BorderColor="black" 
             runat="server"/>
        
      <hr>

      Select the number of rows and columns to create: <br><br>

      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>

      &nbsp;&nbsp;

      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>
       
      <br><br>
  
      <input type="submit" 
             value="Generate Table" 
             runat="server"/>

   </form>

</body>
</html>

[C#] 
<%@ Page Language="C#" %>

<html>
<head>

   <script runat="server">

      void Page_Load(Object sender, EventArgs e) 
      {

         // Get the number of rows and columns selected by the user.
         int numrows = Convert.ToInt32(Select1.Value);
         int numcells = Convert.ToInt32(Select2.Value);

         // Iterate through the rows.
         for (int j=0; j<numrows; j++) 
         {

            // Create a new row and add it to the Rows collection.
            HtmlTableRow row = new HtmlTableRow();

            // Provide a different background color for alternating rows.
            if (j%2 == 1)
               row.BgColor="Gainsboro";

            // Iterate through the cells of a row.
            for (int i=0; i<numcells; i++) 
            {
               // Create a new cell and add it to the Cells collection.
               HtmlTableCell cell = new HtmlTableCell();
               cell.Controls.Add(new LiteralControl("row " + 
                                                 j.ToString() + 
                                                 ", cell " +
                                                 i.ToString()));
               row.Cells.Add(cell);
            }
            Table1.Rows.Add(row);
         }
      }

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTable Example</h3>

      <table id="Table1" 
             CellPadding="5" 
             CellSpacing="0" 
             Border="1" 
             BorderColor="black" 
             runat="server"/>
        
      <hr>

      Select the number of rows and columns to create: <br><br>

      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>

      &nbsp;&nbsp;

      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>
       
      <br><br>
  
      <input type="submit" 
             value="Generate Table" 
             runat="server"/>

   </form>

</body>
</html>

[JScript] 
<%@ Page Language="JScript" %>

<html>
<head>

   <script runat="server">

      function Page_Load(sender : Object, e : EventArgs) 
      {

         // Get the number of rows and columns selected by the user.
         var numrows : int = Convert.ToInt32(Select1.Value);
         var numcells : int = Convert.ToInt32(Select2.Value);

         // Iterate through the rows.
         for (var j : int = 0; j < numrows; j++) 
         {

            // Create a new row and add it to the Rows collection.
            var row : HtmlTableRow = new HtmlTableRow();

            // Provide a different background color for alternating rows.
            if (j%2 == 1)
               row.BgColor="Gainsboro";

            // Iterate through the cells of a row.
            for (var i : int = 0; i < numcells; i++) 
            {
               // Create a new cell and add it to the Cells collection.
               var cell : HtmlTableCell = new HtmlTableCell();
               cell.Controls.Add(new LiteralControl("row " + 
                                                 j.ToString() + 
                                                 ", cell " +
                                                 i.ToString()));
               row.Cells.Add(cell);
            }
            Table1.Rows.Add(row);
         }
      }

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTable Example</h3>

      <table id="Table1" 
             CellPadding="5" 
             CellSpacing="0" 
             Border="1" 
             BorderColor="black" 
             runat="server"/>
        
      <hr>

      Select the number of rows and columns to create: <br><br>

      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>

      &nbsp;&nbsp;

      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>
       
      <br><br>
  
      <input type="submit" 
             value="Generate Table" 
             runat="server"/>

   </form>

</body>
</html>

[C++] No example is available for C++. To view a Visual Basic, C#, or JScript example, click the Language Filter button Language Filter in the upper-left corner of the page.

Requirements

Namespace: System.Web.UI.HtmlControls

Platforms: Windows 98, Windows NT 4.0, Windows Millennium Edition, Windows 2000, Windows XP Home Edition, Windows XP Professional, Windows Server 2003 family

Assembly: System.Web (in System.Web.dll)

See Also

HtmlTable Members | System.Web.UI.HtmlControls Namespace | HtmlContainerControl | HtmlTableCell | HtmlTableCellCollection | HtmlTableRow | HtmlTableRowCollection

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.