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 http://www.pt- br.html.net/tutorials/html/lesson10.asp http://www.pt- br.html.net/tutorials/html/lesson10.asp http://www.pt- br.html.net/tutorials/html/lesson11.asp http://www.pt- br.html.net/tutorials/html/lesson11.asp http://www.w3schools.com/html/html_tables.asp http://dev.opera.com/articles/view/19-html-tables/ http://dev.opera.com/articles/view/33-styling- tables/ http://dev.opera.com/articles/view/33-styling- 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: http://www.plasmadesign.com.br/stupidta bles/ http://www.plasmadesign.com.br/stupidta bles/ O básico sobre acessibilidade de tabelas: http://www.serpro.gov.br/acessibilidade/g _tabela.php http://www.serpro.gov.br/acessibilidade/g _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: http://www.geocities.com/claudiaad/full-checklist.html Recomendações do W3C em Português: http://www.geocities.com/claudiaad/acessibilidade_web.html http://www.henry.eti.br/pagina.php?Acao=D&IdArq=93&Ext=pdf Checkpoint de acessibilidade: http://www.acesso.umic.pcm.gov.pt/curriculo/overint.htm Internet para necessidades especiais: http://www.dhnet.org.br/ciber/textos/acessib.htm Lei brasileira: http://www.acessobrasil.org.br/index.php?itemid=43 10 dicas: http://www.maujor.com/tutorial/acessibilidade/tentest.php

48 48 Links sobre acessibilidade http://www.serpro.gov.br/acessibilidade/g_tabela.ph p http://www.serpro.gov.br/acessibilidade/g_tabela.ph p http://diveintoaccessibility.org/day_20_providing_a_ summary_for_tables.html http://diveintoaccessibility.org/day_20_providing_a_ summary_for_tables.html http://www.usdoj.gov/crt/508/web.htm http://www.maujor.com/w3c/introwac.html http://www.w3.org/WAI/References/QuickTips/qt.br.htm http://www.w3.org/WAI/References/QuickTips/qt.br.htm http://www.laramara.org.br/jaws.htm


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

Apresentações semelhantes


Anúncios Google