A necessidade de esticar a tabela para todo o espaço da janela do navegador surge, por exemplo, quando o design da página é colocado dentro da tabela. A solução para este problema não requer a escrita de código complexo, mas envolve a consideração de alguns dos recursos de marcação de páginas da web.
Necessário
Conhecimento básico de HTML
Instruções
Passo 1
Primeiro, você precisa esclarecer o significado da próxima operação. No código HTML, as páginas da tabela são um conjunto de tags emparelhadas aninhadas (uma de abertura e uma de fechamento). Marcas de células (
) estão aninhados em tags de string (
), e aqueles, por sua vez, em tags de tabela (
) Na tag de abertura da tabela, você pode definir sua largura e altura em unidades absolutas (pixels) e relativas (porcentagens). Com tamanhos relativos, a largura e a altura do elemento pai da tabela são consideradas 100%. Se você colocar uma tabela diretamente no corpo da página (e não em uma camada, formulário, outra tabela, etc.), as dimensões de seu elemento pai serão a largura e a altura da página. Isso significa que, para esticar a mesa para todo o espaço livre, você precisa especificar 100% das dimensões horizontais e verticais para ela.
Passo 2
Agora você pode começar a colocar isso em prática em HTML. A largura e a altura da tabela são especificadas pelos atributos de largura e altura. Portanto, o código da tabela indicando 100% das dimensões em todas as direções e, por exemplo, com duas células em uma linha, pode ter a seguinte aparência:
| célula esquerda da mesa | célula direita da mesa |
etapa 3
Especificar 100% de largura e altura será suficiente para esticar a tabela se você escolher o padrão HTML correto pelo qual o navegador deve ler o código da página. A marca é colocada na primeira linha do documento. Você precisa de uma tag com o seguinte conteúdo:
Passo 4
E mais um ponto deve ser levado em consideração no seu código: por padrão, a página é recuada nas bordas da janela em alguns pixels, de forma que a tabela, mesmo depois de preencher a página inteira, não se estenderá por toda a janela. Para eliminar esses campos desnecessários, você pode especificar recuos zero nos atributos correspondentes na tag de abertura do corpo da página ():
Etapa 5
Quando montado, todo o código da página com uma tabela esticada até a largura e altura total da tela terá a seguinte aparência:
Mesa esticada
| célula esquerda da mesa | célula direita da mesa |
