Listas HTML feitas com tabelas
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.
Vejamos agora um 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>