6.- LISTAS Y TABLAS

Es importante entender que la buena organizacion del material contenido en una pagina web es un elemento muy importante para la “usabilidad: del propio sitio.

Por ejemplo escribir una sola idea en un solo parrafo es muy importante para la claridad y comprension del usuario.

Listas y tablas son maneras de organizar el conocimiento de manera facil y organizada pata su facil entendimiento por parte del usuario del sitio.

<UL>…</UL>

Lista no ordenada, cada uno de sus elementos deben ir dentro de un tag LI, sus atributos son TYPE=[disc, square circle]

Ejemplo

<UL TYPE=disc>

<LI>conejos blancos</LI>

<LI>conejos verdes</LI>

<LI>conejos rojos</LI>

</UL>

Despliegue:

image197.jpg

El atributo o propiedad TYPE produce diferentes tipos de “BULLETS”.

<OL>…</OL>

Lista Ordenada se utiliza para desplegar un conjunto ordenado de elementos, lo de ordenado significa que los elementos estaran acompañados de alguna notacion o simbologia creciente.

Los elementos de esta lista tambien se cargan con el tag <LI>elemento</LI>

Sus atributos principales son, TYPE=[1,a,A,i,I] donde:

“1” ←- numeros arabigos (1,2,3..default si no se usa TYPE)

“a” ←- alfabeto en minusculas (a,bc,d…)

A ←- alfabeto en mayusculas (A,B,C..)

“i” ←–numeros romanos minusculas (i,ii,iii…)

“I” ←—numeros romanos en mayusculas (I,II,III..)

Ejemplo

<OL TYPE=i>

<LI>conejos blancos</LI>

<LI>conejos verdes</LI>

<LI>conejos rojos</LI>

</OL>

despliegue

image198.jpg

<TABLE>..</TABLE>

Su estructura completa debe incluir los siguientes tres elementos:

<TR>..</TR> ←- renglon

<TH>..<TH> ←- celda de encabezado

<TD>..</TD> ←–celda de dato o informacion

La tabla es un conjunto organizado de datos o informacion distribuidos en n columnas y m renglones.

Las propiedades de <TABLE> son:

ALIGN=[left,center,right] ←- Alinea toda la tabla, los datos en celdas pueden usar su propio ALIGN

WIDTH=[npixels, p%] ←- el tamaño completo de la tabla ejemplo 400px (400 pixels) o 75% (75% del browser)

* Es muy recomendable trabajar mejor con % de la ventana del browser, para que se ajuste la tabla automaticamente a la resolucion de pantalla que tenga el usuario.

BORDER=x ←- Tamaño del marco de toda la tabla, no de las celdas

CELLSPACING = x ←- Tamaño en pixels blancos que debe haber entre celdas individuales

CELLPADDING = x ←- Pixels blancos entre el dato y el marco de la celda

<TR>..</TR> Renglon de la tabla, tiene como atributos o propiedades:

ALIGN=[left,rigth,center] Alineacion horizontal de todo el RENGLON

VALIGN=[top,middle,bottom] Alineacion vertical de todo el RENGLON

<TD>..</TD> Celda individual de la tabla y es quien contiene el dato o informacion sus ppropiedades o atributos son:

ROWSPAN=n ←- Cantidad de renglones que traslapa, es decir esta celda puede abarcar mas de un renglon.

COLSPAN=n ←- Cantidad de columnas que traslapa, es decir esta celda pueda abarcar mas de una columna.

NOWRAP ←- El dato o informacion se desplegara en forma continua sin cambios de renglon, es decir si se usa NOWRAP dentro del texto se tendra que usar <BR> para cambios de renglon

ALIGN y VALIGN ←- Alineacion horizontal y vertical de la celda.

WIDTH y HEIGHT ←- Cantidad SUGERIDA de pixels para el tamaño de la celda.

<TH>..</TH> ←- Celda para encabezados de columnas y tiene las mismas propiedades o atributos del tag <TD>

Ejemplo

<H2>Los Conejos Del Himalaya</H3>

<TABLE BORDER=10px WIDTH=75% HEIGHT=100px>

<TR>

<TH>COLOR CONEJO</TH>

<TH>RECETA</TH>

</TR>

<TR>

<TD>conejos blancos</TD>

<TD>guisado</TD>

</TR>

<TR>

<TD>conejos verdes</TD>

<TD>asado</TD>

</TR>

<TR>

<TD>conejos rojos</TD>

<TD>al carbon</TD>

</TR>

</TABLE>

Despliegue:

image199.jpg

Bien espero que este tutorial de algo les sirva y lo estare actualizando continuamente con mas de los tags que vienen en la definicion completa de html.

Recordar que tambien se incluyen algunos apendices muy utiles de HTML

Saludos y suerte prof lauro soto

Politica de Privacidad