html Listas Html Feitas Com Tabelas

[Dark Lost 2]

Workshop de HTML no qual se realiza uma lista de elementos, porém utilizando tabelas no lugar da estrutura de lista OL ou UL.

 

As listas de elementos criadas com HTML (com as etiquetas <ul> ou <ol>) são pouco versáteis, pelo na minha opinião. Servem para fazer listas com bastante rapidez, mas se quisermos realizar algo um pouco mais complicado, não temos garantias de que vai funcionar. Por exemplo, pode ser que necessitemos de una lista de elementos ordenada que tenha vários níveis de classificação 1), 1.1), 1.2), 1.2.1), 1.2.2), 1.3), 2)... neste caso não nos servirá aninhar as etiquetas <ol>, porque não há maneira de especificar que a lista permita índices de tipo x.y) ou x.y.z).

 

Outro exemplo para o qual não nos serve a lista, tal qual está definida em HTML, é uma onde, no lugar de pontos em cada elemento, colocamos o logo da companhia para a qual estamos desenvolvendo a página. A lista permite configurar para colocar vários tipos de pontos (bullets em inglês): círculos, circunferências, quadrados, mas se desejamos que tenham outros tipos de elementos, temos que realiza-lo a mão.

 

Veremos neste artigo como utilizar uma tabela para fazer uma lista de elementos mais bonita. Não é um exercício difícil, mas sim útil. No meu caso, é mais habitual realizar as listas com tabelas que utilizar o próprio sistema de listas proporcionado por HTML. Espero que sirva também como exercício para as pessoas que se estão iniciando na linguagem HTML.

 

Tabela no lugar de lista

 

Para isso vamos realizar uma tabela com duas colunas. Na da esquerda colocaremos a imagem que queremos utilizar para a lista e na da direita, os textos dos elementos. Teremos uma fila por cada elemento da lista.

 

O exemplo que vamos construir terá este aspecto:

 

Elemento 1 da lista

Este seria um segundo elemento

Característica adicional a ressaltar

Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.

 

 

O código é muito simples de realizar. Simplesmente temos que conhecer um pouco o uso de tabelas e prover de uma imagem para os elementos das listas. Podemos utilizar os atributos da tabela para conseguir que se veja como desejemos. Por exemplo, para separar as células, utilizamos os atributos da tabela cellpadding e cellspacing. Se há elementos que ocupem várias linhas é conveniente utilizar o atributo valign=top nas células dos bullets.

 

O código deste exemplo seria o seguinte:

 

<table cellpadding="2" cellspacing="2">

<tr>

<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>

<td>Elemento 1 da lista</td>

</tr>

<tr>

<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>

<td>Este seria um segundo elemento</td>

</tr>

<tr>

<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>

<td>Característica adicional a ressaltar</td>

</tr>

<tr>

<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>

<td>Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.</td>

</tr>

</table>

 

Outro exemplo

 

Vejamos agora outro exemplo muito similar. O efeito a buscar é o seguinte:

 

Elemento 1 da lista

Este seria um segundo elemento

Característica adicional a ressaltar

Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.

 

 

Para fazer com que a imagem do elemento da lista fique bem alinhada com o texto da direita, utilizamos o atributo vspace de <IMG>, que define o espaço livre em pixels que deve ficar acima e abaixo da imagem. Isto é especialmente útil se quisermos utilizar bullets de tamanho reduzido.

 

O código seria o seguinte:

 

<table cellpadding="1" cellspacing="1">

<tr>

<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>

<td>Elemento 1 da lista</td>

</tr>

<tr>

<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>

<td>Este seria um segundo elemento</td>

</tr>

<tr>

<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>

<td>Característica adicional a ressaltar</td>

</tr>

<tr>

<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>

<td>Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.</td>

</tr>

</table>

 

Creditos: http://www.criarweb.com

 

//Dark Lost

[lucazyn 0]

Belo Post Cara!!! vlwww

Abraços

[xdtibia16 10]

AFF os caras não faz negosso massa o0.

Nota: 1. Vei Negosso Paia eu ja sei fazer isso e muito mais. tente melhorar muito mais do que isso para eu dar uma nota boa.