Clase 3:Listas y Tablas

Listas y Tablas

Un sitio web puede tener varias formas de organizar la información en la página y una de las opciones pueden ser las listas y tablas.

Básicamente cuando se habla de lista, hablamos de cómo organizar objetos lineales (generalmente textos). Lo podemos hacer de dos maneras: ordenadas o no.
Ordenada se refiera que enumera, es decir

1.     
2.     
3.       

No ordena se refiere que usa items, por ejemplo

•     
•       
•       

Para definir una lista en html:

Primero hay que definir el tipo de lista.
Después deben insertarse cada uno de los elementos de lista.
Al crear una lista  deberemos indicar su inicio y su fin. Para empezar una etiqueta para cada tipo distinto de lista -por ejemplo, para crear una lista no ordenada-, será necesario usar la etiqueta UL (su instrucción de inicio será <UL>)
 Una vez que hemos abierto la lista deberemos insertar, como dijimos antes, cada uno de sus elementos. Para ello usaremos una nueva etiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista no ordenada los elementos se introducen con la etiqueta de una única instrucción LI, ejemplo
<UL>
<LI> Argentina
<LI>Brasil
</UL>

Una lista no ordenada nos muestra un conjunto de elementos relacionados entre sí, pero sin ningún tipo de orden. La etiqueta que utilizamos en este caso es <UL> Utilizamos la etiqueta <LI> para identificar cada elemento de la lista. Tiene su atributo TYPE que puede tomar uno de los siguientes valores: “circle” (circulo sin relleno), “square” (cua-drado), “disc” (circulo con relleno).

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura<UL>  si queremos que el estilo sea válido para toda la lista, o dentro de la etiqueta <LI>si queremos hacerlo específico de un solo elemento:
 <UL TYPE="tipo de viñeta">
Donde tipo de viñeta puede ser uno de los siguientes:

• circle: marcas en forma de circulo (por defecto) 
• square: marcas en forma de cuadrado 
• disk: marcas en forma de disco 
• none: no utilizar ningún tipo de marca  

Las listas ordenadas nos permiten mostrar un conjunto de elementos o sucesos con un orden estricto.
Para incluir tales elementos, HTML nos ofrece la etiqueta <OL>   Como resultado podemos encontrar un conjunto de líneas perfectamente enumeradas.
La etiqueta <OL> posee una serie de atributos: por ejemplo TYPE que nos permite definir el estilo de numeración (A,B,C, 1,2,3 etc.), también con el atributo START definimos el valor inicial de la lista. De la misma manera la etiqueta <LI> posee dos atributos TYPE y VALUE, que cumplen igual función que para la etiqueta <OL>.
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo como lo dijimos anteriormente. En concreto nos es posible especificar el tipo de numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas (A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...).
 Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo type, el cual será situado dentro de la etiqueta <OL>

•  1 Para ordenar por números. 
•  a Por letras del alfabeto. 
•  A Por letras mayúsculas del alfabeto. 
•  i Ordenación por números romanos en minúsculas 
•  I Ordenación por números romanos en mayúsculas 

Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tiene por qué ser necesariamente el primero de todos. Para solventar esta situación, podemos utilizar un segundo atributo, start, que tendrá como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente. 

Listas de Definición 

Son aquellas en donde podemos presentar el texto de diferentes formas y se utilizan cuando anidamos listas. Anidar es insertar dentro de una lista otra. Esta puede ser de distintos tipos o también podemos incluir una definición.

Para incluir listas de definiciones utilizamos la etiqueta <DL>   ésta marca el comienzo y el fin de la lista. Estas listas constan de dos elementos: términos y definiciones. Para incluir un término se usa la etiqueta <DT>  y para incluir una definición la etiqueta <DD>  Como se puede apreciar las etiquetas tienen cierre, y este tipo de lista se utiliza para definir un término con su descripción.

Anidando listas…

Tablas

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.  

Una tabla nos permite organizar y distribuir los espacios de la manera más optima. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen.

 Las tablas son definidas por las etiquetas <TABLE> </TABLE>   luego se colocan todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla.

Las tablas son descriptas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> </tr>   dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> </td> .

Atributos para filas y celdas

 Height y width nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o puntos de pantalla) o de una forma relativa.

Los atributos rowspan y colspan son también utilizados frecuentemente Rowspan: indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila. Colspan: indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

 Cellspacing: especifica cuánto espacio debería dejar el agente de usuario entre el lado izquierdo de la tabla y el lado izquierdo de la columna que está más a la izquierda, entre la parte superior de la tabla y el lado superior de la fila que está más arriba, y lo mismo para los lados derecho e inferior. 

 Cellpadding : Este atributo especifica la

cantidad de espacio entre el borde de la celda y sus contenidos

Bordes y colores

 Para mejorar el aspecto de nuestras tablas, lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha definido el parámetro border de la etiqueta <TABLE>  que define la anchura de todos los bordes de la tabla en pixels. Si se especifica con valor 0, el borde no se visualiza.

El color del borde lo controla el parámetro bordercolor, que se aplica al tag <td> ,  Este parámetro toma valores hexadecimales o nombres de colores predefinidos, según el alfabeto inglés.

 También podemos modificar el color de fondo de cada celda de forma independiente, aplicando el parámetro bgcolor al tag <td>  Los colores se especifican de igual forma.