Hélio Oliveira “Gandhi” Ferrari

gandhiferrari@gmail.com

MSN: gandhiferrari@hotmail.com
Orkut: Gandhi Ferrari
Facebook: www.facebook.com/gandhiferrari
Twitter: @gandhiferrari
Blog: gandhiferrari.blogspot.com
Skype: gandhiferrari
Podcast (em construção): gandhiferrari.mypodcast.com
 Trabalhando com tabelas
• Criar uma pasta imagens
• Crie um arquivo html no bloco de notas e batize-
o como index.html
• Crie um arquivo html no bloco de notas e batize-
o como pag1.html
• Em index.html:
– Colocar Título “Exercício com Tabelas”
– Defina uma Cor de Fundo
– Escreva "Página Principal" centralizada e Sublinhada
– Coloque um traço de divisão na página. Salte duas
linhas
 Trabalhando com tabelas
• Em index.html:
– coloque uma imagem centralizada na página.
Logo abaixo da Imagem, escreva "clique na
imagem para entrar“
– Colocar um link na imagem direcionado para
pag1.html
 Trabalhando com tabelas
• Em pag1.html:
– Escreva no título: Página 1
– Defina cor de fundo
– Escreva "Página Principal" centralizada e
Sublinhada
– Coloque um traço de divisão na página. Salte
duas linhas
– Escreva “Exemplo Um”, alinhado à esquerda,
negritado, cabeçalho 3.
 Trabalhando com tabelas
• Em pag1.html -
<table>
<tr>
<td>Célula 1, linha 1</td>
<td>Célula 2, linha 1</td>
</tr>
<tr>
<td>Célula 1, linha 2</td>
<td>Célula 2, linha 2</td>
</tr>
</table>
 Trabalhando com tabelas

<table></table> : Define tabela

<tr></tr> : Define linha
<td></td> : Define Célula
 Trabalhando com tabelas
• Em pag1.html -
<table>
<tr>
<td><b>Célula 1, linha 1</b></td>
<td>Célula 2, linha 1</td>
</tr>
<tr>
<td>Célula 1, linha 2</td>
<td><i>Célula 2, linha 2</i></td>
</tr>
</table>
 Trabalhando com tabelas
• Em pag1.html:
– Coloque um traço de divisão na página. Salte
duas linhas
– Escreva “Exemplo Dois”, alinhado à
esquerda, negritado, cabeçalho 3.
 Trabalhando com tabelas
• Em pag1.html:
<table border="2" cellpadding="2" cellspacing="2"
width="350">
<tr>
<td><b>Célula 1, linha 1</b></td>
<td>Célula 2, linha 1</td>
</tr>
<tr>
<td>Célula 1, linha 2</td>
<td><i>Célula 2, linha 2</i></td>
</tr>
</table>
 Trabalhando com tabelas
• Em pag1.html:
border=> Define a espessura da tabela
cellpadding=> O atributo cellpadding especifica
a distancia da borda do conteúdo.
cellspacing=>O atributo cellspacing especifica a
distancia entre as células.
width="350"
 Trabalhando com tabelas
• Em pag1.html:
– Coloque um traço de divisão na página. Salte
duas linhas
– Escreva “Exemplo Três”, alinhado à
esquerda, negritado, cabeçalho 3.
 Trabalhando com tabelas
Em pag1.html:
<table border="1" cellpadding="2" cellspacing="2" width="350">
<tbody>
<tr>
<td colspan="2" align="center">Esta célula tem um
colspan="2"</td>
</tr>
<tr>
<td align="center">célula normal</td>
<td align="center">Outra célula</td>
</tr>
</tbody>
</table>
 Trabalhando com tabelas
<tbody></tbody> : Corpo da tabela
colspan=> O atributo colspan especifica
quantas colunas da tabela serão ocupadas
pela célula.
 Trabalhando com tabelas
• Em pag1.html:
– Coloque um traço de divisão na página. Salte
duas linhas
– Escreva “Exemplo Quatro”, alinhado à
esquerda, negritado, cabeçalho 3.
 Trabalhando com tabelas
• Em pag1.html:
<table border="1" cellpadding="2" cellspacing="2"
width="350">
<tbody>
<tr>
<td rowspan="2" align="center">Esta
celula tem rowspan="2", por isso tem fundida a
celula abaixo.</td>
<td align="center">Célula Normal</td>
</tr>
<tr>
<td align="center">Outra célula normal</td>
</tr>
</tbody>
</table>
 Trabalhando com tabelas

rowspan=> o atributo rowspan serve para

mesclar células na vertical.
 Trabalhando com tabelas
• Em pag1.html:
– Coloque um traço de divisão na página. Salte
duas linhas
– Escreva “Exemplo Cinco”, alinhado à
esquerda, negritado, cabeçalho 3.
 Trabalhando com tabelas
Em pag1.html:
<table align="center" bgcolor="#FF0000" border="1"
cellpadding="2" cellspacing="2" width="300">
<tbody>
<tr>
<td>Tabela de cor vermelha de fundo</td>
<td>O atributo bgcolor da tabela está em
vermelho.</td>
</tr>
<tr>
<td>Célula normal</td>
<td bgcolor="#00FF00">Esta célula está em verde. Tem o atributo
bgcolor na cor verde</td>
</tr>
</tbody>
</table>
 Trabalhando com tabelas
• Em pag1.html:
– Colocar um link para voltar para a página
Principal
• Em index.html
– Colocar Webdesigner: “Seu Nome”
– Colocar um link para seu email de contato
 Trabalhando com tabelas
• Links Consultados:
– http://shibolete.tripod.com/Passo1.html
– http://www.criarweb.com/html/
• Exercício:
– Criar um arquivo pag2.html com seu horário
de aula. Deverá existir links nas células
apontando para os sites de apoio dos
professores.