A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Laboratório de Informática Tabelas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.

Apresentações semelhantes


Apresentação em tema: "Laboratório de Informática Tabelas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática Tabelas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

2 Resumo da aula Na aula hoje, vamos aprender como criar tabelas em HTML. Tabelas são listas de informações em formato tabelado, organizadas em células ordenadas em linhas e células; São um dos elementos mais usados pelo programador web; Tabelas devem ser acessíveis! Principalmente se você estiver desenvolvendo para o governo ou internacionalmente.acessíveis

3 3 Material extra referente ao assunto da aula br.html.net/tutorials/html/lesson10.asp br.html.net/tutorials/html/lesson10.asp br.html.net/tutorials/html/lesson11.asp br.html.net/tutorials/html/lesson11.asp tables/ tables/

4 4 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Criação de contâiner de tabela: ; Criação de contâiner de linha: ; Definição de célula:, ; Legenda: ; Cabeçalho de tabela: ; Corpo de tabela: ; Rodapé de tabela: ; Agrupamento de colunas:,

5 5 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Criação de contâiner de tabela: ; Criação de contâiner de linha: ; Definição de célula:, ; Legenda: ; Cabeçalho de tabela: ; Corpo de tabela: ; Rodapé de tabela: ; Agrupamento de colunas:,

6 Alguns atributos de tabelas scope: Determina o escopo de um cabeçalho ( ). Útil para acessibilidade; scope colspan: expande uma célula por mais de uma coluna ( ou ); colspan rowpan: expande uma célula por mais de uma linha ( ); rowpan summary: atributo de que indica um sumário não-visual para a tabela; summary 6 13/1/2014

7 7 Propriedades CSS referenciadas na aula (em Inglês –site SitePoint)SitePoint Borda da célula ou linha: border-width: largura da borda; border-width border-style: estilo da borda; border-style border-color: cor da borda. border-color Posicionamento da legenda: caption-side;caption-side Determinar a cor da letra e o fundo: color:cor do elemento; color background-color: cor de fundo; background-color background-image: imagem de fundo. background-image

8 8 13/1/2014 Ponto chave da aula! Não use tabelas para layout; Tabelas são para dados tabelados; Sobre isso veja esta apresentação; Sobre isso veja esta apresentação;

9 9 Criar uma tabela simples (siga esta receita) 1) Definir o contâiner de tabela ; 2) Definir cada linha ; 3) Definir cada célula ou ; 3.1) Opcional Acessibilidade: Definir escopo. 4) CSS: Formatar a tabela.

10 10 Exemplo de tabela simples 3 linhas e 2 colunas; 1 cabeçalho;

11 11 1) Definir o contâiner de tabela ( ) Não mostra nada!

12 12 2) Definir cada linha ( ) Cada corresponde a uma linha; 3 linhas => 3 ; Não mostra nada!

13 13 3) Definir cada célula ( ou ) Se for um cabeçalho: ; Se for um conteúdo normal: ; Mostra a tabela.

14 14

15 15 13/1/2014 Acessibilidade: determinar escopo do cabeçalho através do atributo scopeatributo scope

16 16 4) CSS: Formatar a tabela Determinar a borda e a cor de uma célula, linha ou tabela use as propriedades: border-width: largura da borda; border-width border-style: estilo da borda; border-style border-color: cor da borda. border-color Determinar a cor da letra e o fundo: color; color background-color; background-color background-image. background-image

17 17 4) CSS: Formatar a tabela

18 18 13/1/2014 Criar uma tabela com 2 linhas e 3 células em cada linha Cada linha é um ; O é usado só na 1ª linha;

19 19 Acessibilidade: determinar escopo do cabeçalho através do atributo scopeatributo scope

20 20 Expandir células por mais de uma coluna (atributo colspan)atributo colspan X = número de colunas

21 21

22 22 Expandir células por mais de uma linha (atributo rowspan)rowspan X = número de linhas;

23 23

24 24 Misturar colspan e rowpan

25 25

26 26 Sumário Sumário X LegendaLegenda Sumário não é mostrado pelos navegadores visuais (acessibilidade): Legenda é mostrada pelos navegadores visuais: L...

27 27

28 28 CSS: Posicionamento da legenda Propriedade CSS: caption- side;caption- side Não funciona no IE6-7.

29 29 Criar uma tabela com linhas agrupadas (siga esta receita) 1) Definir o contâiner de tabela ; 2) Definir cada linha ; 3) Definir cada célula ou ; 4) Delimitar a legenda; 5) Deliminar as linhas de cabeçalho através de ; 6) Delimitar o rodapé através de ; 7) Deliminar as linhas de corpo através de 8) CSS: Formatar a tabela.

30 30 deve vir antes de

31 31 CSS: Formatação de grupos de linhas e tabelas zebradas

32 32 CSS: Formatação de grupos de linhas e tabelas zebradas

33 33 CSS: Formatação de grupos de linhas e tabelas zebradas – CSS 3 Não funciona no IE 6, 7 e 8! Funciona no IE9

34 Você pode emular características do CSS 3 em seu IE via JavaScript 34 13/1/2014

35 35 CSS: Mais de um em uma tabela

36 36 CSS: Mais de um em uma tabela

37 37 Criar uma tabela com colunas agrupadas (siga esta receita) 1) Definir o contâiner de tabela ; 2) Definir as colunas via e ; 3) Definir cada linha ; 4) Definir cada célula ou ; 5) Delimitar a legenda; 6) Deliminar as linhas de cabeçalho através de ; 7) Delimitar o rodapé através de ; 8) Deliminar as linhas de corpo através de ; 9) CSS: Formatar a tabela.

38 38 Definição de colunas As colunas devem estar definidas dentro de um ; Cada coluna é um.

39 39 Definição de colunas

40 40 Atributo span O atributo span determina o número de colunas de validade de um ;atributo span

41 41 Atributo span

42 42 JavaScript Marcar uma linha ao clicar na linha, ou seja, ao clicar em um, a linha deve mudar de cor.

43 43 JavaScript

44 44 JavaScript document.getElementsByTagName(tr)[1] procura a segunda tr dentro do documento.

45 45 Referências complementares Porque utilizar tabelas para layout é estupidez: bles/ bles/ O básico sobre acessibilidade de tabelas: _tabela.php _tabela.php

46 Material Extra fora do assunto da aula.... Links sobre acessibilidade...

47 47 13/1/2014 Links sobre acessibilidade Tabela de verificação do W3C em Português: Recomendações do W3C em Português: Checkpoint de acessibilidade: Internet para necessidades especiais: Lei brasileira: 10 dicas:

48 48 Links sobre acessibilidade p p summary_for_tables.html summary_for_tables.html


Carregar ppt "Laboratório de Informática Tabelas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."

Apresentações semelhantes


Anúncios Google