HTML
Para visualizar corretamente configurar a tela para 1024 x 768 pixels

Tabelas

Tabelas são um recurso bastante usado para se organizar visualmente, de modo alinhado, os dados em arquivos.

Se necessitar de informações gerais sobre com criar e suas propiedades clique em Tabelas.

Em um documento HTML as tabelas permitem colocar imagens e texto de um modo mais criativo ou adequado na página.

Dentro de cada célula da tabela pode-se inserir textos, imagens, arquivos, links e, inclusive, outras tabelas.

Cada linha pode conter várias células, assim, é preciso que se marque exatamente o ponto de quebra de uma linha e início de outra.

É bom lembrar que, na linguagem codificada

<TABLE> e </TABLE> indicam o início e o fim de uma tabela,
<TR> e </TR> determinam o início e o fim de cada linha.

A última linha da tabela dispensa o TR porque o uso da própria marcação de fim de tabela </TABLE> torna implícito o fim da linha.

Organização do texto.

Observe as duas situações a seguir:

Porque essa pergunta aparece só aqui?
2.

Porque essa pergunta pode aparecer aqui?

Ou aqui?

Ou aqui?

Evidentemente, na situação 2 o texto e as figuras estão inseridos em uma tabela. No caso é uma tabela com 1 linha e 2 colunas e a figura está numa coluna e os elementos de texto em outra célula.

E na situação 3, onde há mais figuras, porque a cor do plano de fundo pode mudar em apenas uma área da página?

Novamente, porque, na situação 3, as figuras estão inseridas em uma tabela com 1 linha e 3 colunas, cuja borda tem a dimensão zero (ou seja, não existe) e cujas cores de fundo foram alteradas, sendo transparente só na primeira célula.

Portanto, a utilização de tabelas auxilia a dispor os elementos da página na posição exata que o autor desejar.

Inserção de Tabelas

Clicar em "Tabela" / "Table" - "Inserir" / "Insert" ou em

e aparece a janela "Inserir tabela", com 3 abas,

Nelas se pode especificar o número de linhas ("rows") e de colunas ("columns") desejados.

A largura que a tabela ocupará na janela poderá ser determinada em 2 unidades: "Pixels" ou em "% da janela".

No campo "Border" (Borda) indica-se a largura da borda de uma tabela. Não haverá borda se o valor for 0. A partir do número 1 a borda passa a existir e quanto maior for o valor, mais larga será a borda.

No campo célula pode-se especificar o alinhamento:
- Horizontal: Left (à esquerda), Center (centralizar), Right (à direita)
- Vertical: Top (em cima), Midle (no meio), Bottom (embaixo)

Clicar no botão "Ok" para aplicar as escolhas feitas.

Alguns atributos da tabela
Depois da tabela estar na página, pode-se clicar em qualquer local dentro da tabela e clicar em "Tabela" - "Propriedades da tabela"

Na aba "Tabela" as informações acima se repetem. Mas há campos novos:

Em "Bordas e espaçamento"
- cellspacing: para definir o espaçamento entre células contíguas da tabela

- cellspading: onde se determina o espaçamento entre a borda da célula e o conteúdo da tela.

No campo "Alinhamento da tabela" / "Table Alignment" define-se o alinhamento horizontal dentro dos elementos da tabela. Pode assumir os valores Esquerda ( Left ), Centralizado ( Center ) e Direito ( Right ).

Pode-se colocar uma legenda na tabela e define-se sua posição clicando em "Legenda".

A cor do fundo da tabela será determinada se for clicado o campo logo após "Cor do plano de fundo".

Na janela que aparece basta clicar sobre a cor desejada para aplicá-la. Também pode ser digitado o código da cor no último campo à esquerda.

Notar que, se apenas 1 ou mais células estiverem selecionadas, a cor do fundo pode ser alterada só nela.

Clicar no botão "Aplicar" e, depois em "Ok" para aplicar as escolhas feitas.

Na aba "Células" pode-se selecionar uma célula, linha ou coluna:

Pode-se especificar altura e largura do que houver sido selecionado em 2 unidades: "Pixels" ou em "% da janela"

No campo "Alinhamento do conteúdo" / "Content Alignment" define-se os alinhamentos

- vertical da parte selecionada: Superior (Top), Centralizado (Middle) ou Inferior (Bottom).

- horizontal da parte selecionada: Esquerdo (Left), Centralizado (Center), Direito (Right) e Justificado (Justify).

Em "Estilo da célula" pode-se escolher entre "Normal" e "Cabeçalho".

No campo seguinte pode-se decidir se o texto deve ser quebrado ou não.

A cor do fundo da tabela será determinada se for clicado o campo logo após "Cor do plano de fundo", do mesmo modo que está descrito aqui.

Na janela que aparece basta clicar sobre a cor desejada para aplicá-la. Também pode ser digitado o código da cor no último campo à esquerda. Clicar no botão "Aplicar" e, depois em "Ok" para aplicar as escolhas feitas.

Clicando-se em "Edição avançada" / "Advanced Edit"; (nessa janela ou em "Inserir tabela"), abre-se a seguinte janela:

Na aba "Atributos do HTML" aparece um resumo dos vários atributos já escolhidos na tabela.

No exemplo acima está definido:
- o espaçamento entre a borda da célula e o conteúdo da tela (cellspading)
- o espaçamento entre células contíguas da tabela como 2 pixels (cellspacing)
- haverá borda na tanela e terá a menor moldura possível: 1 (border)
- a tabela ocupará toda a largura da célula - 100% (width)

Exercícios

4. Criar páginas, onde deve ser colocado título, autor e descrição, com:

4.1. Uma tabela com 3 linhas e 3 colunas, no mínimo, em algum ponto da página.
Escolher uma cor para o fundo.
Em pelo menos 1 célula deve haver uma figura não animada.
Em pelo menos 1 célula deve haver uma figura animada, com alinhamento diferente da anterior.
Salvar em html / htm4-1.html.

4.2. Uma tabela ocupando toda a página.
Escolher o número de linhas e colunas.
Em pelo menos 1 célula deve haver uma figura não animada, com borda de cor e espessura a seu gosto.
Em pelo menos 1 célula deve haver uma figura animada, com alinhamento diferente da anterior.
Deve haver texto em pelo menos 2 células.
Salvar em html / htm4-2.html.

4.3. Uma tabela ocupando toda a página.
Escolher o número de linhas e colunas.
Uma ou mais células devem ser transparentes, mas pelo menos uma deve ter uma cor no fundo, a seu gosto.
Em pelo menos uma célula deve haver uma figura não animada.
Em pelo menos uma célula deve haver uma figura animada, com alinhamento diferente da anterior.
Deve haver texto em pelo menos 2 células.
Inserir outra tabela interna, no mínimo 2x2, que deve ter fundo diferente (cor ou imagem) da tabela maior.
Salvar em html / htm4.3.html..

Onde encontrar mais informação

Referências Bibliográficas
(topo)

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?

Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

http://www.ufpa.br/dicas/htm/htm-tab.htm

Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 23 abr 2012