Você está na página 1de 33

Tecnologia em Análise e

Desenvolvimento de Sistemas
Introdução a Desenvolvimento de
Sistemas Web

Aula 3 - Tabelas

Profª.Ma.Merris Mozer
• Competência da Unidade: Criar tabelas em documentos
web.

• Resumo: Neste aula aprenderemos como trabalhar com


tabelas.

• Palavras-chave: tabelas, linhas, colunas.

• Título da Teleaula: Tabelas.

• Teleaula nº: 3
TABELAS
Contextualizando
Soft&CIA, empresa de análise e desenv. de
sistemas, convidou José para uma entrevista de
emprego . No momento da 3ª entrevista,
questionaram muito sobre a utilidade das tabelas
e como ela é composta.
Contextualizando
 O que é uma tabela? Como ela é utilizada em html?
 Existem comandos específicos para a criação da
tabela?
 Estes questionamentos o José terá explicar.
 Vamos elucidar alguns pontos para ajuda-lo.
Linhas x Colunas
Usamos os TAGs:
<table>…</table>
<tr>…</tr>
<td>…</td>
<th>…</th>
<caption>…</caption>
<table>
<tr>
<th> Nome do Funcionário </th>
<th> Sobrenome do Funcionário </th>
</tr>
</table>
Resolvendo SP1
Demonstrar no computador
PROPRIEDADES DA
TABELA
Contextualizando
José, agora, precisa atribuir algumas propriedades
conhecidas como cellspacing e cellpadding na
tabela. E para complicar utilizar os comandos
colspan e rowspan.
Vamos entender primeiramente a diferença estre
estes termos.
Propriedades da tabela
Dentro do TAG <table>:
Espaçamento entre células
Cellspacing
Propriedades da tabela
Dentro do TAG <table>:
Espaçamento dentro das
células
cellpadding
Alinhamento
Os dados das colunas podem ser alinhados,
exemplo:
<tr>
<td> Profª.de Intr.Desenv.Sist.WEB</td>
<td align="right">Merris Mozer</td>
</tr>
Resolvendo SP2
Demonstrar no computador
Interação
Monte uma tabela com:
-Seis linhas
-Quatro colunas(preenchidas)
-O cabeçalho das colunas são:
Nome/Endereço/Fone/Idade
-A legenda é: “Alunos de ADS”
-Borda grossa de número 5.
-border="10"
-cellspacing="10"
-cellpadding=“30"
-align="right“ para todas as colunas.
-insira os TAG rowspan e colspan.
MESCLAR CÉLULAS
Contextualizando
Precisamos melhorar esta tabela, veja o que os
proprietários solicitaram.
Mescla
Comando para mesclar célula:
Na horizontal: colspan=“2”
Na vertical: rowspan=“2”
Resolvendo SP3
Demonstrar no computador
MESCLAR CÉLULAS
Contextualizando
É possível colorir uma tabela como é feito no
documento html? Esta foi a questão que
levantaram no meio da 3ª entrevista.
Cores tabela
Cor de fundo na tabela
Parâmetro bgcolor=“yellow”
<table bgcolor="yellow" ></table>
Cor nas células
Parâmetro bgcolor=“yellow”
<td bgcolor=“blue" ></td>
Parâmetro BorderColor:
BorderColor = “blue”
BorderColorLight = “blue”
BorderColorDark = “blue”
Resolvendo SP4
Demonstrando no computador
Interação
Como criar as células circuladas?