5. Listas y Tablas


1. Listas en HTML
Hay diferentes tipos: listas desordenadas, ordenadas y de definiciones. Comencemos por las mas simples, las desordenadas.

1.1. Listas Desordenadas
 

<UL TYPE="disc">  

        <LI>papas  
        <LI>chocolate  
        <LI>dulce de leche  
        <LI>pan  
</UL>

  El resultado es el siguiente : 
  • papas 
  • chocolate 
  • dulce de leche 
  • pan 
 
 
<UL TYPE="square">  
        <LI>papas  
        <LI>chocolate  
        <LI>dulce de leche  
       <LI TYPE=DISC>pan  
</UL> 		 El resultado es el siguiente : 
  • papas 
  • chocolate 
  • dulce de leche 
  • pan 
 
 Como ves, confeccionar una lista es muy simple. Primero especificamos el tipo de lista, en este caso UL (unordered list) de lista desordenada. Luego cada ítem de la lista se indica con LI (list ítem). Verás también que hay un parámetro en UL, el TYPE="disc". Eso significa que el puntito que aparece a la izquierda de cada ítem de la lista sea un disco. También existen CIRCLE y SQUARE.

Se pueden mezclar tipos de ítems como en el ejemplo anterior. Sin embargo, no todos los navegadores lo soportan.

1.2. Listas Ordenadas
 
 

<OL>  
        <LI>papas  
        <LI>chocolate  
        <LI>dulce de leche  
        <LI>pan  
</OL> 		    El resultadoes el siguiente:
    1. papas  
    2. chocolate  
    3. dulce de leche  
    4. pan 
Se definen exactamente igual a las desordenadas, salvo que se utiliza el comando OL (ordered list). Veamos un ejemplo:
 
 
<OL TYPE=A>  
        <LI>papas  
        <LI>chocolate  
        <LI>dulce de leche  
        <LI>pan  
</OL> 		    El resultadoes el siguiente:
    A. papas  
    B. chocolate  
    C. dulce de leche  
    D. pan 
 
 

En las listas ordenadas el punto pasa a ser un numero que indica el orden de cada ítem. Esto se emplea cuando se desea enumerar listas automáticamente, ya que no hay que escribir en número de cada ítem a mano. Al igual que en las listas desordenadas, se puede elegir el tipo mediante el parámetro TYPE. Las posibilidades son las siguientes: A, a, I, i, y por defecto 1. Veamos como queda:

Se pueden incluir listas dentro de listas:
 
 

<OL TYPE=i>  
        <LI>papas  
        <LI>dulce de leche  
        <OL>  
        <LI> con miel  
        <LI> con chocolate  
        </OL>  
        <LI>pan  
</OL> 		   El resultadoes el siguiente:
    i. papas  
    ii. dulce de leche  
      1. con miel  
      2. con chocolate 
    iii. pan
 
1.3. Listas de Definición
Las listas de definición, como su nombre indica, son apropiadas para glosarios (o definiciones de términos). A diferencia de las dos que hemos visto, cada renglón tiene dos partes: Toda la lista debe encontrarse entre las etiquetas <DL> y </DL>.
 
<DL> 
<DT> Hard 
<DD> Sinónimo de Hardware. 
<DT> Soft 
<DD> Sinónimo de Software 
</DL>		   El resultado es:  Hard 
            Sinónimo de Hardware. 
 Soft 
             Sinónimo de Software.
 
2. Tablas en HTML
    Las tablas son uno de los elementos mas versátiles del HTML. Sirven para todo. Aparecen por primera vez con la HTML V2.0. Hoy casi todos los navegadores soportan las tablas, aunque existen algunos que no lo hacen, en cuyo caso lo mejor es cambiar de navegador.

Las tablas se definen con el comando <TABLE> que debe finalizar siempre con </TABLE>. Cerrar una tabla es muy importante, sino el resto de la página tendrá forma de tabla. Imagina una hoja cuadriculada. Una tabla es eso, con sus filas (TR) y columnas (TD). Veamos primero una tabla simple:
 
 

<TABLE>  
<TR>  
        <TH>1996  
        <TH>1997  
<TR>  
        <TD>30 millones  
        <TD>80 millones  
</TABLE> 		       El resultado sería: 
1996 1997  
30 millones  80 millones 
 
 
Primero comienza la tabla con <TABLE>. Luego viene <TR>, que indica el comienzo de una nueva fila (horizontal). Una tabla por lo menos debe tener una fila. Luego viene <TH>, que indica que comienza una columna. A continuación de este tag se coloca la información. En la segunda fila se usa <TD> en vez de <TH>. TH significa TABLE HEADING, y se emplea cuando la información contenida es el nombre de una categoría o columna. Simplemente lo que hace es resaltar la información. TD significa TABLE DATA y no resalta la información. TD y TH aceptan los siguiente parámetros:
 
 
 HEIGHT  Indica la altura de la celda. Para especificar el tamaño en pixeles se debe indicar la cantidad, ej.: HEIGHT=340; también se puede ingresar el tamaño en porcentajes, ej.: HEIGHT=30% 
 WIDTH  Indica el ancho de la celda. 
 ALIGN  Permite alinear el texto dentro de una celda. Acepta LEFT, RIGHT, CENTER. 
 VALIGN   Permite alinear el texto verticalmente dentro de una celda. Acepta TOP, BOTTOM, CENTER. 
 BGCOLOR  Permite especificar el color de fondo de una celda (solo en algunos browsers). 
 ROWSPAN=n   Indica que esa celda se extiende n filas. 
 COLSPAN=n  Indica que esa celda se extiende n columnas. 
<CAPTION> </CAPTION>  Título de la Tabla.
<BORDER>  Pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde tenga el grueso que queramos, poniendo:  
 <TABLE BORDER = número deseado>
Veamos un par de ejemplos:

Ejemplo 1 - Tabla Normal

La tabla se verá, más o menos así:
 
USUARIOS EN INTERNET 
1995  1996  1997 
1.500  15.000  80.000