Este controles são utilizados para a criação de tabelas em uma página .aspx. São semelhantes aos Html Server Controls:HtmlTable, HtmlTableRow e HtmlTableCell, porém oferecem mais opções de propriedades, métodos e eventos.

Podemos construir uma tabela de tamanho fixo (número de linhas e colunas), ou podemos construir a tabela dinamicamente, através de código de programação. Porém as modificações nas linhas e colunas da tabela, serão perdidas quando a página for recarregada. Se o número de modificações for grande, devemos utilizar os controles DataList e DataGrid, ao invés do controle Table. Aprenderemos a utilizar os controles DataList e DataGrid nos Capítulos 10 e 11.

NOTA: O Controle Table Web Server Control é derivado da classe base Table, do namespace System.Web.UI.WebControls. Para uma referência completa à todas as propriedades desta classe, consulte a documentação do Framework .NET.

A sintaxe para este controle é a seguinte:

<asp:Table 

id="Identificação_no_código"

            BackImageUrl="Endereço da  imagem de segundo plano."

            CellSpacing="Distância, em  pixels, entre as bordas das células e o conteúdo."

            CellPadding=" Distância, em  pixels, entre as células da tabela."

             GridLines="None|Horizontal|Vertical|Both"

             HorizontalAlign="Center|Justify|Left|NotSet|Right"

             runat="server"

> 

    <asp:TableRow>

       <asp:TableCell>

         Texto  da Célula.

      </asp:TableCell>

    </asp:TableRow>

</asp:Table>

Para criar uma nova linha da tabela, utilizamos o controle TableRow. Uma tabela é formada por uma coleção de linhas, onde cada linha é definida por uma coleção de células – Cells Colection. Podemos definir o conjunto de linhas da tabela estaticamente, através da utilização de uma série de controles TableRow ou dinamicamente, através de código de programação

Sintaxe para o controle TableRow:

<asp:TableRow 

id="Identificação_co_código"

             HorizontalAlign="Center|Justify|Left|NotSet|Right"

             VerticalAlign="Bottom|Middle|NotSet|Top"

             runat="server"

> 

    <asp:TableCell>

            Texto da célula.

   </asp:TableCell>

</asp:TableRow>.

A propriedade  HorizontalAlign define o alinhamento horizontal do conteúdo da célula, em relação a célula; a propriedade VerticalAlign define o alinhamento vertical do conteúdo da célula, em relação a célula.

NOTA: O Controle TableRow Web Server Control é derivado da classe base TableRow, do namespace System.Web.UI.WebControls. Para uma referência completa à todas as propriedades desta classe, consulte a documentação do Framework .NET.

Para adicionarmos células (colunas) a uma linha da tabela, utilizamos o controle TableCell. Uma linha é formada por uma coleção de células (Cells).

Sintaxe para o controle TableCell:

<asp:TableCell 

            id="Identificação_no_código"

            ColumnSpan="Número de colunas  a ser mescladas."

            RowSpan="Número de linhas a  ser mescladas."

             HorizontalAlign="Center|Justify|Left|NotSet|Right"

             VerticalAlign="Bottom|Middle|NotSet|Top"

             Wrap="True|False"

             runat="server">

Texto da Célula.

</asp:TableCell>

A propriedade Wrap define se deve haver o retorno automático de texto dentro da célula (Wrap=”True”) ou não (Wrap=”False”).

NOTA: O Controle TableCell Web Server Control é derivado da classe base TableCell, do namespace System.Web.UI.WebControls. Para uma referência completa à todas as propriedades desta classe, consulte a documentação do Framework .NET.

Vamos apresentar um exemplo, onde uma tabela é criada dinamicamente, através de código executado no evento Load da página (Page_Load). O código do evento Load, adiciona três linhas, com três células em cada linha. A tabela é criada na seção de apresentação da página, porém sem nenhuma linha ou coluna, elementos estes que são adicionados pelo código do evento Load.

Na Listagem 9.5 temos o código para o exemplo proposto.

Listagem 9.5 – Os controles Table, TableRow e TableCell – chap9ex5.aspx.

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

<html>

<head>

<script runat="server">

       void Page_Load(Object sender, EventArgs e) 

      {

             // Declaro duas variáveis.

             // numrows contém o número de linhas.

             // numcells contém o número de colunas.

         int  numrows = 3;

          int numcells = 2;

             // O laço externo cria uma nova linha a cada  passagem do laço.

             // O laço interno vai adicionando células a  linha criada pela

             // passada do laço externo.

          for (int j=0; j<numrows; j++) 

          {          

            // Para cada passagem do  laço externo, adiciono uma nova linha.

            TableRow  r = new TableRow();

            for (int i=0; i<numcells; i++) 

             {

              // Para cada passagem do laço interno,  adiciono uma nova célula.

               TableCell  c = new TableCell();

             c.Controls.Add(new LiteralControl("linha " + j.ToString() + ", coluna " + i.ToString()));

             r.Cells.Add(c);

             }

             Table1.Rows.Add(r);

          }

      }

</script>

</head>

<body>

<form runat=server>

      <h3><font  face="Verdana">Exemplo de tabela  dinâmica!!</font></h3>

<asp:Table 

           id="Table1" 

           GridLines="Both" 

           HorizontalAlign="Center" 

             style="color:White;

                       background-color:Black;

                       border-color:Red;

                       border-width:6px;

                        border-style:Double;"

            Font-Name="Verdana" 

            Font-Size="8pt" 

            CellPadding="15" 

            CellSpacing="0" 

            runat="server"

/>

</form>

</body>

</html>

Digite o código da Listagem 9.5 e salve o mesmo em um arquivo chamado chap9ex5.aspx, na pasta chap9, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap9/chap9ex5.aspx

Você vai obter o resultado indicado na Figura 9.7.

Figura 9.7 Utilizando os controles Table, TableRow e TableCell – chap9ex5.aspx.

Alguns comentários sobre o exemplo:

No evento load utilizamos dois laços for. O laço externo adiciona uma nova linha à tabela, a cada passada do laço; já o laço interno, adiciona uma nova célula a cada passada do laço. Para definir o conteúdo da célula, utilizamos o seguinte comando:

            c.Controls.Add(new  LiteralControl("linha " + j.ToString() +  ", coluna " + i.ToString()));

Esta técnica é diferente da utilizada com os HtmlServer Controls para a criação de tabelas, quando utilizamos a propriedade InnerHtml do controle HtmlTableCell. Não podemos utilizar esta técnica com o controle TableCell, pois ele não possui uma propriedade InnerHtml.

Para resolver este problema utilizamos um controle do tipo LiteralControl. Quando esta página é compilada, o controle LiteralControl retorna exatamente o que foi passado como parâmetro. No nosso exemplo, ao carregar a página, tudo o que foi passado como parâmetro para o controle é executado e o resultado da execução é inserido no local do controle.  Vamos acompanhar o que acontece para a primeira passada do laço externo e a primeira passada do laço interno, em outras palavras:

j=0

i=0

quando a página é processada, o parâmetro passado para o controle LiteralControl fica da seguinte maneira:

linha 0, coluna 0

j.ToString é substituído pela string correspondente ao valor de j – 0.

i.ToString é substituído pela string correspondente ao valor de i – 0.

Com isso o nosso comando fica:

            c.Controls.Add(new LiteralControl(“linha 0, coluna 0”));

Ao processar todo este comando, é retornado apenas o argumento entre aspas:

linha 0, coluna 0

que é exatamente o conteúdo que será exibido na célula.

Embora pareça um pouco complicado, a primeira vista, este exemplo demonstra o poder e a flexibilidade que temos a disposição com o uso dos Web Server Controls e da biblioteca de classes do Framework .NET. Qualquer elemento da página é tratado como um objeto. Através de programação temos um controle total sobre os métodos, propriedades e eventos destes objetos.

Para finalizar, gostaria de lembrar que mais uma vez utilizamos a propriedade style, para definir alguns aspectos visuais do controle Table, conforme indicado no fragmento a seguir:

<asp:Table id="Table1" 

            GridLines="Both" 

            HorizontalAlign="Center" 

              style="color:White;

                       background-color:Black;

                       border-color:Red;

                       border-width:6px;

                         border-style:Double;"

            Font-Name="Verdana" 

            Font-Size="8pt" 

           CellPadding="15" 

           CellSpacing="0" 

           runat="server"

/>