Arena RPG Maker
Olá, visitante!
Seja bem-vindo ao fórum Arena RPG Maker, caso queira aprender sobre criação de jogos, está no fórum certo. Esperamos que possa aprender tanto quanto possa nos ensinar aqui.

Atenciosamente,
Equipe Arena RPG Maker.
Arena RPG Maker

Estamos de volta o/ ... Ou não.Eu amo a -Dark
Doações para o fórum abertas, clique aqui e saiba mais.
Últimos assuntos
» Pokémon Genesis Online! (PGO)
Qua 05 Jul 2017, 17:08 por Lexar

» Tileset Converter to MV
Sex 12 Maio 2017, 13:07 por Douggi

» [Dúvida] Como tirar a porcentagem de esquiva
Ter 09 Maio 2017, 22:15 por Neil Flame Runner

» Pack Resources, Sprites e etc
Qua 23 Dez 2015, 09:30 por raydengv

» Download RPG Maker 2003 + RTP em português
Ter 22 Dez 2015, 08:14 por ::KimMax::

» Fantasy Art Online
Dom 18 Out 2015, 16:42 por daviih123

» Você vai ter medo do Nerve gear?
Sab 25 Jul 2015, 16:02 por Kirito-kun

» O Barato é louco
Sab 27 Jun 2015, 15:26 por Halt

» Download RPG Maker 2000 + RTP em português
Qui 21 Maio 2015, 19:28 por Wismael

» Divulgando meu grupo e página do Facebook
Ter 19 Maio 2015, 13:06 por Halt


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1Tutorial Curso de HTML - Aula 8 - Tabelas - Final em Qui 20 Dez 2012, 17:39

Halt

avatar
Administrador
Administrador
[Autor: Gleison]






Aula 8 – Tabelas
O HTML é uma linguagem que não possui formas de se organizar os itens, afinal ele encara a página como sequencias de linhas, sendo assim ao inserirmos uma imagem ao lado de um texto, ele interpreta como se a imagem fizesse parte do texto, isso se contar que não é possível inserir objetos em qualquer parte da página.
A única forma de burlarmos isso é usando Tabelas.
Para iniciarmos uma tabela devemos usar a tag <table></table>, dentro dessa tag devemos criar as linhas usando a tag <tr></tr> e nelas criarmos as colunas usando a tag <td></td>.

____________________________________________________________________________________

Tabelas Fixas ou Dinâmicas?
Ao criarmos a tabela devemos definir dentro da tag <table></table> o atributo Width (Largura), entretatanto ele pode ser colocado fixo (ou seja o valor exato) ou em porcentagem.
Vamos a um exemplo, abra o Bloco de Notas e crie digite o código abaixo e salve com o nome de EX7.html.

<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="50%" border="3">
<tr>
<td>
Tabela
</td>
</tr>
</table>
</html>


Veja que é criada uma tabela com metade do tamanho da página, isso devido ao atributo Width, experimente reduzir o tamanho da página e veja que a tabela é redimensionada automaticamente, e se ajusta ao conteúdo da janela.
Agora altere o código e deixe-o como o código abaixo.

<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="250PX" border="3">
<tr>
<td>
Tabela
</td>
</tr>
</table>
</html>


Salve seu arquivo e atualize sua página, perceba que agora ao redimensionar a janela o conteúdo a tabela não altera seu tamanho.

____________________________________________________________________________________
Bordas na Tabela
Também é possível inserir bordas na tabela, para isso basta usarmos o atributo Border na tag Table.
Também é possível escolher a cor da borda usando o atributo bordercolor. Veja o exemplo abaixo.

<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="250PX" border="3">
<tr>
<td>
Tabela
</td>
</tr>
</table>
</html>

____________________________________________________________________________________

Criando as linhas na Tabela (Table Row)
Para criarmos uma linha em uma tabela utilizamos a tag <tr></tr>, ela é a responsável por criar cada linha da tabela, sendo assim cada linha deve iniciar e terminar com essa tag.
Veja o exemplo abaixo.

<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="250PX" border="3">
<tr>
<td>
Tabela
</td>
</tr>
</table>
</html>


____________________________________________________________________________________

Criando as Colunas na Tabela (Table Division)
Para criarmos uma coluna em uma tabela, primeiramente devemos criar a linha, depois utilizamos a tag <td></td>, ela é a responsável por criar cada coluna da tabela, sendo assim cada coluna deve iniciar e terminar com essa tag.
Veja o exemplo abaixo.

<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="250PX" border="3">
<tr>
<td>
Divisão da tabela
</td>
</tr>
</table>
</html>


Além disso, essa tag pode receber os atributos Largura (Width), Altura (Height), Alinhamento vertical (valign), alinhamento horizontal (align), cor de fundo (bgcolor), imagem de fundo (background), Mesclagem de linhas (Rowspan) e mesclagem de colunas (Colspan).

____________________________________________________________________________________
Criando Colunas com tamanhos personalizados
Agora iremos criar uma tabela que terá uma linha e duas colunas, sendo que a mesma terá sua altura e largura definida.
Para isso abra o arquivo EX8.html e modifique o código de forma que fique como o abaixo.


<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="800PX" border="3">
<tr>
<td width=”250px” height=”100px”>
Essa tem 250 de largura e 100 de altura</td>
<td width=”550px” height=”100px”>
Essa tem 550 de largura e 100 de altura</td>
</tr>
</table>
</html>

Salve o arquivo e o exiba no navegador. Perceba que criamos uma tabela com duas células e que a primeira possui apenas 250 pixels enquanto a segunda possui 550 pixels.

____________________________________________________________________________________
Inserindo cor ou imagens
Para inserirmos uma cor utilizaremos o atributo Bgcolor, já para utilizar uma imagem utilizaremos o atributo Background.
Para isso abra o EX8.html e altere-o como abaixo.

<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="800PX" border="3">
<tr>
<td width=”250px” height=”100px” bgcolor=”#00FF00”>
Essa tem 250 de largura e 100 de altura</td>
<td width=”550px” height=”100px” background=”imagem1.jpg”>
Essa tem 550 de largura e 100 de altura</td>
</tr>
</table>
</html>


Salve sua página e atualize-a no navegador. Veja que na primeira célula inserimos a cor verde enquanto na segunda inserimos uma imagem qualquer.

____________________________________________________________________________________
Alinhamento Vertical e Horizontal
Podemos alinhar o texto na célula da tabela de diversas formas usando os alinhamentos verticais (valign) e horizontais (align).
O alinhamento horizontal pode receber três valores: Left (Esquerdo), Center (Centralizado) e Right (Direito)
O alinhamento vertical pode receber cinco valores: Top (Topo), Middle (Entre o topo e o centralizado), Center (Centralizado) , Bottom (Inferior) e Baseline (Entre o centralizado e o inferior)

Para isso abra o EX8.html e altere-o como abaixo.

<html>
<head>
<title>Aula 8 - Tabelas</title>
</head>
<body>
<table width="800PX" border="3">
<tr>
<td width=”250px” height=”500px” bgcolor=”#00FF00” align=”Center” valign=”Bottom”>
Essa tem 250 de largura e 100 de altura</td>
<td width=”550px” height=”100px” background=”imagem1.jpg”>
Essa tem 550 de largura e 100 de altura</td>
</tr>
</table>
</html>


Salve sua página e atualize-a no navegador. Veja que na primeira célula o texto esta alinhado no centro inferior da célula.
Exercício
Crie uma pagina:
Nome:exepratico6.html
Titulo:Exercício Pratico
Crie uma tabela com 3 linhas e 3 colunas
Em cada célula aplique um alinhamento diferente.


____________________________________________________________________________________
Mesclando células
É possível mesclar células utilizando o atributo Rowspan e Colspan. Vamos ao exemplo.
Abra o Bloco de Notas e Digite o código abaixo e salve com o nome de ex9.html

<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="250">
<tr>
<td>
Carros
</td>
<td>
Usados
</td>
</tr>
<tr>
<td>
Gol</td>
<td>
Palio</td>
</tr>
</table>
</body>
</html>

Salve sua página e abra no navegador.

A tabela criada no exercício mostra na primeira linha uma linha com duas células e na segunda linha dois carros, mas e se por acaso quiséssemos fazer com que na primeira linha fosse exibido apenas uma coluna e na segunda as duas?
Bom a princípio fácil, basta colocar todo o texto na primeira célula e excluir o código da segunda coluna.
Vamor alterar o código.

<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="250">
<tr>
<td>
Carros usados
</td>
</tr>
<tr>
<td>
Gol</td>
<td>
Palio</td>
</tr>
</table>
</body>
</html>


Salve sua página e atualize-a no navegador. Veja que na primeira linha temos um erro apenas uma célula e o restante do espaço permanecem em branco. Para isso usamos o colspan, o valor do colspan deve ser a quantidade de células a serem mescladas, no nosso caso duas células.
Altere seu código deixando como abaixo.

<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="250">
<tr>
<td colspan=”2”>
Carros usados
</td>
</tr>
<tr>
<td>
Gol</td>
<td>
Palio</td>
</tr>
</table>
</body>
</html>


Salve sua página e atualize-a no navegador. Veja que agora a primeira linha possui apenas uma célula.
O rowspan possui a mesma função entretanto ele faz isso com as linhas.

Vamos a um outro exemplo na mesma página após o final da tabela acrescente o seguinte código.

<table border="1">
<tr>
<td rowspan="2">Horas</td>
<td>
12 horas no dia </td>
</tr>
<tr>
<td>
12 horas na noite </td>
</tr>
</table>


Salve sua página e atualize-a no navegador. Veja que criamos um tabela com a primeira coluna mesclada e na segunda coluna há duas linhas.

____________________________________________________________________________________
Espaço entre células e Quebra de linha
Podemos definir o espaço entre uma célula e outra usando o atributo Cellspacing e o espaço entre a célula e a borda da tabela usando Cellpadding.
Abra o ex9.html e deixe-o como o abaixo.

<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="250" cellspacing=”0” cellpading=”0”>
<tr>
<td colspan=”2”>Carros usados
</td>
</tr>
<tr>
<td>Gol</td>
<td>Palio</td>
</tr>
</table>
</body>
</html>


Salve a página e abra no navegador, perceba que removemos o espaço entre uma célula e outra, tornando seu conteúdo mais próximo.
Podemos evitar que ao chegar no final da célula o texto vá automaticamente para a outra linha, para isso basta acrescentarmos o atributo nowrap na célula.
Ex.:
<td nowrap>Sem quebra de linha</td>


Legenda:
Texto azul = Códigos e atributos do HTML
Texto Azul em negrito = Codigos a serem adcionados ao codigo já existente.
Texto preto = Conteúdo da pagina.
Texto verde = Observações e considerações importantes.







Perdeu alguma aula?, Quer saber qual é a proxima? Visite o Indice
Clique aqui


__________________________________________

Ei Convidado, sim você mesmo! Ajude o fórum à crescer postando coisas úteis, dê sugestões para melhorar-mos e divulgue o fórum.

Step inside, see the devil in I.

Gifts-
Fantasy - Fantasy - Fantasy - ~Razor - Darkmel

Zerei a internet
Ver perfil do usuário http://arenarpgmaker.eclipserpg.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum