Aula 21 e 22 tabelas introdução th head foot

173 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
173
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 21 e 22 tabelas introdução th head foot

  1. 1. Tabelas Introdução (X)HTML Professor Jolvani Aula 21
  2. 2. Tabelas Introdução - (X)HTML Bem vindos a aula de Tabelas  Pensamos na seguinte tabela  Baseado nela construímos um arquivo html para elaboração da mesma...
  3. 3. Tabelas Introdução - (X)HTML  Uma tabela é composta por linhas e colunas onde sua interseção denomina-se células...  Antigamente usava-se as tabelas para fazer layout das páginas(errado)  Introduzido conceito de tabless (sem tabelas)  Dessa forma usamos as tabelas para apresentar dados tabulares...  Verificamos então que esta tabela é composta por 4 linhas e 2 colunas, sendo que possui o cabeçalho  Criamos nossa próxima aula.... Aula16.html
  4. 4. Tabelas Introdução - (X)HTML  Criar tabela usando tag <table> </table>  As linhas usando tag table row <tr> </tr> como temos 4 linhas 4 <tr>  Dentro de cada linhas criamos as células table data <td> </td>
  5. 5. Tabelas Introdução - (X)HTML  1 – Aplicar atributo border 1  2 – cellpadding – espaço entre o conteúdo e a borda  3 – cellspacing - espaço entre as células 2 3
  6. 6. Tabelas Introdução - (X)HTML  Experimente cellspacing=“1”;  Alinhamento na tabela... “align=center e align=justify”  Aplique para os outros  itens.  Use o valor left para o  atributo align e veja o  resultado.
  7. 7. Tabelas Introdução - (X)HTML  Tratando os cabeçalhos...  Formatando a <tr> dos cabeçalhos...  Experimente colocar a cor na tag tr <tr style=“...”>
  8. 8. Aula 22 - Tabelas span,th,head,foot  Na aula anterior construímos a tabela baseada num modelo feita e excel.  Criamos um novo arquivo:  Aula17.html  Começamos com “esticar” as células horizontalmente (mesclar no excel) podemos mesclar na horizontal e na vertical.
  9. 9. Tabelas span,th,head,foot - (X)HTML  Criamos uma nova linha com uma nova célula  Temos dois atributos o colspan para expandir a linha (expandir horizontalmente) e rowspan para expandir colunas (expandir verticalmente).  Temos que indicar o numero de colunas ou linhas iremos expandir...
  10. 10. Tabelas span,th,head,foot - (X)HTML  Expandir verticalmente rowspan... Criando + uma coluna
  11. 11. Tabelas span,th,head,foot - (X)HTML  Removemos nossas expansões e criamos novos linhas em nossa tabela  Colocando nova linha em dia e treinamento... Ficaria parecido com isso... Porém eu quero expandir a célula Brasília e Deivys
  12. 12. Tabelas span,th,head,foot - (X)HTML  Porém eu quero expandir a célula Brasília e Deivys. Usamos rowspan para ocupar as posições necessárias... 2 1
  13. 13. Tabelas span,th,head,foot - (X)HTML  Porém eu quero expandir a célula Brasília e Deivys. Usamos rowspan para ocupar as posições necessárias... 2 1
  14. 14. Próxima Aula: Formulário Controle

×