Listas HTML hechas con tablas

Las listas de elementos creadas con HTML (con las etiquetas <ul> o <ol>) son poco verstiles, por lo menos en mi opinin. Sirven para hacer listas con bastante rapidez, pero si queremos realizar algo un poco ms complicado, no tenemos garantas de que vaya a funcionar. Por ejemplo, puede que necesitemos una lista de elementos ordenada que tenga varios niveles de clasificacin 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 compaa para la cual estamos desarrollando la pgina. La lista permite configurar para colocar varios tipos de puntos (bullets en ingls): crculos, circunferencias, cuadrados, pero si deseamos que tengan otro tipo de elementos, tenemos que realizarlo a mano. Veremos en este artculo cmo utilizar una tabla para hacer una lista de elementos ms bonita. No es un ejercicio difcil, pero s til. En mi caso, es ms habitual realizar las listas con tablas que utilizar el propio sistema de listas proporcionado por HTML. Espero que sirva tambin como ejercicio para las personas que se estn 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 sera un segundo elemento Caracterstica adicional a resaltar Puede haber elementos cuyas caractersticas ocupen varias lneas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba. El cdigo 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 lneas es conveniente utilizar el atributo valign=top en las celdas de los bullets. El cdigo de este ejemplo sera 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 sera un segundo elemento</td> </tr> <tr> <td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td> <td>Caracterstica 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 caractersticas ocupen varias lneas. 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 sera un segundo elemento Caracterstica adicional a resaltar Puede haber elementos cuyas caractersticas ocupen varias lneas. 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 tamao reducido. El cdigo sera 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 sera 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>Caracterstica 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 caractersticas ocupen varias lneas. Colocamos VALIGN=TOP en la celda del bullet para que aparezca arriba.</td> </tr> </table>