Tabelas Introduo

(X)HTML
Professor Jolvani
Aula 21

Tabelas Introduo - (X)HTML

Bem

vindos a aula de Tabelas

Pensamos
Baseado

na seguinte tabela

nela construmos um arquivo html para

elaborao da mesma...

Tabelas Introduo - (X)HTML

Uma tabela composta por linhas e colunas onde sua interseo

denomina-se clulas...

Antigamente usava-se as tabelas para fazer layout das pginas(errado)

Introduzido conceito de tabless (sem tabelas)

Dessa forma usamos as tabelas para apresentar dados tabulares...

Verificamos ento que esta tabela composta por 4 linhas e 2 colunas,

sendo que possui o cabealho

Criamos nossa prxima aula.... Aula16.html

Tabelas Introduo - (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 clulas table data <td> </td>

Tabelas Introduo - (X)HTML

2
1

1 Aplicar atributo border

2 cellpadding espao entre o contedo e a borda

3 cellspacing - espao entre as clulas

Tabelas Introduo - (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.

Tabelas Introduo - (X)HTML

Tratando os cabealhos...

Formatando a <tr> dos cabealhos...

Experimente colocar a cor na tag tr <tr style=...>

Aula 22 - Tabelas span,th,head,foot

Na aula anterior construmos a tabela baseada num modelo feita e

excel.

Criamos um novo arquivo:

Aula17.html

Comeamos com esticar as clulas horizontalmente (mesclar no

excel) podemos mesclar na horizontal e na vertical.

Tabelas span,th,head,foot - (X)HTML

Criamos uma nova linha com uma nova clula

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...

Tabelas span,th,head,foot - (X)HTML

Expandir verticalmente rowspan... Criando + uma coluna

Tabelas span,th,head,foot - (X)HTML

Removemos nossas expanses e criamos novos linhas em nossa tabela

Colocando nova linha em dia e treinamento... Ficaria parecido com isso...

Porm

eu quero expandir a clula Braslia e Deivys

Tabelas span,th,head,foot - (X)HTML

Porm eu quero expandir a clula Braslia e Deivys. Usamos rowspan para

ocupar as posies necessrias...

Tabelas span,th,head,foot - (X)HTML

Porm eu quero expandir a clula Braslia e Deivys. Usamos rowspan para

ocupar as posies necessrias...

http://warau.nied.unicamp.br/warauv2/?q=node/31

Prxima Aula: Formulrio Controle