Baixe HTML E CCSS programção e outras Notas de estudo em PDF para Programação Javascript, somente na Docsity!
TABELAS
As tabelas são muito importantes para o designer de uma home-page. Com elas pode- se fazer alinhamentos que dificilmente seriam possíveis com simples comandos.
A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor posicionados na home-page.
Vamos discutir, nesta parte, quais são os comandos para se criar uma tabela e mostrar alguns exemplos. Claro que você deverá praticar e principalmente planejar a sua tabela, pois sem isso, fica muito difícil de controlar o código HTML da sua home-page.
O comando para se inserir uma tabela é ; para iniciar uma linha devemos introduzir a tag e para uma célula (alguns preferem dizer coluna) . Todos estes comandos são encerrados como , e respectivamente.
Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :
Criando Tabelas
TABELA
PRIMEIRA COLUNA
SEGUNDA COLUNA TERCEIRA COLUNA
PRIMEIRA COLUNA SEGUNDA COLUNA TERCEIRA COLUNA
Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como ficou.
Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta tabela.
Nas células da tabela você pode inserir desde simples frases até figuras inteiras. Parâmetros podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a largura de uma célula; distanciar as células uma das outras; inserir cor de fundo dentro da célula etc.
Vamos procurar trabalhar com vários exemplos para visualizarmos melhor o uso destes parâmetros.
1-ALTERANDO A LARGURA DA CÉLULA
Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag . Exemplo1:
WIDTH=100
WIDTH=200 (PIXELS)
O parâmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em porcentagem, como mostrado no exemplo a seguir. Também dentro da tag vemos um outro parâmetro que é VALIGN=MIDDLE, este parâmetro tem por função alinhar o conteúdo da célula no meio da mesma, ou seja, dentro da célula as frases são alinhadas com relação ao seu centro.
Exemplo2:
WIDTH=25% WIDTH=75%
Outro parâmetro que pode ser usado para separar espaços em uma célula é CELLPADDING que inclui ou exclui espaços dentro da célula, ou seja, se você tiver um elemento (frase, texto, figura etc.) dentro da célula você pode acrescentar espaços por igual nos quatros cantos da célula, fazendo com que seu texto ou figura não fique "grudado" nas paredes da célula. Aproveite os exemplos anteriores e experimente usar este atributo para ver como ele funciona.
Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que encontramos na Internet são feito por intermédio de tabelas.
Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas.
3-UM POUCO MAIS DE TABELAS
Agora que você já está um pouco mais familiarizado com o uso de tabelas e com seus principais atributos, vamos ver como podemos aperfeiçoar o uso de tabelas.
Em seguida descreveremos uma série de outros atributos e comandos para tabelas:
...
Esta tag insere um cabeçalho dentro da célula. Na verdade a única diferença entre a tag e a tag é que a exibe o conteúdo da célula em negrito.
...
Exibe um texto centralizado em relação à tabela, como se fosse uma legenda.
Exemplo:
LEGENDA
Conteúdo em negrito
Conteúdo em negrito
Repare neste exemplo, que a legenda já sai centralizada com relação a tabela e repare no espaço dentro da célula devido ao comando CELLPADDING.
4-OS ATRIBUTOS COLSPAN E ROWSPAN
Estes atributos são muito importantes dentro da tag . São eles que nos possibilitam remodelar a disposição das células dentro da tabela. Vejamos um exemplo prático:
Exemplo do uso do COLSPAN
CÉLULA 1 CÉLULA 2
Neste exemplo vemos que na tag foi introduzido o parâmetro COLSPAN. Este parâmetro tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos ter um certo número de colunas. Logo, se você quiser que uma célula ocupe uma única linha, como no nosso exemplo, você deve inserir o parâmetro dentro da tag desta célula. A quantidade de células que virão em baixo da célula que recebeu o atributo COLSPAN deve ser de acordo com o número especificado no parâmetro. Mas se quisermos definir uma única célula ocupando uma coluna inteira? Neste caso usamos o atributo ROWSPAN. Exemplo:
Exemplo do uso do ROWSPAN CÉLULA 1 CÉLULA 2
Para melhor utilizar estes parâmetros e ver como eles funcionam você deve fazer a sua própria tabela, pois somente desta forma você conseguirá fixar o uso destes parâmetros.
Veja uma tabela com todas as linhas internas ( default ) :
Outro exemplo sem as linhas internas :
Outro exemplo usando o complemento ROWS:
O último exemplo usará o complemento COLS :
As tabelas são um forte recurso de modelagem das home-pages hoje em dia e para que você consiga utilizar bem este recuso não deve se limitar somente aos exemplos desta apostila, procure em sites e até mesmos em livros , como por exemplo: "Criando sites arrasadores na Web" (capítulo 4) ou "HTML Truques Espertos" (capítulo 5). Nessas referências você poderá encontrar vários outros exemplos de páginas usando tabelas mais complexas (como por exemplo, uma tabela periódica dos elementos) e é claro em laboratório desenvolvendo sua própria home-page.
Há uma observação importantíssima que devemos fazer aqui. Como já vimos antes, alguns comandos HTML não funcionam em um dado navegador, se você reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4.0 e no Netscape Communicator 4.0. Você não reparou nenhuma diferença no uso destes navegadores para nossos exemplos, a questão é que para tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo típico é uso de CELLSPACING e CELLPADDING.
Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronização de seus navegadores. Sendo assim, quando você construir tabelas deve sempre levar em conta em qual navegador você dará preferência para rodar a sua página. Por isso nunca é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação.
