Listas HTML hechas con tablas

04/6/04 - Las listas de elementos creadas con HTML (con las etiquetas <ul> o <ol>) son poco versátiles, por lo menos en mi opinión. Sirven para hacer listas con bastante rapidez, pero si queremos realizar algo un poco más complicado, no tenemos garantías de que vaya a funcionar. Por ejemplo, puede que necesitemos una lista de elementos ordenada que tenga varios niveles de clasificación 1), 1.1), 1.2), 1.2.1), 1.2.2), 1.3), 2)... en este caso no nos servirá para nada anidar las etiquetas <ol>, porque no hay manera de especificar que la lista permita índices de tipo x.y) o x.y.z).

Otro ejemplo para el que no nos sirve la lista, tal cual está definida en HTML, es una donde, en lugar de puntos en cada elemento, coloquemos el logo de la compañía para la cual estamos desarrollando la página. La lista permite configurar para colocar varios tipos de puntos (bullets en inglés): círculos, circunferencias, cuadrados, pero si deseamos que tengan otro tipo de elementos, tenemos que realizarlo a mano.

Veremos en este artículo cómo utilizar una tabla para hacer una lista de elementos más bonita. No es un ejercicio difícil, pero sí útil. En mi caso, es más habitual realizar las listas con tablas que utilizar el propio sistema de listas proporcionado por HTML. Espero que sirva también como ejercicio para las personas que se están iniciando en el lenguaje HTML.

Tabla en lugar de lista

Para ello vamos a realizar una tabla con dos columnas. En la de la izquierda colocaremos la imagen que queremos utilizar para la lista y en la de la derecha, los textos de los elementos. Tendremos una fila por cada elemento de la lista.

El ejemplo que vamos a construir tendrá este aspecto:

	Elemento 1 de la lista
	Este sería un segundo elemento
	Característica adicional a resaltar
	Puede haber elementos cuyas características ocupen varias líneas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba.

El código es muy simple de realizar. Simplemente tenemos que conocer un poco el uso de tablas y proveernos de una imagen para los elementos de las listas. Podemos utilizar los atributos de la tabla para conseguir que se vea como deseemos. Por ejemplo, para separar las celdas, utilizamos los atributos de la tabla cellpadding y cellspacing. Si hay elementos que ocupen varias líneas es conveniente utilizar el atributo valign=top en las celdas de los bullets.

El código de este ejemplo sería el siguiente:

<table cellpadding="2" cellspacing="2">
<tr>
   <td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>
  <td>Elemento 1 de la lista</td>
</tr>
<tr>
  <td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>
   <td>Este sería un 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 resaltar</td>
</tr>
<tr>
   <td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>
   <td>Puede haber elementos cuyas características ocupen varias líneas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba.</td>
</tr>
</table>

Otro ejemplo

Veamos ahora otro ejemplo muy similar. El efecto a buscar es el siguiente:

	Elemento 1 de la lista
	Este sería un segundo elemento
	Característica adicional a resaltar
	Puede haber elementos cuyas características ocupen varias líneas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba.

Para hacer que la imagen del elemento de la lista quede bien alineada con el texto de la derecha, hemos utilizado el atributo vspace de <IMG>, que define el espacio libre en pixels que debe de quedar arriba y abajo de la imagen. Esto es especialmente útil si queremos utilizar bullets de tamaño reducido.

El código sería el siguiente:

<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 de la lista</td>
</tr>
<tr>
   <td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>
   <td>Este sería un 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 resaltar</td>
</tr>
<tr>
   <td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>
   <td>Puede haber elementos cuyas características ocupen varias líneas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba.</td>
</tr>
</table>

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba