Na WEB desde 11/04/97

mais um site associado à:

Atualizada em: 07/07/03
© 1997-2008 by Francisco Panizo Beceiro

Algo em que o Front Page ajuda demais é na elaboração de TABELAS. Os comandos de tabelas (<table> <tr> <td>), entre outros, são dos mais difíceis de se utilizar na linguagem HTML (não pela sua dificuldade intrínseca, que aliás é quase nenhuma - mas porque o autor da página não consegue ver a "criação" enquanto está digitando esses comandos) porque obriga ao autor da página a "imaginar" o resultado final da tabela sem a VER sendo construída na sua frente. Assim sendo, só para a montagem das tabelas mais complexas, já seria uma razão mais que suficiente para adquirir uma cópia do Front Page.

Inserindo Tabelas:

O modo mais comum para inserir tabelas no FrontPage Editor não difere muito do modo usado pelo Word:

1. Selecione a posição onde deseja inserir a sua tabela (use o mouse ou o teclado);
2. Clique no botão (na Barra de Ferramentas) Insert Table;
3. Com o mouse marque o número de colunas e linhas desejadas na tabela, arrastando com o botão do mouse pressionado;
4. Solte o botão do mouse quando o número de células de sua tabela estiver adequado;

Outro modo de inserir uma tabela é com a ajuda do MENU:

1. Selecione a posição onde deseja inserir a sua tabela (use o mouse ou o teclado);
2. Selecione o menu Table * Insert Table;
3. No menu Insert Table que se abre ajuste as características desejadas para a tabela:
   1. No campo Size defina o número de linhas e de colunas que a tabela deve conter;
      ROWS = número de linhas desejadas;
      COLUMNS = número de colunas desejadas;
   2. No campo Layout defina:
      1. Alignment (alinhamento da tabela na página)
         as opções são: LEFT (esquerda), CENTER (centrada) e RIGHT (direita);
      2. Border Size (espessura das bordas - em pixels)
         um número correspondente a espessura desejada para TODAS as bordas da tabela
         (o tamanho default é 2)
      3. Cell Padding (espaço interno das células - em pixels)
         um número correspondente ao espaço interno entre as margens de cada célula e o conteúdo das mesmas;
      4. Cell Spacing (espaço entre as células - em pixels)
         um número correspondente ao espaçamento entre cada célula da tabela;
   3. No campo Width defina:
      1. Specify Width (Especificar Largura da Tabela)
         se desejado definir a largura total da tabela, selecione essa opção;
         em caso contrário, deixe a opção desmarcada (default);
      2. Para Specify Width ligado, defina o valor da largura total:
         1. in Pixels (o valor especificado estará em PIXELS);
         2. in Percent (o valor especificado estará em % da largura da página visualizada)

Como exemplo, definimos a tabela abaixo com as seguintes configurações:

Size: Rows = 3 / Columns = 4
Layout: Alignment = CENTER / Border Size = 2 / Cell Padding = 5 / Cell Spacing = 4
Width: Width (em %) = 70

Note que não há cores definidas, nem houve qualquer tipo de alinhamento do texto internamente às células (veja como fazer isso no tópico Formatando Tabelas, mais abaixo)

Agora veja outro exemplo, a tabela abaixo foi definida com as seguintes configurações:

Size: Rows = 3 / Columns = 4
Layout: Alignment = CENTER / Border Size = 4 / Cell Padding = 1 / Cell Spacing = 2
Width: Width (em %) = 70

Note que o tamanho da tabela (a nível de altura) está menor - devido à cell spacing e border size menores - e os textos estão mais encostados na células - devido à cell padding menor... entretanto a largura total não se alterou em nada (em relação ao primeiro exemplo)

Formatando Tabelas:

O modo de formatar tabelas no FrontPage Editor permite realizar todos os ajustes, tanto nos itens já mostrados na sua criação, quanto na aparência geral de algumas de suas células, e também na formatação do texto interno da tabela.

Vejamos cada um dos casos à seguir...

Ajustando largura e layout da tabela:

1. Selecione o menu Table * Table Properties
2. Selecione as opções desejadas (em LAYOUT ou MINIMUM WIDTH) e altera-as de acordo com as suas novas necessidades;
3. pressione o botão [OK] quando terminar;

Ajustando layout e largura da célula:

1. Selecione o menu Table * Cell Properties
2. Selecione as opções desejadas (em LAYOUT ou MINIMUM WIDTH) e altera-as de acordo com as novas necessidades;
3. pressione o botão [OK] quando terminar;

Ajustando cores da tabela:

1. Selecione o menu Table * Table Properties;
2. No campo Custom Background clique sobre a seta para baixo (ao lado de DEFAULT);
3. Selecione uma das 16 cores pré-definidas, ou selecione CUSTOM;
   1. No caso de selecionar a opção CUSTOM, você tem duas alternativas:
      1. Selecione uma das 48 cores básicas (na paleta básica à esquerda da janela), ou
      2. Selecione uma das 16.777.216 cores possíveis na matriz gráfica à direita da janela, clicando diretamente num determinado ponto da matriz, ou digitando o trio de côres definido por números entre 0 e 255 para cada côr primária (VERMELHO, VERDE e AZUL);
4. Pressione o botão [OK] quando terminar;

Ajustando cores de células*:

1. Selecione o menu Table * Cell Properties;
2. No campo Custom Background clique sobre a seta para baixo (ao lado de DEFAULT);
3. Selecione uma das 16 cores pré-definidas, ou selecione CUSTOM;
   1. No caso de selecionar a opção CUSTOM, você tem duas alternativas:
      1. Selecione uma das 48 cores básicas (na paleta básica à esquerda da janela), ou
      2. Selecione uma das 16.777.216 cores possíveis na matriz gráfica à direita da janela, clicando diretamente num determinado ponto da matriz, ou digitando o trio de côres definido por números entre 0 e 255 para cada cor primária (VERMELHO, VERDE e AZUL);
4. Pressione o botão [OK] quando terminar;

(* ATENÇÃO: a seleção de uma cor para uma célula em particular, tem preferência sobre a cor escolhida para a tabela inteira - assim você poderá definir uma cor genérica, mas destacar alguma(s) célula(s) com uma, ou mais, cor diferente)

Agora veja o primeiro exemplo, mas com as seguintes configurações de formatação:

Em Cell Properties: cor OLIVA na 1ª linha toda / 2ª e 3ª colunas CENTRALIZADAS / 4ª coluna alinhada à DIREITA;
EM Table Properties: cor VERMELHA
Para facilitar a leitura da tabela foram também definidas: 1ª linha em NEGRITO / todos os textos na cor BRANCA

Tabelas Virtuais:

Algo fundamental para melhorar o layout de uma página é a utilização de tabelas "virtuais". O conceito é simples de entender e criar.

1. Cria-se uma tabela como posicionador do conteúdo da página;
2. Use o número de linhas e colunas que forem necessárias para abrigar os elementos desejados
   (em geral é usada uma tabela com apenas 1 linha);
3. Insira nas células os conteúdos que deverão aparecer como estando lado a lado para quem vai visitar a sua página na Internet;
4. Defina a espessura da borda da tabela como ZERO (é a etapa FUNDAMENTAL);

Como exemplo, definimos uma tabela (abaixo) com as seguintes configurações:
1 linha e 3 colunas com BORDER = 0 - na 1ª coluna colocamos um texto alinhado ao topo e com fundo cor creme bem suave; na 2ª coluna colocamos uma imagem, centralizada na coluna e centralizada na célula; e na última coluna inserimos outra tabela de aparência normal (isto é BORDER SIZE maior que 0)

[Índice] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]