Laboratório de Informática Tabelas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula
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