Laboratório de Informática Tabelas

Apresentação em tema: "Laboratório de Informática Tabelas"— Transcrição da apresentação:

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

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.

3 Material extra referente ao assunto da aula

4 Tags HTML referenciadas na aula (em Português –site Referenciando)
Criação de contâiner de tabela: <table>; Criação de contâiner de linha: <tr>; Definição de célula: <td>, <th>; Legenda: <caption>; Cabeçalho de tabela: <thead>; Corpo de tabela: <tbody>; Rodapé de tabela: <tfoot>; Agrupamento de colunas: <colgroup>, <col>

5 Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Criação de contâiner de tabela: <table>; Criação de contâiner de linha: <tr>; Definição de célula: <td>, <th>; Legenda: <caption>; Cabeçalho de tabela: <thead>; Corpo de tabela: <tbody>; Rodapé de tabela: <tfoot>; Agrupamento de colunas: <colgroup>, <col>

6 Alguns atributos de tabelas
25/03/2017 scope: Determina o escopo de um cabeçalho (<th scope="">). Útil para acessibilidade; colspan: expande uma célula por mais de uma coluna (<td colspan="X"> ou <th colspan="X">); rowpan: expande uma célula por mais de uma linha (<td rowspan="X" ou <th rowspan="X">); summary: atributo de <table> que indica um sumário não-visual para a tabela;

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

8 Ponto chave da aula! Não use tabelas para layout;
25/03/2017 Ponto chave da aula! Não use tabelas para layout; Tabelas são para dados tabelados; Sobre isso veja esta apresentação; Fonte da imagem: 25/03/2017

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

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

11 1) Definir o contâiner de tabela (<table>)
25/03/2017 Não mostra nada! <table> </table>

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

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

14

15 Acessibilidade: determinar escopo do cabeçalho através do atributo scope
25/03/2017 Útil para navegadores não visuais Deixa a tabela acessível! 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: Alguns links sobre acessibilidade: 25/03/2017

16 4) CSS: Formatar a tabela
25/03/2017 Determinar a borda e a cor de uma célula, linha ou tabela use as propriedades: border-width: largura da borda; border-style: estilo da borda; border-color: cor da borda. Determinar a cor da letra e o fundo: color; background-color; background-image. <style type="text/css"> table { /* determinar a largura, estilo e cor da borda */ border-width: 1px; border-style: solid; border-color: black; } td, th { border-width: 2px; th { /* determinar a cor da letra e a cor do fundo*/ color: white; background-color: gray; </style> <table> <tr> <th>Localização</th> <td>América do Sul</td> </tr> <th>Capital</th> <td>Brasília</td> <th>Idioma</th> <td>Português</td> </table>

17 4) CSS: Formatar a tabela

18 Criar uma tabela com 2 linhas e 3 células em cada linha
25/03/2017 Cada linha é um <tr>; O <th> é usado só na 1ª linha; <style type="text/css"> table { /* determinar a largura, estilo e cor da borda */ border-width: 1px; border-style: solid; border-color: black; } td, th { estilo e cor da borda */ border-width: 2px; th { /* determinar a cor da letra e a cor do fundo */ color: white; background-color: gray; </style> <table> <tr> <th>Localização</th> <th>Capital</th> <th>Idioma</th> </tr> <td>América do Sul</td> <td>Brasília</td> <td>Português</td> </table> 25/03/2017

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

20 Expandir células por mais de uma coluna (atributo colspan)
25/03/2017 <td colspan=“X”> X = número de colunas <td colspan=“X”> X é um número que representa quantas colunas da tabela a célula vai ocupar; Uma célula pode se expandir por várias colunas; Cada valor de colspan elimina o <td> ou <th> à direita

21

22 Expandir células por mais de uma linha (atributo rowspan)
25/03/2017 <td rowpan=“X”> X = número de linhas; X é um número que representa quantas linhas da tabela a célula vai ocupar; Uma célula pode se expandir por vária linhas Cada valor de rowspan elimina o <td> ou <th> abaixo

23 25/03/2017 <table> <tr> <th>Dia</th>
<th>21/3</th> <th>22/3</th> </tr> <th>Manhã</th> <td>Futebol</td> <td rowspan="2">Trabalho</td> <th>Tarde</th> <td>Trabalho</td> <th>Noite</th> <td>Aula</td> </table>

24 Misturar colspan e rowpan
<td rowspan=“x” colspan=“y”>

25 25/03/2017 <table> <tr> <th>Dia</th>
<th>21/3</th> <th>22/3</th> <th>23/3</th> </tr> <th>Manhã</th> <td>Futebol</td> <td rowspan="2" colspan="2">Trabalho</td> <th>Tarde</th> <td>Trabalho</td> <th>Noite</th> <td colspan="3">Aula</td> </table>

26 Sumário X Legenda 25/03/2017 Sumário não é mostrado pelos navegadores visuais (acessibilidade): <table summary=“Texto”> Legenda é mostrada pelos navegadores visuais: <table> <caption>L</caption> ... </table> Sumário é lido pelos navegadores não-visuais: JAWS, etc. Caption Descreve o que é a tabela; É a Legenda da tabela Essa descrição é representada de forma gráfica pelo navegador, ou seja, a legenda é escrita na tela; Observe que o <caption> e o <table summary=“texto”> tem efeitos e objetivos diferentes; IMPORTANTE: só use um <caption> por tabela e sempre abaixo do <table>. OLD: <caption align=“alinhamento”> X pode ser top, bottom, left ou right Sobre sumário:

27

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

29 Criar uma tabela com linhas agrupadas (siga esta receita)
25/03/2017 1) Definir o contâiner de tabela <table>; 2) Definir cada linha <tr>; 3) Definir cada célula <td> ou <th>; 4) Delimitar a legenda; 5) Deliminar as linhas de cabeçalho através de <thead>; 6) Delimitar o rodapé através de <tfoot>; 7) Deliminar as linhas de corpo através de <tbody> 8) CSS: Formatar a tabela. As tags <thead>, <tbody> e <tfoot> não são obrigatórias e servem apenas para a criação de grupos lógicos de células; <thead>: Identifica linhas de cabeçalho; <tbody>: Identifica linhas de corpo, podemos ter mais de um <tbody> por tabela; <tfoot>: Identifica linhas de rodapé.

30 <tfoot> deve vir antes de <tbody>
25/03/2017 <tfoot> deve vir antes de <tbody> <tfoot> deve vir antes do <tbody>!

31 CSS: Formatação de grupos de linhas e tabelas zebradas
25/03/2017 <style type="text/css"> table { /* determinar a largura, estilo e cor da borda */ border-width: 1px; border-style: solid; border-color: black; } td, th { estilo e cor da borda */ border-width: 2px; th { /* determinar a cor da letra e a cor do fundo */ color: white; background-color: gray; thead { font-size: x-large; tfoot { font-size: smaller; tbody { font-family: Verdana; background-color: #ddd; .impar { background-color: #aaa; </style> <table> <caption>Países</caption> <thead> <tr> <th>Localização</th> <th>Capital</th> <th>Idioma</th> </tr> </thead> <tfoot> </tfoot> <tbody> <tr class="impar"> <td>América do Sul</td> <td>Brasília</td> <td>Português</td> <td>Buenos Aires</td> <td>Espanhol</td> <td>Europa</td> <td>Paris</td> <td>Francês</td> <td>Madrid</td> <td colspan="3">...</td> </tbody> </table>

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

33 Não funciona no IE 6, 7 e 8! Funciona no IE9
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
25/03/2017 <!--[if lt IE 9]> <script src=" <![endif]-->

35 CSS: Mais de um <tbody> em uma tabela
25/03/2017 <style type="text/css"> table { /* determinar a largura, estilo e cor da borda */ border-width: 1px; border-style: solid; border-color: black; } td, th { estilo e cor da borda */ border-width: 2px; th { /* determinar a cor da letra e a cor do fundo */ color: white; background-color: gray; thead { /* determinar tamanho da letra */ font-size: x-large; tfoot { font-size: smaller; tbody { /* determinar tipo da letra */ font-family: Verdana; background-color: #ddd; .impar { background-color: #aaa; .america-sul td { color: red; .europa td { color: green; </style> <table> <caption>Países</caption> <thead> <tr> <th>Localização</th> <th>Capital</th> <th>Idioma</th> </tr> </thead> <tfoot> </tfoot> <tbody class="america-sul"> <td>América do Sul</td> <td>Brasília</td> <td>Português</td> <td>Buenos Aires</td> <td>Espanhol</td> </tbody> <tbody class="europa"> <td>Europa</td> <td>Paris</td> <td>Francês</td> <td>Madrid</td> <tbody> <td colspan="3">...</td> </table>

36 CSS: Mais de um <tbody> em uma tabela

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

38 Definição de colunas 25/03/2017 As colunas devem estar definidas dentro de um <colgroup>; Cada coluna é um <col>. <table> <colgroup> <col class="coluna1"/> <col class="coluna2"/> <col class="coluna3"/> <col class="coluna4"/> </colgroup> <caption>Países</caption> <thead> <tr> <th>País</th> <th>Localização</th> <th>Capital</th> <th>Idioma</th> </tr> </thead> <tfoot> </tfoot> <tbody> <td>Brasil</td> <td>América do Sul</td> <td>Brasília</td> <td>Português</td> <td>Argentina</td> <td>Buenos Aires</td> <td>Espanhol</td> <td>França</td> <td>Europa</td> <td>Paris</td> <td>Francês</td> <td>Espanha</td> <td>Madrid</td> </tbody> </table> <style type="text/css"> table { /* determinar a largura, estilo e cor da borda */ border-width: 1px; border-style: solid; border-color: black; } td, th { estilo e cor da borda */ border-width: 2px; th { /* determinar a cor da letra e a cor do fundo */ color: white; background-color: gray; .coluna1 { background: #aaa; .coluna2 { background: #bbb; .coluna3 { background: #ccc; .coluna4 { background: #ddd; </style>

39 Definição de colunas

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

41 Atributo span

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

43 JavaScript 25/03/2017 <style type="text/css"> table, td {
border-width: 1px; border-color: black; border-style: solid; } .marcado { background-color: #ddd; </style> <table> <tr> <th>Nome</th> <th>Telefone</th> </tr> <td>Alberto</td> <td> </td> <td>Bernardo</td> <td> </td> <td>Claudio</td> <td>444444</td> </table> <script type="text/javascript"> function marcarLinha() this.className = "marcado"; // Obtém a segunda <tr> (a primeira é o cabeçalho) document.getElementsByTagName("tr")[1].onclick = marcarLinha; // Obtém a terceira <tr> document.getElementsByTagName("tr")[2].onclick = marcarLinha; // Obtém a quarta <tr> document.getElementsByTagName("tr")[3].onclick = marcarLinha; </script>

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

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

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

47 Links sobre acessibilidade
25/03/2017 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: 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: Alguns links sobre acessibilidade: 25/03/2017

48 Links sobre acessibilidade