Hwww.oocities.org/espanol/relampagoazul2001mx/ejemplo_pag_6.htmlwww.oocities.org/espanol/relampagoazul2001mx/ejemplo_pag_6.htmldelayedx~JOKtext/htmloWb.HMon, 24 Jun 2002 05:41:59 GMT?Mozilla/4.5 (compatible; HTTrack 3.0x; Windows 98)en, *~J CURSO DE HTML EJEMPLO_PAG_6
volver

ir abajo
VER FIRMAS INSTRUCCIONES DE HTML ENTRA Y FIRMA MI LIBRO DE VISITAS

AGREGAME A TUS FAVORITOS




C H I Q U I T I T A
QUIERES ESCUCHAR MUSICA

EJEMPLO DE COMO PODEMOS USAR LAS TABLAS

Construyendo Nuestra Primera Pagina WEB

 VIVIR LO NUESTRO
QUIERES ESCUCHAR MUSICA

TABLAS

Es uno de los elementos más útiles para mejorar la visualización de nuestras páginas WEB. Pueden utilizarse para simular hojas de cálculo, simular columnas, o meramente como objetos gráficos.

La etiqueta principal para la creación de una tabla y que delimita al resto de etiquetas es la de <TABLE></TABLE>.

Las tablas están formadas por filas y por columnas; la etiqueta que define las filas (row) es la de <TR> </TR>. Y la que define las celdas es la de <TD> </TD>.

La estructura básica de una tabla es la siguiente:


<TABLE>      Inicio de la tabla
<TR>                   Inicio de fila
<TD>                          Inicio de la celda
                          Aqui introduciremos el contenido de la celda.
</TD>                         Finalización de la celda.
</TR>                   Finalización de la fila.
</TABLE>      Finalización de la tabla.

En el siguiente ejemplo vamos a crear una tabla compuesta por dos filas y tres columnas, pondremos dentro de cada celda el identificativo de ubicación para que sea mucho más sencilla su comprensión.





Código Visualización en nuestra WEB
<TABLE BORDER=1>
<TR>
  <TD>Fila1-Columna1</TD>
  <TD>Fila1-Columna2</TD>
  <TD>Fila1-Columna3</TD>
</TR>
<TR>
  <TD>Fila2-Columna1</TD>
  <TD>Fila2-Columna2</TD>
  <TD>Fila2-Columna3</TD>
</TR>
</TABLE>
Fila1-Columna1Fila1-Columna2Fila1-Columna3
Fila2-Columna1Fila2-Columna2Fila2-Columna3





Vamos a crear otra tabla en la que pondremos tres filas y solo dos columnas. Tenemos que identificar siempre la etiqueta <TR> con las filas, por lo que en el ejemplo que vamos a realizar existirán tres conjuntos de <TR> . De igual manera las columnas van asociadas a la etiqueta <TD > por lo que existirán dos conjuntos de etiquetas <TD> dentro de cada fila. .

Código Visualización en nuestra WEB
<TABLE BORDER=1>
<TR>
  <TD>Fila1-Columna1</TD>
  <TD>Fila1-Columna2</TD>
</TR>
<TR>
  <TD>Fila2-Columna1</TD>
  <TD>Fila2-Columna2</TD>
</TR>
<TR>
  <TD>Fila3-Columna1</TD>
  <TD>Fila3-Columna2</TD>
</TR>
</TABLE>
Fila1-Columna1Fila1-Columna2
Fila2-Columna1Fila2-Columna2
Fila3-Columna1Fila3-Columna2





BORDER
Crea una linea que bordea toda nuestra tabla. En los ejemplos anteriores le hemos dado un ancho de linea al borde de 1 pixel. Si solo hubieramos puesto <TABLE BORDER>, por defecto le da un ancho de linea de 1 pixel. Es muy útil utilizar este atributo, porque mejora mucho la comprensión de la tabla. También se suele utilizar para crear rotulos.

Veamos un ejemplo.
Código Visualización en nuestra WEB
<TABLE BORDER=15>
<TR>
  <TD>ejemplo</TD>
</TR>
</TABLE>
Ejemplo De Una Tabla





BORDERCOLOR
Colorea el borde de nuestra tabla. El formato a seguir es BORDERCOLOR="#xxyyzz", donde xx representa el valor hexadecimal del color rojo, yy el valor hexadecinal del color verde y zz el valor hexadecimal del color azul.

Veamos un ejemplo.
Código Visualización en nuestra WEB
<TABLE BORDER=5 BORDERCOLOR="#993300">
<TR>
  <TD>ejemplo</TD>
</TR>
</TABLE>
Ejemplo De Una Tabla



WIDTH
Es el atributo que delimita el ancho de nuestra tabla, se le puede indicar con pixeles o con un termino porcentual que es el que recomendamos. El formato a seguir es WIDTH="xx%", donde xx nos dira el porcentaje de pantalla que va a medir de ancho nuestra tabla.
Veamos un ejemplo.
Código

<center> <TABLE BORDER=3 WIDTH="75%">
<TR>
  <TD>75% de la pantalla</TD>
</TR>
</TABLE></center>

Visualización en nuestra Web.

Esta tabla mide el 75% de nuestra pantalla, sea cual sea nuestra configuración ciempre veremos el 75% de nuestro monitor





CELLSPACING
Este atributo de la etiqueta <TABLE> nos indica la separación entre las celdas, por defecto es de dos pixeles. Pero lo podemos variar tanto como queramos. El formato a seguir es CELLSPACING=xx, donde xx nos dira el número de pixeles que separará las celdas .

Veamos un ejemplo sin usar este atributo.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD>Fila1-Columna1</TD>
  <TD>Fila1-Columna2</TD>
</TR>
<TR>
  <TD>Fila2-Columna1</TD>
  <TD>Fila2-Columna2</TD>
</TR>
</TABLE>
Fila1-Columna1Fila1-Columna2
Fila2-Columna1Fila2-Columna2





Veamos un ejemplo usando este atributo.
Código Visualización en nuestra WEB
<TABLE BORDER=5 CELLSPACING=25>
<TR>
  <TD>Fila1-Columna1</TD>
  <TD>Fila1-Columna2</TD>
</TR>
<TR>
  <TD>Fila2-Columna1</TD>
  <TD>Fila2-Columna2</TD>
</TR>
</TABLE>
Fila1-Columna1Fila1-Columna2
Fila2-Columna1Fila2-Columna2




Veamos un ejemplo usando este atributo.
Código Visualización en nuestra WEB
<TABLE BORDER=5 CELLPADDING=25>
<TR>
  <TD>Texto o Imagenes</TD>
  <TD>Texto o Imagenes</TD>
</TR>
<TR>
  <TD>Texto o Imagenes</TD>
  <TD>Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes
Texto o ImagenesTexto o Imagenes



Veamos un ejemplo usando CELLPADING Y CELLSPACING.

Código Visualización en nuestra WEB


<TABLE BORDER=5 CELLPADDING=15 CELLSPACING=15>
<TR>
  <TD>Texto o Imagenes</TD>
  <TD>Texto o Imagenes</TD>
</TR>
<TR>
  <TD>Texto o Imagenes</TD>
  <TD>Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes
Texto o ImagenesTexto o Imagenes


Si el número de filas no es igual al número de columnas, el navegador formaría la tabla dejando espacios en blanco. En el siguiente ejemplo vamos a dejar de poner una columna en la segunda fila.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD>Texto o Imagenes</TD>
  <TD>Texto o Imagenes</TD>
</TR>
<TR>
  <TD>Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes
texto o Imagenes



ATRIBUTOS MAS FRECUENTES DE LA ETIQUETA <TR>


La instrucción <TR> ,como deciamos al principio de este capítulo,define una fila dentro de nuestra tabla, y dentro de esta instrucción deberemos definir al menos una celda.

  


ALIGN
El atributo ALIGN situa el contenido de todas las celdas de nuestra fila en las tres opciones posibles, izquierda (LEFT) derecha (RIGHT) o centro (CENTER)

Veamos algún ejemplo.

Alineación de toda la fila a la izquierda.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR ALIGN=LEFT>
  <TD> Texto o Imagenes </TD>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes


Alineación de toda la fila al centro.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR ALIGN=CENTER>
  <TD> Texto o Imagenes </TD>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes


Alineación de toda la fila a la derecha.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR ALIGN=RIGHT>
  <TD> Texto o Imagenes</TD>
  <TD> Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes


VALIGN
El atributo VALIGN situa el contenido de todas las celdas de nuestra fila en las tres opciones posibles, abajo (BOTTOM) , centro (MIDDLE) o arriba (TOP)

Veamos algún ejemplo.

Alineación de toda la fila abajo.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR VALIGN=BOTTOM>
  <TD> Texto o Imagenes</TD>
  <TD> Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes


Alineación de toda la fila en el centro.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR VALIGN=MIDDLE>
  <TD> Texto o Imagenes</TD>
  <TD> Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes


Alineación de toda la fila arriba.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR VALIGN=TOP>
  <TD> Texto o Imagenes</TD>
  <TD> Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o Imagenes







ATRIBUTOS MAS FRECUENTES DE LA ETIQUETA <TD>


ALIGN
El atributo ALIGN situa el contenido de la celdas en las tres opciones posibles, izquierda (LEFT) derecha (RIGHT) o centro (CENTER). Se diferencia del atributo ALIGN de la etiqueta <TR> en que solo afecta a la celda en que va contenida. A diferencia de que en la etiqueta <TR> afecta a todas las celdas contenidas en la fila. Por defecto siempre las celdas van alineada a la izquierda

Veamos algún ejemplo.

Alineación de la celda central a la derecha.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD> Texto o Imagenes</TD>
  <TD ALIGN=RIGHT> Texto o Imagenes</TD>
  <TD> Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o ImagenesTexto o Imagenes






Alineación de la celda central en el centro.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD> Texto o Imagenes</TD>
  <TD ALIGN=CENTER> Texto o Imagenes </TD>
  <TD> Texto o Imagenes</TD>
</TR>
</TABLE>
Texto o ImagenesTexto o ImagenesTexto o Imagenes

Como hemos visto en los anteriores ejemplos, solo afecta a la celda donde va incluido este atributo.

VALIGN
El atributo VALIGN situa el contenido de la celda que lo contiene en las tres opciones posibles, abajo (BOTTOM) , centro (MIDDLE) o arriba (TOP). Al igual que comentabamos anteriormente solo afecta a la celda que contiene el atributo mientras que si lo ponemos con la etiqueta <TR> afectaba a todas las celdas que van anidadas en la fila. Por defecto la alineación vertical es en el centro

Veamos algún ejemplo.

Alineación de la celda central arriba.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD> Texto o Imagenes </TD>
  <TD VALIGN=TOP> Texto o Imagenes </TD>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Texto o ImagenesTexto o ImagenesTexto o Imagenes


Alineación de la celda central abajo.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD> Texto o Imagenes </TD>
  <TD VALIGN=BOTTOM> Texto o Imagenes </TD>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Texto o ImagenesTexto o ImagenesTexto o Imagenes


Podemos combinar ambos atributos.
Alineación de la celda central arriba y en el centro.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD> Texto o Imagenes </TD>
  <TD ALIGN=CENTER VALIGN=TOP> Texto o Imagenes </TD>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Texto o ImagenesTexto o ImagenesTexto o Imagenes




WIDTH
Anteriormente hemos visto este atributo para la etiqueta <TABLE>. Pero en algunos casos nos puede hacer falta ampliar el ancho para solo una celda. Es entonces cuando aplicamos este atributo a la etiqueta <TD>. Se comporta de igual manera que hemos estudiado y el formato a seguir es WIDTH="xx%", donde xx nos dira el porcentaje de la tabla que va a medir el ancho de nuestra celda.

Veamos algún ejemplo.

Vamos a dimensionar la celda central como el 70% de nuestra pantalla.

Código

<TABLE BORDER=3 >
<TR>
  <TD> Texto o Imagenes </TD>
  <TD WIDTH=70%> 70% de la tabla</TD>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>

Visualización en nuestra Web.

Texto o Imagenes Esta celda mide el 70% de nuestra tabla. Texto o Imagenes


ROWSPAN
En ciertas ocasiones puede hacernos falta que una celda se expanda sobre las celdas de abajo, para ello utilizamos este atributo. El formato a seguir es ROWSPAN=x, donde x nos dira el número filas que tiene que ocupar nuestra celda .

Veamos algún ejemplo.

Vamos a crear una celda que ocupe dos filas.

Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD ROWSPAN=2> Texto o Imagenes </TD>
  <TD> Texto o Imagenes </TD>
</TR>
<TR>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Se amplía la celda 2 filas Texto o Imagenes
Texto o Imagenes


Vamos a crear una celda que ocupe tres filas.

Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD> Texto o Imagenes </TD>
  <TD ROWSPAN=3> Texto o Imagenes </TD>
</TR>
<TR>
  <TD> Texto o Imagenes </TD>
</TR>
<TR>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Texto o Imagenes Esta celda ocupa 3 filas
Texto o Imagenes
Texto o Imagenes




COLSPAN
De igual manera que en el atributo anterior, en ciertas ocasiones puede hacernos falta que una celda se expanda sobre las celdas laterales, para ello utilizamos este atributo. El formato a seguir es COLSPAN=x, donde x nos dira el número columnas que tiene que ocupar nuestra celda .

Veamos algún ejemplo.

Vamos a crear una celda que ocupe dos columnas.

Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
  <TD COLSPAN=2> Texto o Imagenes</TD>
</TR>
<TR>
  <TD> Texto o Imagenes </TD>
  <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Se amplía la celda 2 columnas
Texto o ImagenesTexto o Imagenes


Vamos a crear una celda que ocupe dos columnas.

Código Visualización en nuestra WEB
<TABLE BORDER=5>
<TR>
    <TD COLSPAN=3> Texto o Imagenes </TD>
</TR>
<TR>
    <TD> Texto o Imagenes </TD>
    <TD> Texto o Imagenes </TD>
    <TD> Texto o Imagenes </TD>
</TR>
</TABLE>
Se amplía la celda 3 columnas
Texto o ImagenesTexto o ImagenesTexto o Imagenes





EJEMPLOS Y UTILIDADES

Dentro de este último apartado vamos a incluir diversos atributos y etiquetas que son menos usuales, pero no por ello menos útiles. Ademas estudiaremos varios ejemplos complejos asi como diversas utilidades de las tablas.



CAPTION
La etiqueta CAPTION se emplea para incluir una breve descripción en una tabla. Puede llevar el atributo ALIGN indicandole si queremos el titulo arriba TOP o en la parte inferior de nuestra tabla BOTTOM. Por defecto se alinea en la parte superior.

Veamos algún ejemplo.

Titulo central de nuestra tabla.
Código Visualización en nuestra WEB
<TABLE BORDER=5>
<CAPTION>Este es nuestro título</CAPTION>
<TR>
  <TD>Fila1-Columna1</TD>
  <TD>Fila1-Columna2</TD>
</TR>
<TR>
  <TD>Fila2-Columna1</TD>
  <TD>Fila2-Columna2</TD>
</TR>
</TABLE>
Este es nuestro título
Fila1-Columna1Fila1-Columna2
Fila2-Columna1Fila2-Columna2




CABECERAS

La etiqueta <TH> se emplea para poner celdas de cabecera, que automáticamente iran en negrita y centradas.

Veamos algún ejemplo.

Cabeceras de celda .

Código Visualización en nuestra WEB
<TABLE BORDER=1>
<TR>
  <TH>Nombre</TH>
  <TH>Apellido</TH>
</TR>
<TR>
  <TD>Guillermo</TD>
  <TD>Buenrrostro</TD>
</TR>
<TR>
  <TD>Pedro</TD>
  <TD>Malacara</TD>
</TR>
</TABLE>
NombreApellido
GuillermoBuenrrostro
PedroMalacara

Cabeceras de celda laterales.
Código Visualización en nuestra WEB
<TABLE BORDER=1>
<TR>
  <TH>Nombre</TH>
  <TD>Guillermo</TD>
  <TD>Pedro</TD>
</TR>
<TR>
  <TH>Apellido</TH>
  <TD>Buenrrostro</TD>
  <TD>Malacara</TD>
</TR>
</TABLE>
NombreGuillermoPedro
ApellidoBuenrrostroMalacara


Hasta ahora puede dar la sensación de que en las celdas solo se pueden introducir datos o texto, pero nada más lejano de la realidad. En una celda, es posible poner imágenes, enlaces, etc.

Veamos algún ejemplo.

Introduccion de una imagen en una celda .

Código Visualización en nuestra WEB
<TABLE BORDER=1>
<TR>
  <TD> <IMG SRC="Wolf.gif">WIDTH=121 HEIGHT=163 </TD>
  <TD>Fila1-Columna2</TD>
</TR>
<TR>
  <TD>Fila2-Columna1</TD>
  <TD>Fila2-Columna2</TD>
</TR>
</TABLE>
Fila1-Columna2
Fila2-Columna1Fila2-Columna2


Nos habremos dado cuenta, que la celda se ha dimensionado automáticamente al tamaño de la imagen, sin necesidad de ningún atributo.

En ocasiones las tablas pueden ser fantásticos marcos para realzar una imagen.

Código Visualización en nuestra WEB
<TABLE BORDER=15 bordercolor="" bgcolor="#990033" CELLSPACING=10 CELLPADDING=10>
<TR bgcolor="#ffffcc">
  <TD> <IMG SRC="IMG SRC="ACAPULCO.gif" WIDTH=500 HEIGHT=300"> </TD>
</TR>
</TABLE>


De igual manera podemos introducir en las celdas imágenes que sean enlaces, o simplemente enlaces a través de texto

Veamos algún ejemplo.

Introduccion de un enlace a través de una imagen en una celda, y de un texto .

Código Visualización en nuestra WEB
<TABLE BORDER=1>
<TR>
  <TD>
    <A HREF="#index.html">
      <IMG SRC="home.gif">
    <A>
</TD>
  <TD>
    <A HREF="#index.html">
        Ir al ínicio
    <A>
  </TD>
</TR>
</TABLE>
Ir al ínicio


Es posible también colorear el interior de las celdas, para ello se utiliza el atributo BGCOLOR ( color de fondo ), y depende a la etiqueta que acompañe tendra una utilidad distinta. Así si lo que buscamos es colorear el interior de todas las celdas de nuestra tabla del mismo color, emplearemos el atributo BGCOLOR acompañando a la etiqueta <TABLE>. Sin embargo si lo que queremos es colorear solo algunas celdas emplearemos el atributo BGCOLOR acompañando a la etiqueta <TD>. El formato a seguir es BGCOLOR="#xxyyzz", donde xx representa el valor hexadecimal del color rojo, yy el valor hexadecinal del color verde y zz el valor hexadecimal del color azul.

Veamos algún ejemplo.

Colorearemos toda la tabla del mismo color .

Código Visualización en nuestra WEB
<TABLE BORDER=5 BGCOLOR="#666699">
<TR>
  <TD> Fila1-Columna1 </TD>
  <TD>Fila1-Columna2</TD>
</TR>
<TR>
  <TD>Fila2-Columna1</TD>
  <TD>Fila2-Columna2</TD>
</TR>
</TABLE>
Fila1-Columna1 Fila1-Columna2
Fila2-Columna1Fila2-Columna2


Ahora coolorearemos cada celda la tabla de un color diferente .
Código Visualización en nuestra WEB
<TABLE BORDER=5 >
<TR>
 <TD BGCOLOR="#993300"></TD>
 <TD BGCOLOR="#ff33ff"></TD>
</TR>
<TR>
 <TD BGCOLOR="#996699">;/TD>
 <TD BGCOLOR="#ff0000"></TD>
</TR>
</TABLE>




Existen muchos mas atributos e instrucciones para crear tablas, pero los que hemos mostrado son los mas importantes y usuales, con ellos es posible crear de todo tipo de tablas. Es importante saber combinar las instrucciones con los diversos atributos. Ahora solo es cuestión de ponerse a trabajar.



Siguiente Pagina
volver

ir arriba