1. Tabelas Introdução
(X)HTML
Professor Jolvani
Aula 21

2. Tabelas Introdução - (X)HTML
Bem vindos a aula de Tabelas
 Pensamos na seguinte tabela
 Baseado nela construímos um arquivo html para
elaboração da mesma...

3. Tabelas Introdução - (X)HTML
 Uma tabela é composta por linhas e colunas onde sua interseção
denomina-se células...
 Antigamente usava-se as tabelas para fazer layout das páginas(errado)
 Introduzido conceito de tabless (sem tabelas)
 Dessa forma usamos as tabelas para apresentar dados tabulares...
 Verificamos então que esta tabela é composta por 4 linhas e 2 colunas,
sendo que possui o cabeçalho
 Criamos nossa próxima aula.... Aula16.html

4. Tabelas Introdução - (X)HTML
 Criar tabela usando tag <table> </table>
 As linhas usando tag table row <tr> </tr> como temos 4 linhas 4 <tr>
 Dentro de cada linhas criamos as células table data <td> </td>

5. Tabelas Introdução - (X)HTML
 1 – Aplicar atributo border
1
 2 – cellpadding – espaço entre o conteúdo e a borda
 3 – cellspacing - espaço entre as células
2
3

6. Tabelas Introdução - (X)HTML
 Experimente cellspacing=“1”;
 Alinhamento na tabela... “align=center e align=justify”
 Aplique para os outros
 itens.
 Use o valor left para o
 atributo align e veja o
 resultado.

7. Tabelas Introdução - (X)HTML
 Tratando os cabeçalhos...
 Formatando a <tr> dos cabeçalhos...
 Experimente colocar a cor na tag tr <tr style=“...”>

8. Aula 22 - Tabelas span,th,head,foot
 Na aula anterior construímos a tabela baseada num modelo feita e
excel.
 Criamos um novo arquivo:
 Aula17.html
 Começamos com “esticar” as células horizontalmente (mesclar no
excel) podemos mesclar na horizontal e na vertical.

9. Tabelas span,th,head,foot - (X)HTML
 Criamos uma nova linha com uma nova célula
 Temos dois atributos o colspan para expandir a linha (expandir
horizontalmente) e rowspan para expandir colunas (expandir
verticalmente).
 Temos que indicar o numero de colunas ou linhas iremos expandir...

10. Tabelas span,th,head,foot - (X)HTML
 Expandir verticalmente rowspan... Criando + uma coluna

11. Tabelas span,th,head,foot - (X)HTML
 Removemos nossas expansões e criamos novos linhas em nossa tabela
 Colocando nova linha em dia e treinamento... Ficaria parecido com isso...
Porém eu quero expandir a célula Brasília e Deivys

12. Tabelas span,th,head,foot - (X)HTML
 Porém eu quero expandir a célula Brasília e Deivys. Usamos rowspan para
ocupar as posições necessárias...
2
1

13. Tabelas span,th,head,foot - (X)HTML
 Porém eu quero expandir a célula Brasília e Deivys. Usamos rowspan para
ocupar as posições necessárias...
2
1

14. Próxima Aula: Formulário Controle