Início
1
Curso de HTML - Aula 8 - Tabelas - Final Qui 20 Dez 2012, 20:39
Halt
Administrador
Mensagens : 1662
AP's : 2147483645
Respeito : 61Idade : 24
Localização : Rio de Janeiro
[Autor: Gleison]
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>.
____________________________________________________________________________________
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.
____________________________________________________________________________________
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>
____________________________________________________________________________________
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>
____________________________________________________________________________________
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).
____________________________________________________________________________________
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.
____________________________________________________________________________________
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.
____________________________________________________________________________________
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.
Nome:exepratico6.html
Titulo:Exercício Pratico
Crie uma tabela com 3 linhas e 3 colunas
Em cada célula aplique um alinhamento diferente.
____________________________________________________________________________________
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.
____________________________________________________________________________________
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>
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.
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 HTMLTexto 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
Clique aqui
