Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
 FireFox
 Chrome
 Internet Explorer
 safari
 Netscape
 Opera
 Avant
Exibir resultados
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 HTML avançado: Tabelas, Formulários e Frames

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 25
Localização : Aqui no PROJECT-HTML
Pontos : 5438
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: HTML avançado: Tabelas, Formulários e Frames   9/7/2008, 1:44 pm

TABELAS

As tabelas são um recurso muito útil para a montagem de nossas páginas, são divididas em linhas e colunas, dentro das quais são encontradas as células.
A sua utilização vai desde aquela tradicional tabela para agrupamento de informações, passado pela divisão de uma página, facilitando o posicionamento de imagens e textos que necessitam conviver em um mesmo espaço em sua página.

As TAG´s para a construção das tabelas são:

<table>e</table> Indica o início e o final de uma tabelas.
<tr>e</tr> Indica o início e o fim de uma linha.
<td>e</td> Indica o início e o fim de uma célula.
<th>e</th> Indica o início e o fim de uma célula de um titulo.
<caption>e</caption> Define o titulo para a tabela.

A diferença entre as TAG´s <th> e <td> é que a primeira define o texto da célula em negrito e centralizado.

<table>:

A TAG principal na construção de tabelas, marca o início e o fim de uma tabela.

Sintaxe:

<table border="n" width="n" height="n" align="alinhamento" cellspacing="n" cellpadding="n"
bgcolor="cor" bordercolor="cor da borda" bordercolordark="borda escura"
bordercolorlight="borda clara" calspan="n" rowspan="n">

Exemplo:

BORDER:

A TAG border define a espessura da borda da tabela em pixels, se omitida a tabela não apresentará bordas.

Para ser utilizado na TAG table

Código:
<table border="2">

<tr>
<th>Programa</th>
<th>Downloads</th>
</tr>

<tr>
<td>Clean Virus MSN</td>
<td>23.457</td>
</tr>

<tr>
<td>Disk Space Finder</td>
<td>12.502</td>
</tr>


<tr>
<td>Vista Cursors on Windows XP</td>
<td>17.415</td>
</tr>


<tr>
<td>FireFox com Google Toolbar</td>
<td>1.907</td>
</tr>

<tr>
<td>Adobe Reader 9</td>
<td>47.012</td>
</tr>
</table>
Exemplo:

WIDTH/HEIGHT

As TAG´s width e height definem a respectivamente a largura e altura de uma célula.

Para ser utilizado nas TAG´s <td> e <th>


Código:
<table border="2">

<tr>
<th width="100" height="75">Programa</th>
<th width="100" height="75">>Downloads</th>
</tr>

<tr>
<td>Clean Virus MSN</td>
<td>23.457</td>
</tr>

<tr>
<td>Disk Space Finder</td>
<td>12.502</td>
</tr>


<tr>
<td>Vista Cursors on Windows XP</td>
<td>17.415</td>
</tr>


<tr>
<td>FireFox com Google Toolbar</td>
<td>1.907</td>
</tr>

<tr>
<td>Adobe Reader 9</td>
<td>47.012</td>
</tr>
</table>

Exemplo:

ALIGN/VALIGN

As TAG´s align e valign define o alinhamento dentro das células align="horizontal", valign="vertical."

valign deve ser utilizado nas TAG´s <td> e <th>, align pode também ser utilizado em table definindo assim o alinhamento da tabela e não do conteúdo das células.

Os valores possíveis para align são:

left - alinhamento à esquerda (padrão), não presiza ser definido.
right - alinhamento à direita.
center - alinhamento centralizado

Os valores possíveis para valign são:

baseline - Mantém as linhas de texto sempre com o mesmo alinhamento. Para ser usado dentro de <tr>.
top - Alinha o comteúdo ao topo da célula.
middle - Alinha o comteúdo ao centro da célula.
bottom - alinha o comteúdo na base da célula.

Código:

<table border="2" colspan="5" rowspan="5" align="center" bordercolor="#000000">

<tr>
<th></th>
<th colspan="4">Alinhamento vertical</th>
</tr>

<tr>
<th rowspan="4" width="150">Alinhamento horizontal</th>
<th></th>
<th width="100">Superior</th>
<th width="100">Inferior</th>
<th width="100">Centro</th>
</tr>

<tr>
<th height="50" width="100">Esquerda</th>
<td valign="top">Texto</td>
<td valign="bottom">Texto</td>
<td valign="middle">Texto</td>
</tr>

<tr>
<th height="50">Direita</th>
<td align="right" valign="top">Texto</td>
<td align="right" valign="bottom">Texto</td>
<td align="right" valign="middle">Texto</td>
</tr>

<tr>
<th height="50">Centro</th>
<td align="center" valign="top">Texto</td>
<td align="center" valign="bottom">Texto</td>
<td align="center" valign="middle">Texto</td>
</tr>

</table>

Exemple:

CELLPADDING e CELLSPACING:

cellpadding define o espaço entre os dados de uma célula e a sua borda, seu padrão é 1,
cellspacing determina o espaço existente entre as células, seu padrão é 2, ambas definidas em número de pixeis.

Para ser utilizado preferencialmente na TAG table, já que são TAG´s que por objetivo a definição de um padrão
para toda a tabela.

Código:

<table cellspacing="15" cellpacing="5">

<tr>
<th>Dia da semana</th>
<th>Prato do dia</th>
</tr>

<td>Sugunda</td>
<td>Arroz, Feijão, Bife na Chapa, Batata frita, Salada de Alface e tomate.</td>
</tr>


<td>Terça</td>
<td>Rizoto de Frango, Filet de Frango, Salada de Maionese</td>
</tr>


<td>Quarta</td>
<td>Feijoada</td>
</tr>

<td>Quinta</td>
<td>Lazanha</td>
</tr>

<td>Sexta</td>
<td>Arroz, Feijão, Filet de Cação, Salada Verde.</td>
<tr>

</table>

BGCOLOR

A TAG bgcolor permite definir a cor de fundo para cada célula de uma tabela.
Para ser utilizado nas TAG´s <td> e <th>.

Obs: estas opções só é aceita pelo Internet Explorer.

BORDERCOLOR

A TAG bordercolor permite definir a cor das bordas de uma tabela. Para ser utilizada
na TAG <table>.

BORDERCOLORLIGHT/BORDERCOLORDARK

As TAG´s bordercolorlight e bordercolordark permitem definir as cores de destaque
das bordas de uma tabela, formando assim o aspecto tridimensional da mesma.

bordercolorlight define as bordas superior e esquerda (a cor mais clara),
bordercolordark define as bordas inferior e direita (a mais escura). Para ser utilizada
na TAG <table>.

COLSPAN/ROWSPAN

As TAG´s colspan e rowspan nos dão o recurso de expandir as células de uma tabela,
tanto em linhas como em colunas, trazendo-nos um recurso muito interessante,
utilizado em editores de texto de masclagem de células. Para serem utilizadas nas TAG´s <th> e <td>.

<TR> (Table Row):

A TAG tr define o início de uma linha que estivermos colocando entre <tr> e </tr>
Fará parte da mesma linha em uma tabela. Observe a utilização de <tr> nos exemplos anteriores.

<TD> (Table Data):

A TAG td define o início de uma coluna de tabela, tudo que estiver colocado entre <td> e </td>
será apresentado como conteúdo de uma célula de tabela. Observe a utilização de <td> nos exemplos anteriores.

<TH> (Table Header):

A TAG th define o cabeçalho de uma coluna de tabela, a única diferença entre <td> e <th>
é que em th os dados são colocados em negrito e centralizados. Observe a utilização de <th> nos
exemplos anteriores.

<CAPTION>

A TAG caption define um cabeçalho para a tabela que será colocada logo no seu início, não fazendo parte
de nenhuma de suas células.

Código:

<table border="2">

<caption>Os Campeões do Download</caption>

<tr>
<th width="100" height="75">Programa</th>
<th width="100" height="75">Download</th>
</tr>

<tr>
<td>Clean Virus MSN</td>
<td>23.457</td>
</tr>

<tr>
<td>Disk Space Finder</td>
<td>12.502</td>
</tr>


<tr>
<td>Vista Cursors on Windows XP</td>
<td>17.415</td>
</tr>

</table>


Finalmente eu terminei bem na proxima já vem o exercicio. estudem muito essas TAG´s porque tem que gravar bem!


Última edição por Admin em 2/9/2009, 5:11 pm, editado 3 vez(es)
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
Maicon
Novato
Novato
avatar

Masculino
Número de Mensagens : 1
Idade : 26
Pontos : 3364
Reputação : 0
Data de inscrição : 06/08/2008

MensagemAssunto: Tabelas   8/8/2008, 12:38 am

Queria saber como se define onde quero colocar minha Tabela

exemplo: Mais pra esquerda, um poco para direita, um poquinho para baixo, e assim vai =P

abraçO :afro:
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 25
Localização : Aqui no PROJECT-HTML
Pontos : 5438
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Re: HTML avançado: Tabelas, Formulários e Frames   8/8/2008, 4:04 pm

Citação :
Queria saber como se define onde quero colocar minha Tabela

exemplo: Mais pra esquerda, um poco para direita, um poquinho para baixo, e assim vai =P

para você alinhar a tabela inteira você tem que usar o comando align dentro da TAG <table>

Exemplo:

Código:

<html>
<head>
<title>TABELAS</title>
</head>
<table border="1" align="center">
<tr>
<td>
Tabela com alinhamento centralizado.
</td>
</tr>
</table>
</html>

Quando você quiser alinhar no meio usa-se o comando center no lado direito right.

Também pode usar a TAG <blockquote> colocando antes da TAG <table>. Assim a tabela vai andar um pouco mais para a direita. Numca esqueça de feichar </blockquote> para não acontecer erros. Olhe um exemplo usando <blockquote>:

Código:
<html>
<head>
<title>TABELAS</title>
</head>
<blockquote><blockquote>
<table border="1">
<tr>
<td>
Esta é uma tabela com alinhamento usando blockquote quanto mais blockquote for usado mais a tabela irá para a direita.
</td>
</tr>
</table>
</blockquote></blockquote>

</html>


Bem espero ter ajudado...Qualquer coisa é só perguntar denovo eu explico melhor ok :exp1':

_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
Americo
Novato
Novato


Masculino
Número de Mensagens : 4
Idade : 44
Experiencia em Webdesign : Medio
Pontos : 2344
Reputação : 4
Data de inscrição : 01/06/2011

MensagemAssunto: Re: HTML avançado: Tabelas, Formulários e Frames   1/6/2011, 9:34 am

Otimo.Para a primeira vez que participo estou entusiasmado.
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Conteúdo patrocinado




MensagemAssunto: Re: HTML avançado: Tabelas, Formulários e Frames   

Voltar ao Topo Ir em baixo
 
HTML avançado: Tabelas, Formulários e Frames
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Programas para fazer formulários
» Criar formulários de postagem
» [Resolvido]Fechar vários formulários
» [Resolvido] Como fazer um formulário editável?
» Dois formulários em uma página html

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: HTML :: HTML avançado-
Ir para: