Compartir a través de


Sintaxis declarativa del control de servidor HtmlTable

Actualización: noviembre 2007

Crea un control de servidor que se asigna al elemento HTML <table> y permite crear una tabla.

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

Comentarios

Utilice el control HtmlTable para programar con el elemento HTML <table>. Un control HtmlTable se compone de filas (representadas por objetos HtmlTableRow)

almacenadas en la colección Rows de una tabla. Cada fila se compone de celdas (representadas por objetos HtmlTableCell) que se almacenan en la colección Cells de una fila.

Para crear una tabla, en primer lugar, declare un control HtmlTable en el formulario de la página. A continuación, coloque objetos HtmlTableRow entre las etiquetas de apertura y cierre del control HtmlTable, uno por cada fila que contenga la tabla. Una vez definidas las filas de la tabla, declare objetos HtmlTableCellentre las etiquetas de apertura y cierre de cada objeto HtmlTableRow para crear las celdas de la fila.

Nota

Compruebe que el número de celdas de cada fila y columna es correcto; en caso contrario, puede que la tabla no se muestre como esperaba. En general, cada fila debe tener el mismo número de celdas. De igual modo, cada columna debe compartir también el mismo número de celdas. Si ajusta el tamaño de las celdas, cada fila debe tener el mismo ancho y cada columna el mismo alto.

El control HtmlTable permite personalizar la apariencia de una tabla. Se puede especificar el color de fondo, el ancho y el color del borde, así como el alto y el ancho de la tabla mediante las propiedades BgColor, Border, BorderColor, Height y Width, respectivamente. También se puede controlar el espaciado entre celdas y el espaciado entre el contenido y el borde de una celda mediante las propiedades CellSpacing y CellPadding.

Ejemplo

En el siguiente ejemplo se generan las filas y las celdas de una tabla en función de las selecciones del usuario en dos controles HtmlSelect. Cada vez que se carga la página, el código comprueba los valores que el usuario ha seleccionado en los controles HtmlSelect. El número de filas y columnas del control HtmlTable se genera dinámicamente en función de estos valores. Para construir una tabla, cree las filas de la tabla (representadas por objetos HtmlTableRow) y agréguelas a la colección Rows del control HtmlTable. Para construir las filas, cree las celdas de la fila (representadas por objetos HtmlTableCell) y agréguelas a la colección Cells de HtmlTableRow.

<%@ Page Language="VB" 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">
    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>

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

      <br />
      <table id="Table1"  cellspacing="0" runat="server"
         style="border-width:1; border-color: Black; padding: 5"
             /> 
      <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>
<%@ 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>

Vea también

Referencia

HtmlTable

Sintaxis declarativa del control de servidor HtmlTableCell

Sintaxis declarativa del control de servidor HtmlTableRow

Sintaxis declarativa del control de servidor HtmlForm

System.Web.UI.HtmlControls

Otros recursos

Controles de servidor HTML