Controllo HtmlTable

Articolo
04/11/2008

Crea un controllo lato server di cui viene eseguito il mapping sull'elemento HTML <table> e consente di creare una tabella.

<tableid="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>

Osservazioni

Utilizzare il controllo HtmlTable per eseguire la programmazione sull'elemento HTML <table>. Un controllo HtmlTable è costituito da righe, rappresentate da oggetti HtmlTableRow, archiviati nell'insieme Rows della tabella. Ogni riga è costituita da celle, rappresentate da oggetti HtmlTableCell, archiviati nell'insieme Cells di una riga.

Per creare una tabella, dichiarare in primo luogo un controllo HtmlTable nel form sulla pagina, quindi inserire gli oggetti HtmlTableRow tra i tag di apertura e di chiusura del controllo HtmlTable, uno per ogni riga che si desidera inserire nella tabella. Una volta che le righe della tabella sono state definite, dichiarare gli oggetti HtmlTableCell tra i tag di apertura e di chiusura di ogni oggetto HtmlTableRow per creare le celle della riga.

Nota Assicurarsi che ogni riga e colonna contenga il numero corretto di celle, altrimenti l'aspetto della tabella potrebbe risultare diverso dal previsto. In genere, è opportuno che ogni riga abbia lo stesso numero di celle. In modo analogo, è opportuno che ogni colonna abbia lo stesso numero di celle. Se si espandono le celle, è opportuno che ogni riga abbia la stessa larghezza e ogni colonna la stessa altezza.

Il controllo HtmlTable consente di personalizzare l'aspetto della tabella. È possibile specificare il colore di sfondo, la larghezza e il colore del bordo, l'altezza della tabella e la larghezza della tabella impostando rispettivamente le proprietà BgColor, Border, BorderColor, Height e Width. È inoltre possibile controllare la spaziatura tra le celle e quella tra il contenuto di una cella e il relativo bordo impostando le proprietà CellSpacing e CellPadding.

Esempio

Nell'esempio seguente vengono generate le righe e le celle della tabella in base alle selezioni dell'utente dai due controlli HtmlSelect. Ogni volta che una pagina viene caricata, il codice verifica quali valori sono stati selezionati nei controlli HtmlSelect. Il numero di righe e colonne nel controllo HtmlTable è generato in modo dinamico in base a questi valori. Per costruire una tabella, creare le righe della tabella, rappresentate dagli oggetti HtmlTableRow, e aggiungerle all'insieme Rows del controllo HtmlTable. Per costruire le righe, creare le celle della riga, rappresentate dagli oggetti HtmlTableCell, e aggiungerle all'insieme Cells di 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>
[C#]
<%@ 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>

Vedere anche

Controllo HtmlTable

Osservazioni

Esempio

Vedere anche

Risorse aggiuntive