Implementando e manipulando Tabelas

Transcrição

1 Implementando e manipulando Tabelas Aplicações para Web I 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 1

2 Tabelas As tags utilizadas para a criação de tabelas A utilização de tabelas permite ao programador WEB direcionar melhor as informações de seu site. Muitos programadores experientes fazem uso desse simples recurso em html para elaborar uma página mais apresentável e melhor organizada. Com esse recurso pode-se agora colocar imagens e texto um dos lado do outro Posso também montar um menu vertical ou horizontalcom espaçamento... 2

3 A tag <table> Para se criar uma tabela em uma página HTML é preciso fazer uso das tags <table>...</table> Só funcionará caso a formatação da tabela esteja dentro das tags acima apresentadas A tag <table> também tem atributos de formatação Os atributos utilizados por uma tabela têm por objetivo configurar seu tamanho, a largura de cada coluna, o espaço entre o texto e a margem da borda, o espaço entre textos... 3

4 Atributos de formatação da tag <table> BORDER :: indica a grossura da borda utilizada pela tabela. Essa grossura é dada em um valor inteiro WIDTH :: dimensão da tabela na página. Esse atributo é dado em porcentagem ALIGN :: localização da tabela na página (left, right ou center) CELLPADDING :: formata o espaço entre o conteúdo de uma célula e sua borda. Esse atributo é dado por valores inteiros CELLSPACING :: formata o espaço entre as células de uma linha. Este atributo é dado por valores inteiros e tem por objetivo distanciar as colunas da tabela. 4

5 Uma tabela é formada por sub tags São as sub tags que dão o formado de quantas colunas e quantas linhas a tabela deve ter como também seu nome Tags disponíveis: <CAPTION>... </CAPTION> :: Utilizada para nomear uma tabela como as tabelas de um livro <TH>... <TH> :: recurso utilizado para dar destaque a uma determinada célula <TD>... </TD> :: especifica a célula de dados (coluna) de uma tabela e seu conteúdo aparece em destaque <TR>... </TR> :: representa uma linha na tabela, a qual pode conter várias tags <TD>... </TD> 5

6 Exemplo 6

7 Formatando as células Para formatar o conteúdo de cada célula, pode fazer uso dos recursos: ALIGN :: manipula a posição do conteúdo da célula. Este atributo pode ser aplicado nas tags <TH>, <TR> e <TD> VALIGN :: Define a posição do texto com relação as bordas inferiores e superiores. Pode ser utilizada com as tags <TH> e <TD> com um dos atributos: TOP, MIDDLE ou BOTTOM OBS:: No texto da célula pode-se fazer uso das tags já apresentadas em aulas anteriores 7

8 Formatando linhas e colunas Muitas vezes nos deparamos com tabelas que uma linha deve ser criada com mais de uma coluna ou mais de uma linha consecutiva. Formatação das tags <TH> ou <TD> ROWSPAN :: define quantas linhas uma célula pegará da tabela ROWSPAN Produto Nome Quantidade Pão 200 COLSPAN :: define quantas colunas uma célula pegará da tabela Alunos por turma COLSPAN Nome Fulano Turma 2º B 8

9 Outras formatações para células Há outros recursos para a configuração das células de uma <table>... </table> Pode-se configurar a largura utilizando nas tags <TD> ou <TH> o parâmetro WIDTH com a porcentagem da largura necessária É possível também configurar a cor de uma célula específica utilizando o BGCOLOR junto as tags <TR>, <TD> ou <TH> 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 9

10 Exemplo 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 10

11 Exercício Refaça o exercício da tabela de preços, mas agora utilizando tabela para criar os kits e deixa-los mais apresentáveis ao leitor. Utilize o máximo de recursos que puder para deixar a página o mais apresentável possível. Dica 1:: Crie uma tabela com uma única célula para armazenar o site todo; Dica 2:: Coloque um fundo no corpo do site mas deixe a célula branca. Dica 3:: Faça uma jogada com as cores na própria tabela de preços para melhor identificar cada produto 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 11

12 Trabalho Com os recursos até agora apresentados, faça um sistema de e-commerce estático para algum segmento comercial ou pessoal de venda de produtos. Este sistema deve ter uma tela de entrada com a apresentação da empresa, uma tela para apresentação dos produtos, uma tela fale conosco com o contato e utilizando o mailto É desejável que cada produto tenha um link chamado leia mais... E nesse link tenha um manual de apresentação mais detalhada Valor: 3 pontos Cabeçalho com o logo e o nome M E N U Conteúdo exigido!!! Lembre-se de utilizar esse padrão para todas as subpáginas também e faça uso dos mais diversos recursos apresentados em sala 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 12