Aula4-HTMLtabelas

Prévia do material em texto

Tecnologia Web I
Tabelas
Tabelas: table
Suponha que você esteja desenvolvendo o site de 
uma empresa e precisa apresentar alguns 
relatórios em páginas HTML. Considere que os 
dados desses relatórios são obtidos de planilhas 
eletrônicas. 
Daí surge a necessidade de definir dados de 
forma tabular em HTML. Para resolver esse 
problema, podemos utilizar a tag table do HTML.
tabela1.html
Tabelas: tr, th e td
Perceba que a tag table não é utilizada sozinha. Ela 
necessita de pelo menos um ou mais elementos tr
que, por sua vez, necessitam de pelo menos um ou 
mais elementos th ou td. 
O que significam essas tags?
• tr - define uma linha da tabela
• th - define uma célula de cabeçalho
• td - define uma célula
tabela2.html
Tabelas: thead, tfoot e tbody
Além disso, existem mais algumas tags: thead, 
tfoot e tbody, que ajudam a estruturar a tabela.
O que significam essas tags?
• thead - define o cabeçalho da tabela
• tfoot - define o rodapé da tabela
• tbody - define o corpo da tabela
Tabelas: colspan e rowspan
Outros dois atributos importantes para a construção 
de tabelas são colspan e rowspan que podem ser 
aplicados nos elementos td e th.
Como podemos observar nos exemplos dados, o 
atributo colspan faz com que a célula ignore o 
número de colunas definidas em seu valor. 
Analogamente, o atributo rowspan faz o mesmo, 
porém com linhas.
Tabelas: colgroup
Podemos ainda definir um grupo 
para determinada formatação.
No exemplo ao lado, através da tag
col e do atributo span é possível 
definir um fundo vermelho para as 
duas primeiras colunas, e amarelo 
para a terceira.
Tabelas: caption e summary
É possível adicionar a tag caption
para termos um título da tabela.
O atributo summary é destinado as 
tecnologias assistivas, ou seja, à 
acessibilidade.
Tabelas: Exercício
Já acessou sua grade de horários no TIA? 
Ela é composta por uma tabela que usa a maior parte das tags que vimos até agora. 
• Reproduza sua grade de horários desse semestre, em formato de tabela. 
Tabelas: Referências
• http://www.w3schools.com/html/html_tables.asp
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
http://www.w3schools.com/html/html_tables.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table