Alguna vez desearemos dar formato a una hoja de internet, colocar algun dato que quede ordenado como en una hoja de calculo o tal vez ubicar un indice de categorias, para eso nos valemos de las tablas y las listas.
Primero veremos las listas porque son mas sencillas. Para entender como funcionan te recomiendo que tengas a la mano tu hoja de Etiquetas.

Las listas llevan una etiqueta de apertura y una de cierre, pero los componentes de cada una pueden no llevar la de cierre, existen varios tipos de listas, listas numeradas, ordenadas y sin ordenar, yo prefiero simplificar el uso de ellas en solo dos, ya que las otras dos son muy parecidas y poco usuales, de hecho estan pensando en retirarlas de la jugada, por su poco uso.

Las dos listas mas comunes son la lista ordenada OL(ordered list) y la lista desordenada UL (unordered list), basicamente se diferencian en que la OL coloca un numero antes de cada componente de manera automatica, la UL solo coloca un punto antes de cada componente, si te fijas en lo personal uso la UL.

Para comenzar una lista debemos colocar la etiqueta que lo indique, en este caso vamos a comenzar con la etiqueta <OL> , esto indica al navegador que estamos comenzando una lista ordenada, luego, en el siguiente renglon si asi lo deseas escribes <LI>, esta etiqueta es comun a todas las listas, excepto a la de directorio, pero en general indica que lo que se escriba despues de esta etiqueta sera representado como componente de la lista, cada que agregamos un componente que queremos que se maneje por separado agregamos la etiqueta <LI>

Veamos como sería un ejemplo del uso de <OL><LI>

<OL> titulo de la lista<LI>componente X<LI>componente siguiente</OL>

Indicamos con </OL> que hemos terminado la lista, lo que se escriba despues ya no sera considerado componente, en caso contrario la lista seguira abierta.

Fisicamente lo vemos de la siguiente forma

titulo de la lista
1. componente X
2. componente siguiente

Si agregamos mas componentes antes de </OL> el numero ira creciendo automaticamente, haz varias pruebas y juega con ello. Si cambias OL por UL, en lugar del numero tendras un circulito, de la manera siguiente

titulo de la lista
• componente X
• componente siguiente

Es muy sencillo usar listas, ahora trata de agregar enlaces a las listas, a ella no le importa el formato que quieras darle de manera extra, si necesitas agregar un link, solo tienes que escribir <LI><ahref="LADIRECCION">EL ENLACE</A>.

Las tablas requieren un poco mas de atencion debido a los usos y aplicaciones multiples que lleva cada componente de la tabla.
Escencialmente, la tabla se forma de columnas y filas ROWS y DATAS en nuestros ejemplos, la tabla tiene 4 etiquetas basicas: <TABLE> que indica que lo siguiente es una tabla <TR> indica que aqui va dividida de manera horizontal <TH> que indica que esto es una celda de titulos y <TD> celda de contenido.

Siempre van en este orden, el uso de TD o TH depende de la importancia que queremos darle a los titulos y subtitulos de la tabla. No todo sera TH, pero si puede ocurrir q1ue todo sea TD.

Lo que se escriba en el espacio entre <TD> y </TD> sera usado como dato para la tabla, entonces se representara dentro de una celda.

Adicionalmente podemos indicar el ancho y alto de nuestras tablas, asi como la alineacion del texto dentro de las celdas, el ancho del espacio entre celdas, el ancho del borde, etcetera.

Para hacer una tabla con bordes se escribe <TABLE BORDER>, despues de BORDER podemos agregar un signo = y un numero indicando el ancho del borde, por experiencia, cualquier borde de mas de 2 pixeles se ve raro y cualquiera que pase de 5 es de mal gusto, pero a veces lucen bien en determinadas situaciones. Si lo que deseamos es una tabla limpia de bordes entonces no escribimos nada despues de TABLE.

Nuestro siguiente paso es indicar la prescencia de una fila, si no hay filas no hay datos y no hay celdas. Asi que escribimos <TR>. Algo importante es que podemos especificar e ancho y alto en este momento o en cualquier otro, pero si deseamos tambien cambiar el color de fondo entonces es necesario indicarlo dentro de esta etiqueta como lo hacemos en la etiqueta body (ver capitulo 1 y anexo de etiquetas)

El color puede ser diferente para cada tabla, linea, columna o celda.
Una vez realizado esto indicamos la prescencia de TD s estas etiquetas es donde vamos a colocar el contenido de la celda. Siempre recuerda cuantos TD abres en cada TR, para que no te sucedan cosas raras, si llega a pasar, o simplemente quieres aumentar el espacio e de una celda y en lugar de usar una, usar dos, entonces agregas para TD la linea ROWSPAN=X donde X es el numero de celdas que usaras de forma vertical si escribimos 2 dos celdas se usaran para estos datos en lugar de una sola, o la linea COLSPAN, esta indica el numero de columnas que usara este dato. Nuestra tabla se escribe asi:

Fisicamente se verá así:

Puedes jugar con los colores de relleno de las tablas, agregando el comando bgcolor a la etiqueta de <TABLE>, <TR>, <TH> o <TD>, darle formato al texto, incluir imagenes, vinculos y cualquier tipo de agregado en la celda, la celda solo actua como un corralito donde puedes meter cualquier tipo de dato.