Dicas de Edição de Tabelas HTML no Visual Web Developer
O editor de tabelas HTML do Visual Studio é uma ferramenta eficaz para manipulação de tabelas HTML, para definir o leiaute de páginas da Web e para exibir conteúdos em formato de coluna.As dicas a seguir ajudarão a fazer o melhor uso do editor de tabelas HTML.
Editando Tabelas HTML
Os pontos a seguir descrevem comportamento gerais na Edição de Tabelas:
O editor tabelas HTML é um modo visual de editar elementos de tabelas HTML, como os elementos table, tr e td.Ainda que o editor de tabelas HTML forneça uma maneira conveniente para editar esses elementos, ele não consegue fornecer recursos de edição para quaisquer recursos que não sejam suportados por tabelas HTML.
O editor de tabelas trabalha com tabelas HTML (elementos table e seus elementos-filho) mas não com o controle Table do ASP.NET (elemento asp:table).O controle Table do ASP.NET é projetado principalmente para ser usado por programação ao invés de servir para layout estático, do modo como as tabelas HTML são frequentemente usadas.
O modo Design processa a tabela de uma maneira semelhante a como ela irá aparecer em um navegador.Ele faz isso interpretando os elementos das tabelas HTML da maneira muito semelhante a que um navegador faria.Para obter mais informações, consulte a seção "Comportamento de Dimensionamento e Redimensionamento" posteriormente neste tópico.
Escopo de edições
É útil entender como as edições feitas no modo Design são aplicadas a elementos de tabela.Observe o seguinte:
Cada célula da tabela é considerada um membro da linha ou coluna em que ela inicia, como exibido no modo Design.Uma operação em uma linha ou coluna afeta todos os membros desta linha ou coluna.Mapear uma célula na modo Design para um elemento correspondente td no modo de exibição Source pode nem sempre funcionar conforme o esperado se as células contiverem os atributos colspan ou rowspan.
Operações de linha afetam cada um dos elementos td desta linha.Elas não afetam o elemento tr.
Selecionar e modificar uma coluna afeta quaisquer elementos th que estão nesta coluna.
Comportamento de Dimensionamento e Redimensionamento
Algumas vezes, o editor de tabelas pode funcionar de maneiras inesperadas quando você especificar inicialmente dimensões da tabela, linha, ou coluna, ou quando você redimensionar esses elementos.O comportamento das dimensões do elemento de tabela refletem o comportamento que a tabela terá no navegador.Por exemplo, colunas que não têm uma definição de largura específica serão ampliadas ou reduzidas de acordo com a largura total da tabela, a largura das outras colunas na tabela, e com o conteúdo que todas as colunas contêm.
Conteúdo Leva Prioridade
Em geral, a dimensão do conteúdo de uma célula tem prioridade sobre as configurações de largura ou altura em células ou linhas.Por exemplo, se uma célula de tabela contém um gráfico, ou um elemento img, o tamanho do elemento gráfico terá prioridade sobre a largura da célula ou mesmo da tabela.Isso também é válido para controles nas células da tabela.
Se células contiverem texto, e se o atributo da célula nowrap não estiver definido, o texto será ajustado na largura da célula.No entanto, se o texto não contiver espaço em branco, como espaços ou pontuação, não haverá lugar para quebra automática do texto e a largura da célula será reajustada para acomodar o texto.
Conteúdo também tem prioridade na altura da linha.Se um texto ajustar com quebra automática em uma célula, ele pode fazer com que uma linha fique maior do que a configuração height especificada para o elemento tr que representa a linha.
Diretrizes Para o Dimensionamento e Redimensionamento da Tabela
Devido à maneira como o HTML é elaborado, é possível atribuir configurações de dimensão conflitantes a uma tabela e aos elementos que ela contém.Por exemplo, uma tabela de duas colunas pode ser definida com a uma largura de 100 %, mas cada uma das duas colunas pode ser definida com a uma largura de 100 pixels.
A tabela a seguir resume como o dimensionamento é manipulado no editor de tabelas.Em todos os casos, a largura do conteúdo possui prioridade.
Dimensões especificadas |
Comportamento |
---|---|
A largura é especificada para a tabela e para todas as colunas da tabela, ou a altura é especificada para a tabela e para todas as linhas da tabela. |
As dimensões da tabela têm prioridade; a tabela calcula os tamanhos da coluna ou linha proporcionalmente. |
A largura é especificada para a tabela e para algumas das colunas da tabela, ou a altura é especificada para a tabela e para algumas das linhas da tabela. |
Os elementos de dimensões definidas são processados usando dimensões exatas, e os elementos restantes são redimensionados para preencher as dimensões completas da tabela.
Observação:
O editor de tabelas exibe a largura dos elementos de tabela de dimensões indefinidas como "auto".
|
A largura é especificada para cada uma das colunas da tabela mas não para a tabela propriamente dita, ou a altura é especificada para cada uma das linhas da tabela mas não para a própria tabela. |
A largura ou altura da tabela é calculada adicionando a largura de todas as colunas da tabela ou a altura de todas as linhas da tabela. |
Nenhuma largura ou altura é especificada para a tabela ou qualquer um dos elementos da tabela. |
A largura ou altura é calculada somente sobre o conteúdo da célula e o espaço necessário para bordas. |
Observação: |
---|
Se você esta redimensionando uma linha ou coluna e os elementos td usam diferentes unidades para altura ou largura, o editor de tabelas normalizará as unidades em pixels. |
Consulte também
Conceitos
Introdução à Edição de Tabelas HTML no Visual Web Developer
Como: Criar e edição tabelas HTML no modo de modo de exibição de Design