Existem vantagens da não utilização das tabelas para criar layout, dentre estes vale destacar: A manutenção facilitada, marcação limpa que facilita o mecanismo de busca,a facilidade para deficientes interpretar os códigos, o layout fica em arquivo central (CSS) separado, menor código e consequentemente o tempo para acesso é reduzido.
A seguir serão demonstrado alguns exemplos de criação de tabelas em HTML.
As tabelas são definidas pela Tag <table> e para as linhas são utilizadas <tr> e celulas <td>. Dentro das Tags podem existir atributos que definem o tamanho da celula, cor, tipo de borda, tamanho da fonte, entre outros.
1. Criando tabela em HTML exemplo:
2. Tabela com diferentes tipos de bordas:
3. Outro exemplo com bordas diferentes:
4. Tabela com cabeçalho:
5. Tabela com uma celula vazia:
6. Em alguns Browsers podem não aparecer a célula vazia, para evitar isso é necessário acrescentar o “ ” para ficar com as bordas visiveis:
7. Tabela sem borda:
8. Tabela com borda grossa e título:
9. Tabelas com celulas maiores que o normal:
10. Elementos dentro de outros:
11. Espaçamento na celula(Cellpadding):
12. Espaçamento entre celulas(Cellspacing) :
13. Adicionando cor e imagem de fundo da tabela:
OBS.: Para a imagem aparecer, é necessário que esteja na mesma pasta que está o código HTML.
14. Adicionando Cor/Imagem ao fundo de uma celula:
15. Alinhando o conteúdo de uma Celula:
16. Atributo Frame: controlando as bordas.
Video sobre Tabelas em HTML
A seguir são apresentados alguns exemplos de atributos de uma Tag utilizado no video:
Border = Largura da borda
Cellpadding="10": espaço entre o conteudo e a borda
cellspacing="1" : indica o espaço entre as celulas.
align="right" (Direita)
align="left" (Esquerda)
align="center" (Centralizado)
align="justify" (Justificado)
Style="background-color:#CCCCCC;" ( Fundo da celula com a cor cinza)
Exemplo de Tabela do Video:
Já neste segundo video são apresentados os atributos Rowspan e Colspan. Quando adicionado o atributo rowspan a celula se expande verticalmente. E para o colspan expande horizontalmente.
Exemplo da tabela do video:
Fontes dos videos:
Nenhum comentário:
Postar um comentário