Laboratório de InformáticaTabelas

1º Semestre 2010 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

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 http://www.pt-br.html.net/tutorials/html/lesson

10.asp http://www.pt-br.html.net/tutorials/html/lesson

11.asp http://www.w3schools.com/html/html_tables.a

sp http://dev.opera.com/articles/view/19-html-tab

les/ http://dev.opera.com/articles/view/33-styling-t

ables/

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>

Alguns atributos de tabelas

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;

611/04/23

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

11/04/23

Ponto chave da aula!

Não use tabelas para layout;

Tabelas são para dados tabelados;

Sobre isso veja esta apresentação;

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>)

Não mostra nada!

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

11/04/23

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

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-style: estilo da borda;border-color: cor da borda.

Determinar a cor da letra e o fundo:color;background-color; background-image.

17

4) CSS: Formatar a tabela

18

11/04/23

Criar uma tabela com 2 linhas e 3 células em cada linhaCada linha é um <tr>;O <th> é usado só na 1ª linha;

19

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

20

Expandir células por mais de uma coluna (atributo colspan)<td colspan=“X”>X = número de colunas

21

22

Expandir células por mais de uma linha (atributo rowspan)<td rowpan=“X”>X = número de linhas;

23

24

Misturar colspan e rowpan

<td rowspan=“x” colspan=“y”>

25

26

Sumário X Legenda

Sumário não é mostrado pelos navegadores visuais (acessibilidade):<table

summary=“Texto”>Legenda é mostrada pelos

navegadores visuais:<table>

• <caption>L</caption>• ...

</table>

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)

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.

30

<tfoot> deve vir antes de <tbody>

31

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

32

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

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

Você pode “emular” características do CSS 3 em seu IE via JavaScript

3411/04/23

<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script><![endif]-->

35

CSS: Mais de um <tbody> em uma tabela

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

As colunas devem estar definidas dentro de um <colgroup>;

Cada coluna é um <col>.

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

44

JavaScript

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

45

Referências complementares

Porque utilizar tabelas para layout é estupidez:http://www.plasmadesign.com.br/

stupidtables/O básico sobre acessibilidade de

tabelas:http://www.serpro.gov.br/

acessibilidade/g_tabela.php

Material Extra fora do assunto da aula....

Links sobre acessibilidade...

47

11/04/23

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

Links sobre acessibilidade

http://www.serpro.gov.br/acessibilidade/g_tabela.php

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.laramara.org.br/jaws.htm