InícioCalendárioFAQBuscarMembrosGruposRegistrar-seConectar-se

Compartilhe | 
 

 [Tutorial] Layout: criar tabelas (parte 2)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Miss Days

avatar

Mensagens : 4
Data de inscrição : 16/04/2011

MensagemAssunto: [Tutorial] Layout: criar tabelas (parte 2)   Seg Abr 18, 2011 7:29 pm

Ora bem, entramos na parte mais complicada do código HTML mas que é tudo o que precisam de saber para poder fazer o vosso layout! Very Happy Na verdade, grande parte dos websites são construídos dentro de tabelas. E pensem bem, basta criar uma tabela gigante e fazer divisões lá dentro para o que querem escrever, não é?! Podem criar uma linha principal para colocar uma imagem e depois várias colunas para os diversos tópicos... E depois por baixo mais uma linha, com ou sem colunas... No entanto, dominar as tabelas é a parte mais complicada porque são muitas tags e é abstracto, não estamos a ver a tabela...

Por isso dou-vos uma dica... Sabiam que podem criar páginas de Internet com o Bloco de Notas?! Tudo o que têm que fazer é abrir o bloco de notas (Iniciar -> Programas -> Acessórios -> Bloco de Notas) e guardar com o nome que quiserem, mas põem a extensão htm. Ou seja, guardam com o nome "PaginaWeb.htm" (em vez do *.txt que aparece).
Depois façam copy-paste para lá:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>

</body>
</html>


Entre os dois "body" tudo o que escreverem vai aparecer como uma página de Internet. Experimentem escrever "Olá" lá dentro e guardem. Depois usem o vosso browser para abrir esse documento (Firefox, Internet Explorer, Google Chrome...). Tcha-ran! Deverá aparecer-vos uma página de Internet com o texto "Olá". Não é verdade? Pois bem, podem usar esse documento para ir "vendo" o que estão a escrever: escrevem o código HTML, guardam e abrem o documento no browser (ou actualizam se já estiver aberto). Assim conseguem ver a vossa tabela =)
[Têm que pôr aquelas coisas todas antes para o browser saber que estão a escrever HTML]


Portanto, vamos começar a codificar tabelas?
Como já expliquei várias coisas no outro tutorial, não vou dizer algumas aqui, se tiverem dúvidas perguntem =)

Ora bem, como é que mandamos fazer uma tabela? Com a tag <table>. Podem experimentar isto no documento que criaram lá em cima no Bloco de Notas. Entre os dois "body" escrevam:
<table>
Isto é o texto da minha tabela.
</table>
Guardem e abram no browser.
O texto aparece... mas não é numa tabela...

É que temos que saber como é que são constituídas as tabelas... As tabelas têm linhas, que são "parágrafos", e são divididas verticalmente por colunas. Ora, para uma tabela html funcionar, precisamos sempre de fazer um "parágrafo" e indicar que vamos escrever numa coluna. Portanto, para que apareça uma tabela, vamos ter que mandar fazer uma linha com a tag <tr> e as colunas com a tag <td>. Não se esqueçam, é sempre preciso fechar as tags! Uma tabela 2x2 é uma tabela com duas linhas e duas colunas. Uma tabela 3x2 é uma tabela com três linhas e duas colunas.
Pronto, vamos então tentar fazer com que apareça uma tabela. Adicionamos a linha e a coluna ao código:
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td></tr>
</table>

(O "border=black" é para verem a linha preta à volta)
Reparem na ordem por que fechei. Primeiro abri o tr e depois o td. Por isso fechei primeiro o td (terminei a "coluna") e depois o tr (para indicar que acabei o "parágrafo"). Agora já estão imaginar? Se que quiser fazer mais uma linha por baixo, basta voltar a abrir uma tag "tr":
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td></tr>
<tr><td>
E isto é a minha segunda linha!
</td></tr>

</table>

Agora... não se pode fazer o mesmo com as colunas? Pode!!! É a brincar com as colunas e com as linhas que conseguimos fazer as nossas tabelas! Dentro de uma linha podemos fazer várias colunas abrindo mais "td" antes de fecharmos a linha "tr":
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>

</tr>
<tr><td>
E isto é a minha segunda linha!
</td></tr>
</table>

Portanto, mexendo nisto vamos conseguir mudar a tabela e construí-la à nossa vontade. Agora, o que acontece é que, quando não definimos tamanhos, a tabela "cresce" para o lado consoante o tamanho da frase. O que não dá jeito nenhum... Lembram-se desta última tabela que tinha duas colunas na primeira linha e uma segunda linha? Pois bem, essa linha tem lá escrito "E isto é a minha segunda linha!". Se escrevermos mais coisas, a primeira coluna da linha de cima vai crescer para o lado =( Automaticamente temos também duas colunas na linha de baixo...
Agora existem códigos para fundir essas duas colunas numa só, e também para fundir linhas =) Mas antes disso, vamos recapitular:

  • A tag para criar uma tabela é <table>.
  • Para criar uma nova linha, usa-se a tag <tr>.
  • Para criar uma coluna, usa-se a tag <td>
  • Podemos criar várias colunas dentro de uma linha adicionando mais tags <td> dentro de uma <tr>.
  • É muito importante fechar todas as tags na ordem correcta.



O que nos falta agora para terminar as tabelas é aprender a "fundir" unidades =) Lembram-se da tabela de cima? A primeira linha tinha duas colunas e na segunda só mandámos fazer uma. Mas ela ficou automaticamente alinhada com a primeira coluna da linha de cima... Vejam o que acontece se escrevermos mais copiando isto para o vosso documento do bloco de notas:
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>
</tr>
<tr><td>
E isto é a minha segunda linha! Mas se puser mais texto estrago o alinhamento todo!!!
</td></tr>
</table>

Nada prático, não é? =( O que dava mesmo jeito é que a linha de baixo se "fundisse" com a segunda coluna de cima... Pois bem, há um atributo para isso =) É o atributo "colspan". Para que ele funcione, temos que dizer quantas colunas queremos "fundir". No nosso caso, a linha de cima tem 2 colunas e nós queremos que a de baixo tenha só uma, por isso queremos fundir as duas colunas da linha de baixo. Por isso o nosso colspan vai ter o valor de 2. Se se lembrarem das regras dos atributos, eles aparecem na forma <tag atributo="valor">. Nós queremos usar isto na segunda linha, primeira coluna, por isso temos que dar o atributo na tag td da coluna que nos interessa. Assim o nosso código vai ficar:
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>
</tr>
<tr><td colspan="2">
E isto é a minha segunda linha! Agora as duas colunas já estão fundidas!
</td></tr>
</table>

E agora já temos a última linha fundida =) Já estão a ver... Agora podemos mandar fazer as colunas que quisermos e as linhas que quisermos... Vamos colocar mais uma linha por baixo da linha que fundimos agora:
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>
</tr>
<tr><td colspan="2">
E isto é a minha segunda linha! Agora as duas colunas já estão fundidas!
</td></tr>
<tr><td>
Criámos uma nova linha!
</td></tr>

</table>

Como vêem, esta linha também está definida para ter "duas colunas", como tínhamos anteriormente. Precisaríamos de voltar a fundir as duas colunas para ficarmos só com a largura de uma. Mas podemos criar a segunda coluna e escrever! =)
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>
</tr>
<tr><td colspan="2">
E isto é a minha segunda linha! Agora as duas colunas já estão fundidas!
</td></tr>
<tr><td>
Esta é a primeira célula.
</td>
<td>E agora temos mais uma coluna.
</td>

</tr>
</table>

Vamos fazer mais uma linha com duas colunas. Para isso é só colocar mais um tr com dois td lá dentro:
<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>
</tr>
<tr><td colspan="2">
E isto é a minha segunda linha! Agora as duas colunas já estão fundidas!
</td></tr>
<tr><td>
Esta é a primeira célula.
</td>
<td>E agora temos mais uma coluna.
</td>
</tr>
<tr>
<td>Mais uma nova célula.</td>
<td>E a segunda coluna.</td>
</tr>

</table>

A segunda coisa que podemos fundir são as linhas. Imaginem que queremos fundir a primeira coluna das duas últimas linhas que criámos agora. O atributo que usamos é o rowspan. Ele é colocado na forma <tag rowspan="valor">. Uma vez mais, o valor corresponde ao número de linhas que queremos fundir. No nosso caso vamos fundir as duas últimas. Assim, o valor é de dois. Mandamos fazer isto na primeira coluna da linha a fundir, que é a coluna que tem o texto "Esta é a primeira célula." lá dentro. O código passa a ser:

<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>
</tr>
<tr><td colspan="2">
E isto é a minha segunda linha! Agora as duas colunas já estão fundidas!
</td></tr>
<tr><td rowspan="2">
Esta é a primeira célula.
</td>
<td>E agora temos mais uma coluna.
</td>
</tr>
<tr>
<td>Mais uma nova célula.</td>
<td>E a segunda coluna.</td>
</tr>
</table>

Bem, isto deu uma grande trabalhada, não é? Surprised É que nós quisemos fundir duas linhas escritas! Queríamos fundir com a que dizia "Mais uma nova célula". Mas ela já estava ocupada! Por isso o browser cria uma nova linha que nós não mandámos escrever para fundir, e ficamos com uma coluna "pendurada"! Portanto, se nós queremos unir as linhas, temos que apagar uma das colunas, ou seja, "deixar uma vazia" (lembram-se que quando fundimos colunas, era porque a segunda coluna não tinha nada mas aparecia a ocupar espaço?).
Ora bem, nós queremos alinhas com a coluna que diz "Mais uma nova célula", daí que tenhamos que apagar essa td:

<table border=black>
<tr><td>
Isto é o texto da minha tabela.
</td>
<td>Isto é a minha segunda coluna!!!
</td>
</tr>
<tr><td colspan="2">
E isto é a minha segunda linha! Agora as duas colunas já estão fundidas!
</td></tr>
<tr><td rowspan="2">
Esta é a primeira célula.
</td>
<td>E agora temos mais uma coluna.
</td>
</tr>
<tr>
<td>E a segunda coluna.</td>
</tr>
</table>

Tcha-ran! =) Criámos uma tabela com quatro linhas: a primeira tem duas colunas; a segunda tem uma coluna; a primeira coluna da próxima linha está fundida com a primeira coluna da seguinte; e ao lado dessa coluna com a altura de duas linhas há mais uma coluna com duas linhas.

Portanto, em resumo:
  • O atributo colspan serve para que as colunas se fundam (fundem-se horizontalmente numa só).
  • O atributo rowspan serve para fundir linhas (aumenta o espaço vertical para uma só célula da tabela)
  • O valor destes atributos correspondeu ao número de linhas ou tabelas que queremos fundir.



Irei dar vários modelos noutra parte do tutorial, esses poderão ser modificados à vossa vontade =)
Mas antes, convém aprendermos a "dar estilo" às tabelas e também aos outros elementos da nossa apresentação Wink


Última edição por Miss Days em Ter Abr 19, 2011 3:15 am, editado 1 vez(es)
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Cathrine

avatar

Mensagens : 14
Data de inscrição : 11/04/2011
Localização : Nao digo! HAHAHA!

MensagemAssunto: Re: [Tutorial] Layout: criar tabelas (parte 2)   Seg Abr 18, 2011 10:01 pm

Boa! 2º Parte! Yes! Adoro isto. Essa do Bloco de Notas eu já sabia, é aí que eu faço as pg Web, quando não tenho nada para fazer. Obrigada!
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Cathrine

avatar

Mensagens : 14
Data de inscrição : 11/04/2011
Localização : Nao digo! HAHAHA!

MensagemAssunto: Re: [Tutorial] Layout: criar tabelas (parte 2)   Ter Abr 19, 2011 6:15 pm

Quando é que vem a 3ª parte??
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Conteúdo patrocinado




MensagemAssunto: Re: [Tutorial] Layout: criar tabelas (parte 2)   

Voltar ao Topo Ir em baixo
 
[Tutorial] Layout: criar tabelas (parte 2)
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» [TUTORIAL] Como criar um JOGO DE TERROR
» [TUTORIAL] Como criar partículas na Unity 5 (partículas de fogo, água, explosões, etc)
» [TUTORIAL] Como criar o MENU INICIAL
» [TUTORIAL] Criando um simples Multiplayer [UNITY 5]
» [TUTORIAL] Fazer um VOLANTE com UI, para Android

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
Howrse Ajuda e Diversão :: Dúvidas e Explicações :: Explicações-
Ir para: