Bruno C. de Paula
Laboratório de Informática
Tabelas
1º Semestre 2010 > PUCPR > BSI
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.
Material extra referente ao assunto
da aula
3
http://www.ptbr.html.net/tutorials/html/lesson10.asp
 http://www.ptbr.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-stylingtables/

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>
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
 Criação
5
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>
05/11/2015
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;
6
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.

7
8
Ponto chave da
aula!
 Não
use tabelas
para layout;
 Tabelas são para
dados tabelados;
 Sobre isso veja esta
apresentação;
05/11/2015
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.
9
10
Exemplo de tabela simples
3
linhas e 2 colunas;
 1 cabeçalho;
1) Definir o contâiner de tabela
(<table>)
 Não
mostra nada!
11
12
2) Definir cada linha (<tr>)
 Cada
<tr> corresponde
a uma linha;
 3 linhas => 3 <tr>;
 Não mostra nada!
3) Definir cada célula (<td> ou
<th>)
13
 Se
for um
cabeçalho: <th>;
 Se
for um
conteúdo normal:
<td>;
 Mostra a tabela.
14
Acessibilidade: determinar escopo do
cabeçalho através do atributo scope
15
05/11/2015
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
Criar uma tabela com 2 linhas e 3
células em cada linha
 Cada
linha é um <tr>;
 O <th> é usado só na 1ª linha;
05/11/2015
18
Acessibilidade: determinar escopo do
cabeçalho através do atributo scope
19
Expandir células por mais de uma
coluna (atributo colspan)
 <td
colspan=“X”>
 X = número de colunas
20
21
Expandir células por mais de uma
linha (atributo rowspan)
 <td
rowpan=“X”>
 X = número de linhas;
22
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.
Criar uma tabela com linhas
agrupadas (siga esta receita)
29
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.





<tfoot> deve
vir antes de
<tbody>
30
CSS: Formatação de grupos de
linhas e tabelas zebradas
31
CSS: Formatação de
grupos de linhas e tabelas
zebradas
32
CSS: Formatação de grupos de linhas
e tabelas zebradas – CSS 3
Não funciona no IE 6, 7 e 8!
Funciona no IE9
33
Você pode “emular” características
do CSS 3 em seu IE via JavaScript
05/11/2015
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
<![endif]-->
34
CSS: Mais de um <tbody> em uma
tabela
35
CSS: Mais de um <tbody> em uma
tabela
36
Criar uma tabela com colunas
agrupadas (siga esta receita)
37
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/stupidta
bles/
 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
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
05/11/2015
48
Links sobre acessibilidade
http://www.serpro.gov.br/acessibilidade/g_tabela.ph
p
 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
