Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :46 1 TABELAS A TAG é utilizada para apresentação de dados no formato de tabelas (apresentação dos dados no formato de linhas e colunas). Sua estrutura e seu conteúdo devem estar entre as TAGs e. TÍTULO DA TABELA O elemento, TAG, especifica o título da tabela. Exemplo: Notas finais da disciplina de Des. WEB SITES TABLE HEADING (TAG TH) O elemento, TAG, especifica a(s) célula(s) de cabeçalho da tabela. Estas células aparecem em negrito, formando um destaque diferente das demais. Uma determinada linha ou coluna pode ter mais de um elemento TH, ou não conter nenhum, isto é, pode ter ou não célula(s) em destaque. Exemplo: texto em destaque

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :46 2 END OF TABLE ROW (Elemento TR) A TAG indica o final de uma linha na tabela. Cada linha da tabela pode conter várias células, e portanto, é necessário que se faça uso da marcação que indique exatamente o ponto de quebra de uma linha e início de outra. Toda linha deve terminar com um, com exceção da última linha, pois a própria marcação de final de tabela torna implícito o final da linha. TABLE DATA (Elemento TD) A TAG especifica a célula de dados de uma tabela. Com ela é possível construir coluna dentro das linhas indicadas por. Estas células possuem fonte normal e alinhamento a esquerda pois não se tratam de cabeçalhos. Exemplo: Célula de Dados BORDER (Atributo de TABLE) Este atributo é opcional e pode estabelecer um maior destaque a tabela apresentando uma borda mais espessa ou não. BORDER=0, forma uma tabela sem borda e ao aumentar o valor atribuído a borda apresenta maior espessura.

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :46 3 Vamos testar os atributos de tabelas descritos até o momento, gravando os comandos abaixo como exerc18.htm, no bloco de notas, depois carregue a página em um navegador. Uso de Tabelas Primeira Tabela - Título da Tabela Usando CAPTION – Borda=5 Célula 1 Cabecalho Coluna 1 Cabecalho Coluna 2 Linha 2 Coluna 1 Linha 2 Coluna 2

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :46 4 ALIGN (Atributo) Este atributo pode ser utilizado em TH, TD ou TR e controla o alinhamento do texto dentro de uma célula em relação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda a linha da tabela. Exemplo: Alinhamento da linha Alinhamento da célula Alinhamento da célula de cabecalho alinhamento, corresponde a RIGHT, LEFT ou CENTER. Uso o bloco de notas para digitar os comandos abaixo e grave como exerc19.htm, em seguida execute a home-page em um navegador de sua preferência. Uso de Tabelas Continua ......

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :46 5 Segunda Tabela – Testa Alinhamento Primeira Célula Segunda Célula Terceira Célula Centro Centro Esquerda Direita

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :466 VALIGN (atributo) Este atributo define o alinhamento vertical, isto é, o alinhamento entre as bordas superior e inferior da célula (linha ou coluna). Sua aplicação é semelhante ao ALIGN, podendo ser usado nas TAGs TR, TD e TH. Os valores TOP, MIDDLE e BOTTOM realizam o alinhamento na parte superior, central e inferior, respectivamente. Formato: Alinhamento vertical da linha Alinhamento do texto na célula Alinhamento do texto na célula de cabeçalho No exercício a seguir (EXERC20.HTML), vamos testar os atributos vistos até o momento sobre TABELAS 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :467 VALIGN (atributo) Este atributo define o alinhamento vertical, isto é, o alinhamento entre as bordas superior e inferior da célula (linha ou coluna). Sua aplicação é semelhante ao ALIGN, podendo ser usado nas TAGs TR, TD e TH. Os valores TOP, MIDDLE e BOTTOM realizam o alinhamento na parte superior, central e inferior, respectivamente. Formato: Alinhamento vertical da linha Alinhamento do texto na célula Alinhamento do texto na célula de cabeçalho No exercício a seguir (EXERC20.HTML), vamos testar os atributos vistos até o momento sobre TABELAS 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :468 Uso de Tabelas Terceira Tabela – Testa alinhamentos Horizontal e Vertical Primeira célula Segunda célula Terceira célula Centro e Meio Meio Em Cima Em Baixo continua... 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :469 Centro e Meio Esquerda e Acima - Topo Direita e Abaixo WIDTH (atributo) As tabelas comuns ajustam seu tamanho de acordo com o conteúdo contido na célula. Para alterar a largura de uma célula, basta utilizar o atributo WIDTH. A largura pode ser dada em pixels ou porcentagem. Formato: WIDTH=valor Exemplos:

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4610 A B  60% C D E  60% F Neste exemplo a tabela ocupa 50% do espaço disponível da janela do BROWSER, com uma coluna que ocupará 60% do espaço disponível da TABELA. No próximo exemplo, o controle de largura da tabela está limitado a dimensão do conteúdo:

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4611 A B Largura de 1% C D E Largura de 1% F CELLPADDING CELLSPACING São dois atributos que controlam o espaçamento em tabelas: CELLPADDING – espaço entre o texto e a borda das células CELLSPACING – espaço entre as células

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4612 Espaçamento entre o texto e a borda. Espaçamento entre células Espaçamento entre texto e bordas, e espaço entre células. Vamos testar os atributos de espaçamento descritos, digitando os dados abaixo no bloco de notas e gravando como EXERC21.HTM. Uso de Tabelas Primeiro vamos exemplificar o uso do atributo WIDTH juntamente com os 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4613 alinhamentos vistos anteriormente. Observe o resultado e compare com o exercício anteriormente. Largura e Alinhamento Primeira célula Segunda célula Terceira célula Centro e Meio Meio Em Cima Em Baixo Centro e Meio continua... 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4614 Esquerda e Acima Direita e Abaixo Agora vamos ver um exemplo usando os atributos de espaçamento. Sem Espaçamento Primeira célula Segunda célula Terceira célula Centro e Meio Esquerda e Acima Direita e Abaixo Com Espaçamento – CELLSPACING=20 continua... 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4615 Primeira célula Segunda célula Terceira célula Centro e Meio Esquerda e Acima Direita e Abaixo Com Espaçamento – CELLSPACING=20 CELLPADDING=20 Primeira célula Segunda célula Terceira célula Centro e Meio Esquerda e Acima Direita e Abaixo

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4616 Extensões nos atributos das TABELAS As diversas extensões encontradas nas tabelas, possibilitam alguns efeitos interessantes nas páginas. Cor de fundo Cor da Borda Imagem de fundo Neste exercício, vamos testar os atributos de cor e imagem nas tabelas. Utilize o bloco de notas e grave os comandos abaixo como EXERC22.HTM e carregue em seu navegador.

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4617 Uso de Tabelas Tabelas – Cores e Imagens Tabela com cor de Fundo Primeira célula Segunda célula Terceira célula Cor diferente nas células Primeira célula Segunda célula Terceira célula Continua... 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4618 Tabela com cor de Borda Primeira célula Segunda célula Terceira célula Tabela com Imagem de Fundo Primeira célula Segunda célula Terceira célula Atributos COLSPAN e ROWSPAN Esses atributos são importantes na TAG TABLE, pois permite remodelar a disposição das células na tabela. O COLSPAN determina quantas colunas serão ocupadas, isto é, fará a mesclagem da quantidade de colunas indicada.... 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4619 Por exemplo, o espaço de duas ou mais colunas, será agrupado em uma única célula. O atributo ROWSPAN, tem função semelhante, agrupando o número de linhas informado. Exemplo COLSPAN: Exemplo de COLSPAN Célula 1 Célula 2

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4620 Exemplo ROWSPAN: Exemplo de ROWSPAN Célula 1 Célula 2 Vamos verificar os exemplos acima, digitando os comandos abaixo no bloco de notas e salvando como EXERC23.HTM e depois carregue a home no seu navegador. Uso de Tabelas Tabelas – COLSPAN e ROWSPAN COLSPAN Continua... 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4621 Exemplo de COLSPAN Célula 1 Célula 2 ROWSPAN Exemplo de ROWSPAN Célula 1 Célula 2

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4622 Usando Tabelas como Moldura Pode-se usar as tabelas como moldura para algumas figuras. Para tanto, basta iniciar a tabelas com um valor definido ao atributo BORDER. Exemplo: Vamos verificar o que foi explicado acima. Grave os comando abaixo no bloco de notas como EXERC24.HTM e carregue no seu browse. Uso de Tabelas continua... 

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4623 Tabelas como Molduras Utilizando os comandos vistos até o momento, sobre tabelas (cores, imagens, cor de fundo, cor das bordas, etc) desenvolva uma página HTML que apresente os conteúdos abaixo. Atenção para o alinhamento. Grave no bloco de notas como EXERC25.HTM.

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4624 Notas dos Alunos Imagem com LOGO da ETEC Curso Técnico em Informática 3º Ciclo B - Tarde Disciplinas GSO3PC2P IA PETICATCC Alunos Ananda7,00 9,007,7510,008,00 Beatriz8,007,008,00 10,008,75 Felipe7,506,007,00 10,008,25 Joao6,758,00 7,7510,008,00 Mariana10,007,7510,007,7510,008,50 Mateus9,008,0010,005,0010,009,00 Osiris5,756,007,004,7510,006,75 Pedro5,756,007,005,0010,006,00 Renata7,004,009,758,0010,008,75 Ricardo8,509,7510,008,7510,00

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :4625 Utilizando os comandos vistos até o momento, sobre tabelas (cores, imagens, cor de fundo, cor das bordas, etc) desenvolva uma página HTML que apresente os conteúdos abaixo. Atenção para o alinhamento. Grave no bloco de notas como EXERC26.HTM. Jogo da Velha Utilizando os comandos vistos até o momento, sobre tabelas (cores, imagens, cor de fundo, cor das bordas, etc) desenvolva uma página HTML que apresente os conteúdos abaixo. Atenção para o alinhamento. Grave no bloco de notas como EXERC27.HTM. Jogo Resta 1 Utilizando os comandos vistos até o momento, sobre tabelas (cores, imagens, cor de fundo, cor das bordas, etc) desenvolva uma página HTML que apresente os conteúdos abaixo. Atenção para o alinhamento. Grave no bloco de notas como EXERC28.HTM. Album de face dos alunos, com a foto e o nome correspondente.