Usando tabelas no Dreamweaver

 

Quando pensamos numa tabela, a primeira coisa que vem a nossa cabeça são dados tabulares, uma tabela como mostrado abaixo:

 

 

Numa página web o uso de uma tabela é muito mais abrangente, usamos tabelas também para exibir dados tabulares, mas principalmente para diagramar nosso site, veja o exemplo deste site fictício que desenhei como demonstração para este tutorial.

 

 

Este site foi criado a partir de uma tabela assim:

 

 

Para os primeiros exemplos de aprendizado, usaremos dados tabulares, mas é sempre bom lembrar que o principal uso de tabelas será a criação do layout do site.

 

Vamos montar uma tabela do primeiro exemplo acima.

 

1. Crie um novo arquivo no Dreamweaver.

 

2. Clique no Menu Insert/Table.

 

 

3. Após configurar como na imagem acima, clique em OK.

 

4. Preencha os dados como no exemplo do início da página.

 

Mesclando células

 

Vamos criar uma tabela como a do exemplo abaixo:

 

 

1. Crie uma tabela com 4 linhas e 4 colunas, 500 pixels de largura.

 

2. Selecione as 4 células da primeira linha.

 

3. Clique no botão “Merge selected cells using spans”, como mostrado na próxima figura.

 

 

4. Selecione a primeira e a segunda célula da segunda linha e mescle-as também.

 

5. Faça a mesma coisa com a terceira e a quarta células da segunda linha.

 

6. Preencha os dados e use os botões de alinhamento da barra de propriedades para fazer o mesmo alinhamento do exemplo.

 

Modificando largura e a altura de células

 

Vamos ver neste tópico como alterar a largura e a altura de linhas e colunas de uma tabela.

 

Crie uma tabela com 4 linhas e 5 colunas.

 

 

Vamos modificar a altura das linhas usando pixels de a largura das células usando porcentagem, cada linha vai ter 40 pixels de altura e cada coluna terá 20% de largura, para que todas fiquem iguais.

 

Modificando a altura das linhas

 

Para modificar a altura de uma linha selecione-a toda, posicionando o mouse a esquerda da linha como mostrado na figura abaixo e digite o valor 40 em H no lugar apontado pela seta vermelha na próxima imagem.

 

 

Para modificar a largura de uma célula, selecione-a toda, posicionando o mouse no topo da célula como mostra a figura abaixo e digite 20% no lugar apontado pela seta vermelha.

 

 

Alterando a margem interna da célula e o espaçamento entre as células.

 

Podemos configurar o espaçamento entre células (cellspacing) e a margem interna da célula (cellpadding) quando criamos inserimos a tabela e depois da tabela pronta usando a barra de propriedades.

 

Para configurar estes dois valores depois de inserida a tabela, devemos selecionar a tabela clicando na linha de borda como mostrado abaixo. No exemplo vou configurar o espaçamento entre células para 5 (o valor default é 2) e a margem interna da cela para 5 também.

 

 

Usando tabelas para criar o layout de um site

 

Vamos montar dois tipos de layouts bem básicos:

 

 

 

Os dois modelos tem em comum a largura de 760 pixels e a altura total de 420 pixels, isto faz com que o site caiba cheio num monitor de 15 polegadas com resolução de 800x600 (argh!!!!!), que é o que a maioria ainda usa.

 

Modelo 1

 

Insira uma tabela com as configurações abaixo, note que inicialmente só podemos configurar a largura.

 

 

Selecione a primeira linha inteira e mescle as células, e modifique sua altura para 60.

 

Selecione a 2ª linha e modifique sua altura para 360, clique na 1ª célula da segunda linha e modifique sua largura para 160, a segunda célula deve ter sua largura configurada para 600.

 

Você vai notar que quando aumentamos a altura de uma célula, o seu alinhamento vertical padrão é centralizado (middle), o ideal seria que este alinhamento fosse na parte superior (top) para colocar ai um menu por exemplo, para modificar o alinhamento para o topo observe a próxima figura.

 

 

Nos próximos tutoriais veremos como fazer os links e como usar a tag <IFRAME> para que as páginas internas sejam exibidas na célula grande da tabela.

 

Modelo 2

 

Insira uma tabela com as configurações da próxima figura.

 

 

Selecione a primeira linha, mescle suas células e modifique sua altura para 60.

 

Selecione a 2ª linha, modifique sua altura para 340.

 

Configure a largura da primeira coluna da segunda linha para 130, a segunda coluna para 500 e a terceira para 130. Selecione as 3 células da segunda linha e modifique seu alinhamento para Top.

 

Selecione a terceira linha, mescle suas células e modifique sua altura para 20.