Listas, Tablas Y Formularios En Css

Las listas en CSS constituyen uno de los elementos más importantes para el desarrollo de una página web que respete los estándares.
Así como es importante el marcado correcto de párrafos y encabezados, las listas también deben estar especificadas de la forma adecuada.
Más allá de la marcación del documento HTML, con la ayuda de CSS es posible cambiar por completo la apariencia de las listas ycrear elementos atractivos y de gran impacto visual, tanto para un simple listado como para la creación de una barra de navegación.
El marcado de las listas
En HTML la manera correcta de presentar una lista con ítems es utilizando las etiquetas UL y OL. La sigla UL proviene de Unordered List (listas sin orden) y OL de Ordered list (listas ordenadas). Al utilizar estas etiquetas en un documentoHTML el navegador se encarga de colocar viñetas (cuando se usa UL) o numerar los ítems (al usar OL):
Ejemplo:

Para lograr las listas anteriores el código HTML utilizado es:
Lista con UL:
<ul>
<li>Argentina</li>
<li>Brasil</li>
<li>Uruguay</li><li>Paraguay</li>
</ul>
Lista con OL:
<ol>
<li>Argentina</li>
<li>Brasil</li>
<li>Uruguay</li>
<li>Paraguay</li>
</ol>
Otro tipo de listas son las generadas por DL (Definition list) donde intervienen dos elementos:término y definición del término.

Ejemplo:

El código HTML para la lista anterior es:
<dl>
<dt>Asteroides:</dt>
<dd>Son una serie de objetos rocosos o metálicos que orbitan alrededor del Sol.</dd>
<dt>Cometas:</dt>
<dd>cuerpos frágiles y pequeños, de formairregular, formados por una mezcla de substancias duras y gases congelados.</dd>
<dt>Planetas:</dt>
</dl>
Dando formato a las listas:
1) Cambiando el estilo:
Utilizando CSS es posible dar formato a las listas sin modificar el código HTML (ese precisamente es el chiste de las hojas de estilo). Por ejemplo es posible elegir entre una viñetacuadrada (square), circular (disc, circle) o listas con letras (lower-roman, lower-alpha, upper-alpha, etc.)
Ejemplo:

El código CSS para lograr la lista con viñeta cuadrada es este:
ul{
list-style-type: square;
}
2) Utilizando imágenes:
En el ejemplo anterior se demostró que es posible variar el estilo de las listas usando los valores quenos da CSS de una forma muy sencilla. Asimismo, en muchas ocasiones, nuestros diseños requerirán de soluciones más estéticas que un simple círculo. Para ello CSS nos da la opción de incluir imágenes en nuestras listas utilizando dos métodos: reemplazar la viñeta por una imagen o añadirla como fondo. La segunda opción suele ser más práctica ya que es posible determinar la ubicación de la imagendesplazándola horizontal o verticalmente e intentar así una visualización similar en distintos navegadores.
Ejemplo:

Para sustituir la viñeta por una imagen simplemente se indica en el CSS la ubicación del archivo:
ul{
list-style-image: url(rombo.gif);
}
Esto hace que se reemplace la viñeta de la lista por la imagen indicada. Hay que tener encuenta que cada navegador presenta en pantalla los elementos con algunas pequeñas diferencias entre sí. En esta captura de pantalla se puede observar como varía la posición de la viñeta (y el interlineado también) en tres navegadores distintos:
Ejemplo:

En el ejemplo anterior se tomaron los valores por default de cada navegador, es decir, no se modificó el tamaño ni tipo de letra ni el...