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
-
-
-
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.
