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