Export (0) Print
Expand All

HtmlTable Server Control Declarative Syntax

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

<table
    EnableViewState="False|True"
    Id="string"
    Visible="False|True"
    OnDataBinding="OnDataBinding event handler"
    OnDisposed="OnDisposed event handler"
    OnInit="OnInit event handler"
    OnLoad="OnLoad event handler"
    OnPreRender="OnPreRender event handler"
    OnUnload="OnUnload event handler"
    runat="server"
    >

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

</table>

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 HtmlTableCellobjects between the opening and closing tags of each HtmlTableRow object to create the cells of the row.

NoteNote

Be 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 of cells. Likewise, each column should also share the same number of cells. If you are 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.

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="C#" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HtmlTable Control</title>
</head>
<body>  
<form id="Form1" runat="server">
   <div>

   <h3>HtmlTable Example</h3>

   <table id="Table1" 
      style="border-width:1; border-color:Black; padding:5"
      cellspacing="0" runat="server" /> 
      <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>
      <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 id="Submit1" type="submit" 
         value="Generate Table" runat="server" />

   </div>
</form>
</body>
</html>


Community Additions

ADD
Show:
© 2014 Microsoft