Tabelas Introdução(X)HTML

Professor Jolvani

Aula 21

Tabelas Introdução - (X)HTMLBem vindos a aula de TabelasPensamos na seguinte tabelaBaseado nela construímos um arquivo html

para elaboração da mesma...

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

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>

Tabelas Introdução - (X)HTML

1 – Aplicar atributo border 2 – cellpadding – espaço entre o conteúdo e a borda 3 – cellspacing - espaço entre as células

1

2

3

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.

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

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.

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

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

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

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

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

Próxima Aula: Formulário Controle