O documento discute tabelas em HTML, explicando que elas possuem linhas e colunas e são criadas usando tags como <table>, <tr> e <td>. Também cobre como mesclar células usando colspan e rowspan, dividir tabelas em cabeçalho, corpo e rodapé, e formatar tabelas usando atributos como border, cellpadding e cellspacing.

1. HTML - Tabelas

2. O que são tabelas?
• Estrutura com linhas e colunas
• As tabelas em HTML funcionam de uma
forma idêntica a estruturas semelhantes
que existem nos processadores de texto.
• Tabelas são tabelas, ora bolas!
facebook.com/rangeljavier

3. Principal Tag
• Para criar uma tabela com HTML existe
uma tag especifica para isto.
<table>
</table>
facebook.com/rangeljavier

4. Linhas e Colunas
• Para criar uma linha da tabela, utiliza-se a
tag: <tr>
• Para criar uma coluna da tabela, usa-se a
tag: <td>
• Pratica!
facebook.com/rangeljavier

5. Mesclar
• Para mesclarmos colunas ou linhas,
existem dois atributos responsável por
esta ação. O colspan (mesclar colunas) e
o rowspan (mesclar linhas).
• OBS: Estes atributos só funcionarão na
tag <td>
facebook.com/rangeljavier

6. Colspan: Exemplo
<td colspan=“n”></td>
<td colspan=“2”>Linha com duas colunas
mescladas</td>
facebook.com/rangeljavier

7. Rowspan: Exemplo
<td rowspan=“n”></td>
<td rowspan=“2”>Linhas mesclada</td>
facebook.com/rangeljavier

8. Divisão da Tabela
• As tabelas podem ser divididas
organizadamente em cabeçalho, corpo e
rodapé.
• Existem tags da tabela para auxiliarmos
esta divisão.
facebook.com/rangeljavier

9. Exemplo
CURSO DISCIPLINA PROFESSOR
Enfermagem Anatomia I Ana Cleide
Serviço Social Teoria do Serviço Social Mariana Cruz
Ciências da Computação Programação V Rangel Xavier
facebook.com/rangeljavier

10. Divisão da Tabela
• <thead> cria o cabeçalho
– Para funcionamento corretamente, utiliza-se
ainda uma tag <th>Disciplina</th> para cada
item de cabeçalho.
• <tbody> cria o corpo
• <tfoot> para criar rodapés da tabelas
(quando for necessário)
facebook.com/rangeljavier

11. Prática
facebook.com/rangeljavier

12. Atributos da Tabela
• Além dos atributos específicos de cada
célula ou linha, as tabelas podem ser
adicionalmente formatadas a partir dos
atributos que nos oferece a própria
etiqueta <table>.
facebook.com/rangeljavier

13. Atributos da Tabela
• Praticar em cada um dos itens.
• align: Alinha horizontalmente a tabela em
relação ao seu entorno.
• background: Permite-nos colocar um
fundo para a tabela desde um link a uma
imagem.
facebook.com/rangeljavier

14. Atributos da Tabela
• bgcolor: Dá cor de fundo à tabela.
• border: Define o número de pixels da
borda principal.
• bordercolor: Define a cor da borda.
• cellpadding: Define o espaço entre as
bordas da célula e o conteúdo da mesma.
(em pixels)
facebook.com/rangeljavier

15. Atributos da Tabela
• cellspacing: Define o espaço entre as
bordas (em pixels).
• height: Define a altura da tabela em
pixels ou porcentagem.
• width: Define a largura da tabela em
pixels ou porcentagem.
facebook.com/rangeljavier

16. Cellpadding e Cellspacing
facebook.com/rangeljavier
cellspacingcellpadding

17. Prática 01
facebook.com/rangeljavier
Lista Ordenada Lista Desordenada
1. Rangel
2. Maria
3. Francisco
4. Bartolomeu
5. José
6. João
7. George
8. Lennon
9. Paul
10. Ringo
• Carlos
• Carol
• Mariana
• John
• McCartney
• Star
• Harisson
• Michael
• Jackson
• Five

18. Prática 02
Esta imagem está dentro de duas
linhas mescladas?
Cabeçalho
Este texto é apenas para complicar
mais ainda as coisas.
facebook.com/rangeljavier

19. Extra
• Cores em Hexadecimal
• Pesquisa sobre diferença entre RGB e
Hexadecimal
• Não é o foco da disciplina
facebook.com/rangeljavier

20. facebook.com/rangeljavier

21. Links Interessantes
• http://www.mundoblogger.com.br/2013/05/
entendendo-a-relacao-entre-cores-rgb-e-
hexadecimais.html
• http://www.color-hex.com/
facebook.com/rangeljavier