Buscar

HTML tabelas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 9 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 9 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 9 páginas

Prévia do material em texto

Apresentação
Bem-vindo ao curso de HTML - Avançado. 
O objetivo deste curso é dar continuidade aos conhecimentos que você adquiriu no curso de HTML
- Básico ou aos que você já possua sobre essa linguagem de marcação, que é a mais utilizada para
criar páginas web. 
Neste curso, você aprenderá a incluir tabelas, formulários e frames em sua página web, usando o
HTML. Serão abordados temas como: 
• Criar e formatar uma tabela;
• Criar formulários com campos de entrada de dados; 
• Documentar página web; 
• Criar e formular frames .
Estrutura do curso
O curso de HTML - Avançado está dividido em quatro módulos, organzados da seguinte forma:
• Módulo 01- Criando e formatando tabelas;
• Módulo 02-Criando e formatando formulários;
• Módulo 03-Criando e formatando frames;
• Módulo 04-Incrementando a página web.
Ao término do curso, você deverá realizar a avaliação, para verificar a sua compreensão
sobre os assuntos abordados. 
Caso seu desempenho seja igual ou superior a 70% você será aprovado e poderá imprimir o
certificado de conclusão do curso.
Observe estas dicas para que você possa obter um melhor aproveitamento do curso:
• Verifique as informações sobre as datas de início e término do curso; 
• Você poderá fazer o curso em qualquer dispositivo com acesso a internet;
• Planeje seu tempo, de modo que possa acessar todo o conteúdo antes da data prevista para o
término do curso;
• Faça os exercícios propostos.
Introdução ao módulo
Neste módulo, você conhecerá as tags e os atributos necessários para a criação de tabelas. 
Os tópicos a serem estudados são: 
• Qual a função da tabela;
• Como inserir linhas e colunas na tabela;
• Atributos de formatação e alinhamento da tabela.
Por que utilizar tabelas em HTML?
Tabelas são muito úteis para a organização dos dados e das imagens em páginas web, pois
possibilitam um alinhamento que seria difícil de conseguir com simples comandos. 
Uma tabela é constituída de linhas e colunas, que podem, ou não, conter dados. 
Vamos iniciar criando uma tabela simples. Depois, veremos maneiras de adicionar algumas
características à tabela, como título, borda e largura. 
As tabelas podem conter textos, listas, imagens e, inclusive, outras tabelas. 
Criando uma tabela
A tag utilizada para criar uma tabela é a <TABLE></TABLE>.
No HTML as tabelas são criadas apenas com linhas e não colunas, diferente das criadas, por
exemplo, no Word. 
Dessa forma, além da tag <TABLE>, são necessárias mais duas tags para a construção da tabela: 
• <TR> - responsável por criar as linhas;
• <TD> </TD> - responsável por criar as células.
Observe, a baixo, como criar uma tabela simples. Em seguida, clique no botão para visualizar o
resultado na página web.
Código HTML:
<html> 
<head><title>Criando tabelas</title> 
</head> 
<body> 
 <table> 
 <tr> 
 <td> nome</td> 
 <td>Sobrenome</td> 
 <tr> 
 <td>Anna</td> 
 <td>Santos</td> 
 <tr> 
 <td>vanessa</td> 
 <td>Medeiros</td> 
 </table> 
 </body> 
</html> 
Atributos da tag
 A tag <TABLE> possui vários atributos que permitem, entre outros aspectos, controlar:
• O alinhamento da tabela na página; 
• O alinhamento dos dados nas células;
• A largura e cor da borda;
• As dimensões da tabela.
Você verá, nas próximas telas, esses atributos.
Atributo BORDER
Para criar um efeito que facilite a visualização da tabela, você pode inserir uma borda. 
Neste caso, você utilizará o atributo BORDER. A espessura da borda é definida em pixels. 
A sintaxe fica assim: 
<table border="número de pixels"> 
Você também pode inserir uma borda colorida. Neste caso, o atributo a ser utilizado é o
BORDERCOLOR. A sintaxe fica assim: 
<TABLE BORDERCOLOR = "cor"> 
Dica: As cores são as mesmas que você viu no curso de HTML Básico.
<html> 
<head><title>Inserindo borda colorida</title> 
</head> 
<body> 
 <table border="3" bordecolor="FF6600"> 
 <tr> 
 <td> nome</td> 
 <td>Sobrenome</td> 
 <tr> 
 <td>Anna</td> 
 <td>Santos</td> 
 <tr> 
 <td>vanessa</td> 
 <td>Medeiros</td> 
 </table> 
 </body> 
</html>
Atributo BGCOLOR
O atributo BGCOLOR permite a você definir uma cor de fundo para a tabela toda, quando
usada na tag <TABLE>. Pode ou não ser utilizado com os atributos BORDER e BORDERCOLOR. 
A sintaxe fica assim: <TABLE BGCOLOR ="cor"
Código HTML:
<HTML> <HEAD> <TITLE>Cor de fundo na linha/célula</TITLE> </HEAD> 
<BODY> <TABLE BORDER="3" BORDERCOLOR="FF6600"> <TR BGCOLOR="CCFFFF">
<TD> Nome </TD> <TD> Sobrenome </TD> <TR><TD> Anna </TD> <TD> Santos </TD>
<TR><TD> Vanessa </TD> <TD BGCOLOR="CCFFFF"> Medeiros </TD> </TABLE></BODY>
</HTML>
Atributo BACKGROUND
O atributo BACKGROUND permite a você definir uma imagem de fundo em uma tabela. 
A imagem é carregada em seu tamanho normal e é distribuída em pequenas partes, até preencher o
conteúdo da tabela. 
A sintaxe fica assim: 
<TABLE BACKGROUND= "imagem"> 
Lembre-se! O nome do arquivo da imagem precisa ser indicado com a respectiva extensão.
Atributos WIDTH e HEIGHT
Os atributos WIDTH e HEIGHT são utilizados para definir a largura e altura da tabela em
pixels ou porcentagem, uma vez que, por padrão, a célula da tabela assume o tamanho do maior
dado inserido:
• WIDTH - define a largura; 
• HEIGHT - define a altura.
A sintaxe fica assim: 
<TABLE WIDTH="valor" HEIGHT="valor">
Os atributos width e height também podem ser utilizados para alterar a altura e largura das células.
Se os valores definidos nestes atributos forem menores que o espaço necessário para
visualização dos dados da tabela, o navegador os ignora para garantir a apresentação adequada dos
dados.
Observe, neste exemplo, que a largura da tabela foi definida em 300 pixels (WIDTH="300") e sua
altura ocupará 20% (HEIGHT="20%") da altura do navegador.
<HTML><HEAD> <TITLE>Definindo dimensão da tabela</TITLE> </HEAD> 
 
<BODY> <TABLE WIDTH="300" HEIGHT="20%" BORDER="2"><TR BGCOLOR=
#E0EEEE><TD><FONT FACE= "Comic Sans MS"><B>Nome</B></TD><TD><FONT FACE=
"Comic Sans MS"><B>Sobrenome</B></TD><TR><TD><FONT FACE=
"Calibri">Anna</FONT></TD><TD><FONT FACE= "Calibri">Santos</FONT></TD><TR
BGCOLOR = #E0EEEE><TD><FONT FACE= "Calibri">Vanessa</FONT></TD><TD><FONT
FACE= "Calibri">Medeiros</FONT></TD></TABLE></BODY> 
</HTML>
Atributo ALIGN
O atributo ALIGN altera o alinhamento da tabela em relação à página web. A sintaxe fica
assim: <TABLE ALIGN = "alinhamento">. O alinhamento pode ser: 
left 
Alinha a tabela à esquerda (padrão). A sntaxe é a seguinte: 
<table align="left"> tabela.</table>
Codigo HTML:
<html> 
<body> 
<table border="2" align="left"> 
 <tr bgcolor=#EOEEEE> 
 <TD>Nome</td><td>Santos</td> 
 <tr> 
 <td>Anna</td><td>Santos</td> 
 
 
</table> 
</body> 
</html> 
Center 
Alinha a tabela ao centro. A sintaxe é a seguinte: 
<table align="center">tabela</table>
Codigo HTML:
<html> 
<body> 
<table border="2" align="center"> 
 <tr bgcolor=#EOEEEE> 
 <TD>Nome</td><td>Santos</td> 
 <tr> 
 <td>Anna</td><td>Santos</td>
Right
Alinha a tabela a direita. A sintaxe é a seguinte: 
<table align="right">tabela</table> 
Codigo HTML:
<html> 
<body> 
<table border="2" align="right"> 
 <tr bgcolor=#EOEEEE> 
 <TD>Nome</td><td>Santos</td> 
 <tr> 
 <td>Anna</td><td>Santos</td>
Cellspacing
O atributo CELLSPACING especifica o espaço entre a borda da tabela e as células, sempre
em pixels. 
A sintaxe fica assim: <TABLE CELLSPACING = "valor"> 
Observe, no exemplo abaixo, a tabela antes e depois da aplicação do atributo CELLSPACING
Código HTML:
<html> 
<body> 
<table border="2" align="left"> 
<HTML><HEAD> <TITLE>Alterando espaçamentos</TITLE> </HEAD> 
<BODY> <TABLE WIDTH="300" HEIGHT="25%" BORDER="4" CELLSPACING="10"><TR
BGCOLOR= #E0F8E0><TDALIGN="center" VALIGN ="center" HEIGHT="40"
COLSPAN="2"><FONT FACE= "Comic Sans MS"><B>CADASTRO DE
CLIENTES</B></TD><TR BGCOLOR= #E0EEEE><TD><FONT FACE=
"Calibri"><B>Nome</B></TD><TD><FONT FACE=
"Calibri"><B>Sobrenome</B></TD><TR><TD><FONT FACE=
"Calibri">Anna</FONT></TD><TD><FONT FACE= "Calibri">Santos</FONT></TD><TR
BGCOLOR = #E0EEEE><TD><FONT FACE= "Calibri">Vanessa</FONT></TD><TD><FONT
FACE= "Calibri">Medeiros</FONT></TD></TABLE></BODY>
Cellpadding 
Já o atributo CELLPADDING especifica o espaço entre os dados e a borda de uma célula,
sempre em pixels. 
A sintaxe fica assim: <TABLE CELLPADDING = "valor"> 
Observe, no exemplo abaixo, a tabela antes e depois da aplicação do atributo CELLPADDING .
Codigo HTML:
<HTML><HEAD> <TITLE>Alterando espaçamentos</TITLE> </HEAD> 
<BODY> <TABLE WIDTH="300" HEIGHT="25%" BORDER="4" CELLSPACING="10"
CELLPADDING="7"><TR BGCOLOR= #E0F8E0><TD ALIGN="center" VALIGN ="center"
HEIGHT="40" COLSPAN="2"><FONT FACE= "Comic Sans MS"><B>CADASTRO DE
CLIENTES</B></TD><TR BGCOLOR= #E0EEEE><TD><FONT FACE=
"Calibri"><B>Nome</B></TD><TD><FONT FACE=
"Calibri"><B>Sobrenome</B></TD><TR><TD><FONT FACE=
"Calibri">Anna</FONT></TD><TD><FONT FACE= "Calibri">Santos</FONT></TD><TR
BGCOLOR = #E0EEEE><TD><FONT FACE= "Calibri">Vanessa</FONT></TD><TD><FONT
FACE= "Calibri">Medeiros</FONT></TD></TABLE></BODY> 
</HTML>
Atributos da tag TD 
Agora, vamos analisar os atributos da tag TD. Podemos mudar as propriedades das células
utilizando os seguintes atributos: 
Align 
Além de alinhar a tabela em relação à página web, o atributo ALIGN alinha horizontalmente
os dados de uma célula.Seu valor pode ser especificado como: LEFT( alinha os dados à esquerda),
RIGHT ( alinha os dados a direita ) e CENTER ( Centraliza os dados na célula ). 
A sintaxe fica assim: <td align="alinhamento"> 
código HTML: 
<table width="300" height="200" border="2"> 
 <tr bgcolor=#EOEEEE> 
 <td align="left"><b>nome</b></td> 
 <tr> 
 <td align="center">Anna</td> 
 <td align="right">Santos</td> 
</table> 
Valign 
Para alinhar os dados de uma célula verticalmente, você utiliza o atributo VALIGN. Este
atributo é útil quando a altura das células foi aumentada. Os valores para este atributo são: TOP
(alinha os dados com a parte superior da célula).BOTTOM(alinha os dados com a parte inferior) e
CENTER (Centraliza verticalmente os dados) 
A sintaxe fica assim: 
<td valign="alinhamento"> 
Código HTML: 
<Table width="300" height="200" border="2"> 
 <tr bgcolor=#EOEEEEE> 
 <td valign="bottom" height="30">Nome</td> 
 <td valign="top" height="30">Sobrenome</td> 
 <tr> 
 <td valign="center" height="30">Anna</td> 
 <td valign="center" height="30">Santos</td> 
</table>
Colspan 
O atributo COLSPAN é utilizado para mesclar uma célula em mais de uma coluna. Este
atributo é muito utilizado quando a tabela possui um título ou conteúdo que sem ele ficaria alinhado
apenas na primeira célula. O valor para este atributo deve ser especificado em números. 
A sintaxe fica assim: <td colspan="número"> 
Código em HTML: 
<table width="300" height="200" border="2"> 
 <TR bgcolor=#EOEEEE> 
 <td colspan="2"><b>dados</b></td> 
 <tr> 
 <td>Anna</td> 
 <td>Santos</td> 
</table>
 
Rowspan 
O atributo Rowspan é utilizado para mesclar uma célula em mais de uma linha. Este atributo
é uito utilizado quando a tabela possui dados classificados por tipo, categoria etc. Sem ele, o texto
ficaria alinhado apenas na primeira célula. O valor para este atributo deve ser especificado em
números. 
A sintaxe fica assim: <td Rowspan="número"> 
Código em HTML: 
<table width="300" height="200" border="2"> 
<tr bgcolor=#E)EEEE> 
 <td><b>nome</b></td> 
 <td><b>sobrenome</b></td> 
 <tr> 
 <td>Anna</td> 
 <td rowspan="2">Santos</td> 
 <tr> 
 <td>Vanessa</td> 
</table>

Materiais relacionados

Perguntas relacionadas

Materiais recentes

Perguntas Recentes