Demonstra Passo a passo: Editando tabelas HTML no Visual Web Developer

Editar tabela é uma parte importante de muitas páginas da Web porque as tabelas são usadas para criar o layout da página.Esta explicação passo a passo ilustra os recursos de edição de tabelas do editor de HTML no Microsoft Visual Studio.Você irá usar tabelas para criar o layout de um formulário de entrada simples em uma página.

Observação:
Os recursos de edição de tabelas descritos nesta explicação passo a passo são pertinentes a tabelas HTML, e não ao controle Table do Servidor Web (o controle <asp:Table> e seus controles filho).

Tarefas ilustradas nesta explicação passo a passo incluem:

• Adicionar uma tabela.

• Selecionar a tabela, linhas e colunas.

• Redimensionar elementos.

• Adicionar e remover elementos da tabela.

• Configurar características de célula como cor do plano de fundo e alinhamento.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

• O Visual Web Developer e o .NET Framework.

Criando o Site Web

Se você já criou um site no Visual Studio (por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer), você pode usar esse site e pular para a próxima seção, "Criando o Layout de Página com uma Tabela". Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

1. Abra o Visual Web Developer.

2. No menu File, clique em NewWeb Site.

3. Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.

4. Na caixa Location, insira o nome da pasta onde você deseja manter as páginas do seu site.

   Por exemplo, digite o nome da pasta C:\WebSites.

5. Na lista Language, clique a linguagem de programação com a qual você prefere trabalhar.

6. Clique em OK.

   Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Criando o layout de página com uma tabela

Você será iniciado, adicionando uma tabela que define o layout geral da página.

Para adicionar uma tabela para o layout da página

1. Se você ainda não tiver uma página aberta no designer, adicione uma página ao site.

2. Alternar para modo Design.

3. No menu Layout, clique em Insert Table.

   A caixa de diálogo Insert Table aparece.

4. Selecione Template.

   Modelos de tabela são layouts de tabela predefinidos.

5. Na lista Template, selecione Header and side.

6. Clique em OK.

   Uma tabela de duas colunas é adicionada à página que ocupa toda a altura e largura da página.Uma única célula na parte superior ocupar as colunas, fornecendo um local para colocar um cabeçalho.A célula abaixo do cabeçalho esquerdo é para navegação ou informações do lado.A célula abaixo do cabeçalho direito é a área de vídeo principal para a página.

   Observação:
   As bordas ao redor das células na tabela são exibidas por padrão em tempo de design para ajudar você a editar.A menos que você explicitamente defina a tabela ou células para ter uma borda, nenhuma borda será exibida quando a tabela é processada no navegador.

Criar um layout de formulário com uma tabela

Você também pode usar tabelas HTML para formatar controles em um formulário.Agora você irá criar uma segunda tabela dentro do primeiro nome.Você posteriormente usará a segunda tabela para criar o layout de alguns controles em um formulário.

Para adicionar uma tabela no layout de formulário

1. A partir do grupo HTML da Toolbox, arrastar um elemento Table para a célula direita (principal).

   Quando você arrasta uma tabela do Toolbox, o Desenvolvedor do Visual Web cria uma tabela vazia de três colunas e linhas três.Você precisa apenas de duas colunas; em um momento, você excluirá uma das colunas.

   Observação:
   Você pode criar tabelas, usando o comando Insert Table, como fez anteriormente, ou arrastando um elemento Table da Toolbox.

2. Mova o ponteiro do mouse sobre a tabela até o ponteiro se transformar em um cursor de movimentação (seta de quatro pontas), e em seguida, clique para selecionar a tabela.

3. Arraste a borda direita da tabela para alargar a tabela até que ela seja a maior parte da largura da página.

   Ao arrastar, a tabela exibe as dimensões atuais.

4. Clique com o botão direito do mouse em uma das células na coluna mais a esquerda.Do submenu Delete, clique em Columns para remover a coluna da célula selecionada.

   A coluna é excluída da tabela.

   Observação:
   Se você vir uma opção Delete que não tenha um submenu, ela indica que o foco não está em uma célula.Clique com o botão direito do mouse dentro de uma célula na coluna da esquerda.

5. Clique na célula à direita inferior e pressione a tecla TAB para adicionar uma quarta linha à tabela.

   Agora você tem uma tabela de duas colunas e linhas, quatro que pode ser o container para seus controles de formulário.

Configuração de características de uma tabela de layout de página

Agora que você tem uma tabela de layout de formulário dentro da tabela da página, você pode concluir o layout da página, editando a tabela de layout de página.

Para definir características da tabela de layout de página

1. Na tabela de layout da página, clique na parte superior da célula.

   A borda mais grossa em torno da célula indica que ela está selecionada e no mode de edição de conteudo.

2. Na janela de propriedades, clique no botão da caixa Style.

   A caixa de diálogo Style Builder aparece.

3. Na guia Text, na lista Horizontal, clique em Centered.

4. Na guia Background, na lista Color, selecione uma cor que você deseja.Você também pode clicar no botão do lado da caixa Color para exibir a caixa de diálogo Color Picker e selecionar cores adicionais.

   As configurações feitas definem o estilo para a célula na parte superior da tabela de layout.

5. Digite Contoso Web Site como um título.

6. Selecione o texto e, na lista Formato do bloco na barra de ferramentas Formatação, clique em Título 1 <H1>.

7. Repita as etapas 1 a 6 para a célula mais à esquerda na tabela, com essas alterações:

   • Alterar o texto para This site is maintained by Contoso, Incorporated.

   • Não formate o texto como um Título 1.

   • Na guia Text da caixa de diálogo Style Builder, na lista Vertical, clique em bottom.

   Provavelmente em um página de produção Web, a célula od lado seria ocupada por um menu de links ou outro conteúdo.No entanto, para esta explicação passo a passo não importa qual o tipo de conteúdo da célula.

Criando o formulário

Agora você pode construir o formulário.

Para adicionar texto e controles para a tabela de layout de formulário

1. Na tabela de layout de formulário (a tabela dentro da tabela de layout de página), clique na parte superior esquerda da célula e digite Name:.

2. Clique na célula à esquerda do segunda linha e digite Birth year:.

3. A partir do grupo Padrão da Caixa de Ferramentas, arraste um controle TextBox para a célula superior direita.

4. Defina a propriedade do ID de controle do TextBox como textName.

5. Arraste outro TextBox na célula da direita da segunda linha e defina sua propriedade ID para textBirthYear.

6. Arraste um controle Button para a terceira célula à direita e defina sua propriedade Texto para Enviar.

7. Arraste um controle Label para a célula inferior direita, defina sua propriedade ID para labelDisplay, e desmarque sua propriedade Texto.

8. Coloque o cursor do mouse sobre a coluna esquerda até ver um símbolo de seleção (um quadrado pequeno) na parte superior da coluna, e seguida, clique no símbolo.

   A coluna esquerda está selecionada.

9. Na janela de propriedades, clique no botão da caixa Style para exibir a caixa de diálogo Style Builder.

10. Na guia Text, na lista Horizontal, clique em Right.

    As legendas de texto no formulário são alinhados à direita.

11. Clique em OK para fechar o Construtor de estilo.

12. Selecione a coluna esquerda novamente, e arraste a borda direita para reduzir a coluna até que esteja apenas larga o suficiente para ajustar o texto de legenda.

13. Clique com o botão direito do mouse na célula da tabela de layout fora da tabela de layout de formulário, e clique Style.

    O menu de atalho fornece uma maneira alternativa para exibir a caixa de diálogo Style Builder.

14. Na guia Text, na lista Vertical, clique em top.

    A tabela de layout de formulário é alinhada na parte superior da célula.

Programando os controles de formulário

Agora você pode programar os controles de formulário.O formulário exibe a idade que o usuário terá no próximo ano.

Para programar os controles de formulário

1. Clique duas vezes no controle Button no formulário.

   O editor cria um manipulador de eventos Click.

2. Adicione o seguinte código realçado.

   Protected Sub Button1_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click 
       Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
   End Sub
   

   protected void Button1_Click(Object sender, EventArgs e)
   {
       int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
   }
   

Testando a Página

Agora você pode testar a página.

Para testar a página

1. Pressione CTRL+F5 para executar a página.

   Quando a página é exibida no navegador, observe o layout que você criou.Porque você não especificou explicitamente as bordas da tabela, não há linhas no formulário.

2. Na caixa Name, digite seu nome.

3. Na caixa Birth year, digite o ano você nasceu, e clique no botão Submit.

   O cálculo da idade é exibido no formulário na localidade criada com a tabela de formulário.

Próximas etapas

Nesta explicação passo a passo, você exercitou alguns dos recursos do editor de tabela visual no modo Design.Você adicionou tabelas de duas maneiras, redimensionou uma tabela, adicionou uma linha, excluiu uma coluna, definiu estilos de célula, e adicionou texto e controles como conteúdo da célula.Sugestões para mais exemplos incluem:

• Aprenda mais meios para trabalhar com tabelas.Para obter detalhes, consulte:

  • Como: Adicionar e remover tabela elementos HTML no Visual Web Developer

  • Como: selecionar os elementos da tabela HTML e Sumário no Visual Web Developer

  • Como: Redimensionar elementos da tabela HTML no Visual Web Developer

• Aprenda algumas dicas para edição de tabelas em modo Design e modo fonte.Para obter detalhes, consulte:Dicas de Edição de Tabelas HTML no Visual Web Developer.

• Adicionar validação para a caixa de texto Birth year para que os usuários possam inserir somente anos válidos.Para obter mais informações, consulte Validando Entrada de Usuário em Páginas da Web ASP.NET.

Consulte também

Tarefas

Passo-a-passo: Criando e Usando Páginas Mestras do ASP.NET no Visual Web Developer

Conceitos

Navegação por Marcas no Editor HTML do Visual Web Developer

Formatando elementos no editor de HTML no Visual Web Developer