Curso HTML – Aula 06

Por Guilherme Farias em 01 de junho de 2010

Olá Leitores :)
Vamos começar a nossa sexta aula de HTML, na aula de hoje vamos aprender a criar tabelas. Vamos utilizar a mesma página de HTML utilizada na aula anterior (Pagina2.html) , e vamos ao trabalho!

Tabelas: <table>, <th>,<tr>,<td>…

Esté é outro recurso importante, mas que deve ser usado com parcimônia. Apenas use tabelas onde elas foram nacessários. Muita gente usa a tag <table> para montar o layout do site. Isso é ruim. Primeiro porque está usando um recurso pesado para o navegador, que vai consumir muita memória e tornar a carga do site lente. Segundo, porque vai deixar de fora o acesso das maquinas de busca, que não trabalham dentro de tabelas.
Quando você tiver que ontar uma lista de dados, a tabela é o melhor meio de fazer isso.

Para identificar que o navegador vai montar uma tabela, começamos apresentando a tabela com a tag <table>

<table>
</table>


Note que a tag é barte e fechada quando acaba o conteúdo da tabela. A seguir, definimos os títulos das colunas com o marcador <th> (Table Heading – cabeçalho da tabela).
Vamos criar nossa primeira tabela, adicione os seguintes tags na pagina2.html

<HTML>
<head>
</head>
<body>
<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>
<p><hr/><b>Testando Alinhamento esquerdo</b<<br/>
<img src=”Guiky.png” align=”left” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. </p>
<p><hr/><b>Testando Alinhamento direito</b><br/>
<img src=”Guiky.png” align=”right” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.</p>
<p><hr/><b>Testando Tabela</b>
<table>
<th>Titulo 01</th>
<th>Titulo 02</th>
<th>Titulo 03</th>
<th>Titulo 04</th>
</table></p>

</body>
</HTML>

O Resultado será este:

Não se preoculpe com a formatação, vamos acertar isso depois. O importante é ver que o navegador arrumou os titulo um ao lado do outro, na ordem em que colocamos no HTML.
Agora, vamos adicionar as linhas com o marcador <TR> (table row – linhas de tabela):

<HTML>
<head>
</head>
<body>
<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>
<p><hr/><b>Testando Alinhamento esquerdo</b<<br/>
<img src=”Guiky.png” align=”left” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. </p>
<p><hr/><b>Testando Alinhamento direito</b><br/>
<img src=”Guiky.png” align=”right” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.</p>
<p><hr/><b>Testando Tabela</b>
<table>
<th>Titulo 01</th>
<th>Titulo 02</th>
<th>Titulo 03</th>
<th>Titulo 04</th>
<tr>
</tr>

</table></p>
</body>
</HTML>

E dentro da linha, vamos inserir o conteúdo, coluna por coluna, com a tag <td>(Table Data – dados da tabela):

<HTML>
<head>
</head>
<body>
<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>
<p><hr/><b>Testando Alinhamento esquerdo</b<<br/>
<img src=”Guiky.png” align=”left” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. </p>
<p><hr/><b>Testando Alinhamento direito</b><br/>
<img src=”Guiky.png” align=”right” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.</p>
<p><hr/><b>Testando Tabela</b>
<table>
<th>Titulo 01</th>
<th>Titulo 02</th>
<th>Titulo 03</th>
<th>Titulo 04</th>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>

</table></p>
</body>
</HTML>

Veja salve o HTML atualize o navegador e confira o resultado.

Apesar de está ordenada em linhas e colunas, como uma tabela, a falta das bordas deixa a figura estranha. Uma forma fácil de colocar bordas na tabela é com o parâmetro border dentro da tag <table>. Veja nosso exemplo com esse recurso o código:

<HTML>
<head>
</head>
<body>
<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>
<p><hr/><b>Testando Alinhamento esquerdo</b<<br/>
<img src=”Guiky.png” align=”left” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. </p>
<p><hr/><b>Testando Alinhamento direito</b><br/>
<img src=”Guiky.png” align=”right” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.</p>
<p><hr/><b>Testando Tabela</b>
<table border=”1″>
<th>Titulo 01</th>
<th>Titulo 02</th>
<th>Titulo 03</th>
<th>Titulo 04</th>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>
</table></p>
</body>
</HTML>

O resultado será:

Mais adiante, aprenderemos outras formas de apresentar uma tabela. Mas, por enquanto, isso é o suficiente.

Fundindo células
Um recurso interessante que as tabelas ofereçam é a possibilidade de fundir duas ou mais células um uma só. Esse efeito é conseguido com os parâmetros colspan, para fundir colunas, e rowspan, para fundir linhas.

Importante: o parâmetro deve estar sempre na primeira tag <td>, que fará parte da fusão. As demais tags <td> Incorporadas não devem ser declaradas.

<HTML>
<head>
</head>
<body>
<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>
<p><hr/><b>Testando Alinhamento esquerdo</b<<br/>
<img src=”Guiky.png” align=”left” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. </p>
<p><hr/><b>Testando Alinhamento direito</b><br/>
<img src=”Guiky.png” align=”right” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.</p>
<p><hr/><b>Testando Tabela</b>
<table border=”1″>
<th>Titulo 01</th>
<th>Titulo 02</th>
<th>Titulo 03</th>
<th>Titulo 04</th>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td colspan=”2″>Célula 3</td>
</tr>
<tr>
<td>Célula 5</td>
<td colspan=”3″>Célula 6</td>
</tr>
<tr>
<td colspan=”4″>Célula 9</td>
</tr>
<tr>
<td>Célula 13</td>
<td>Célula 14</td>
<td>Célula 15</td>
<td>Célula 16</td>
</tr>
</table>

</p>
</body>
</HTML>

O valor do parâmetro determina quantas células serão unidas para formar uma só.
O valor 2 indica duas células. No caso do exemplo, a célula 4 foi incorporada pela célula 3.
Com o valor 3, a célula 7 e a célula 8 foram fundidas com a célula 6.
No valor 3, a célula 12, célula 11 e a célula10 foram fundidas com a célula 9.

Veja o resultado:

Note que a qualquer momento, você pode voltar a chamar as células normalmente, pois o parâmetro de fusão só vale para as tas <td> determinadas por ele. Em nossos exemplos usamos duas, três e quatro na horizontal.

Vamos usar o mesmo efeito, mais dessa vez vamos fundir linhas e colunas:

<HTML>
<head>
</head>
<body>
<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>
<p><hr/><b>Testando Alinhamento esquerdo</b<<br/>
<img src=”Guiky.png” align=”left” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. </p>
<p><hr/><b>Testando Alinhamento direito</b><br/>
<img src=”Guiky.png” align=”right” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.</p>
<p><hr/><b>Testando Tabela</b>
<table border=”1″>
<th>Titulo 01</th>
<th>Titulo 02</th>
<th>Titulo 03</th>
<th>Titulo 04</th>
<tr>
<td rowspan=”2″>Célula 1</td>
<td>Célula 2</td>
<td colspan=”2″>Célula 3</td>
</tr>
<tr>
<td colspan=”3″>Célula 6</td>
</tr>
<tr>
<td colspan=”4″>Célula 9</td>
</tr>
<tr>
<td>Célula 13</td>
<td>Célula 14</td>
<td>Célula 15</td>
<td>Célula 16</td>
</tr>
</table>

</p>
</body>
</HTML>

Confira o resultado:

Repare que quando adicionamos um rowspan ou colspan temos que apagar a célula que será fundida.

Estamos encerando por aqui a nossa sexta aula, você pode conferir as aulas anteriores nos links abaixo.

Veja as outras Aulas:

* Curso HTML – Aula 01
* Curso HTML – Aula 02
* Curso HTML – Aula 03
* Curso HTML – Aula 04
* Curso HTML – Aula 05
* Curso HTML – Aula 07
* Curso HTML – Aula 08
* Curso HTML – Aula 09

Comente!

Deixe uma resposta

O seu endereço de e-mail não será publicado.