Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

21. Usando Tablas

Objetivos

• DiseÒar una tabla con filas y columnas de texto.
• Escribir el HTML necesario para integrar esquemas de textos e im·genes.
• Escribir el HTML para tablas invisibles que generan columnas paralelas.
• Crear una tabla con celdas de diferentes colores.

LecciÛn

Las tablas fueron introducidas en el HTML 3.0 y posteriormente mejoradas por Netscape para aÒadir otra dimensiÛn al diseÒo de p·ginas web.Proveen de una estructura para organizar otros elementos del HTML en celdas en una misma p·gina. Uno de los usos m·s obvios es cuando tiene que dar formato... °a una tabla de columnas de textos! Pero las tablas tambiÈn abren las puertas a muchas otras opciones de diseÒo.

El HTML de las tablas puede parecer muy complejo, pero empezaremos con algo simple y haremos algunas tablas para nuestra Web de Volcanes.

Para los princippiantes, tened presente este concepto:

Las tablas se empiezan a crear desde la esquina superior izquierda, todas las columnas de la primera fila, luego la segunda...

      -->  -->  -->  -->  -->  --> 
      ___________________________|
      |
      -->  -->  -->  -->  -->

Llamaremos a cada entrada de la tabla una celda.

Etiquetas B·sicas de las Tablas

<table border=1>
  <tr>
  <td>Fila 1 Col 1</td>
  <td>Fila 1 Col 2</td>
  <td>Fila 1 Col 3</td>
  </tr>

  <tr>
  <td>Fila 2 Col 1</td>
  <td>Fila 2 Col 2</td>
  <td>Fila 2 Col 3</td>
  </tr>
  
  <tr>
  <td>Fila 3 Col 1</td>
  <td>Fila 3 Col 2</td>
  <td>Fila 3 Col 3</td>
  </tr>

</table>

AlineaciÛn Horizontal	AlineaciÛn Vertical
<td align=left> alinea todos los elementos a la izquierda de la celda (valor por defecto). <td align=right> alinea todos los elementos a la derecha de la celda. <td align=center> alinea todos los elementos en el centro de la celda.	<td valign=top> alinea todos los elementos en la parte superior de la celda. <td valign=bottom> alinea todos los elementos en la parte inferior de la celda. <td valign=middle> alinea todos los elementos en el medio de la celda (valor por defecto).

Se pueden combinar estos atributos:

  <td align=left valign=bottom>

Filas y Columnas

<table border>
  <tr>
  <td>Fila 1 Col 1</td>
  <td align=center colspan=2>
  Fila 1 Col 2-3</td>
  </tr>

  <tr>
  <td>Fila 2 Col 1</td>
  <td>Fila 2 Col 2</td>
  <td>Fila 2 Col 3</td>
  </tr>
  
  <tr>
  <td>Fila 3 Col 1</td>
  <td>Fila 3 Col 2</td>
  <td>Fila 3 Col 3</td>
  </tr>
</table>

<table border=1>
  <tr>
  <td>Fila 1 Col 1</td>
  <td align=center colspan=2>
   Fila 1 Col 2-3</td>
  </tr>

  <tr>
  <td>Fila 2 Col 1</td>
  <td valign=top rowspan=2>
  Fila 2 Col 2</td>
  <td>Fila 2 Col 3</td>
  </tr>
  
  <tr>
  <td>Fila 3 Col 1</td>
  <td>Fila 3 Col 3</td>
  </tr>
</table>

Hay todavÌa un poco m·s que ver, pero parÈmonos a ver estas tablas tan aburridas de ejemplo y trabajemos en nuestra p·gina web...

Una Tabla de Datos

1. Abra el archivo intro.htm en su editor de textos.
2. Borre cualquier cosa dentro de la "tabla", incluyendo las etiquetas <pre>...</pre>.
3. En su lugar ponga:

   
   <table border>
   <tr>
   <th>ErupciÛn</th>                     
   <th>Fecha</th>           
   <th>Volumen en Km<sup>3</sup></th>
   </tr>
   
   <tr>
   <td>Paricutin, Mexico</td>
   <td align=center>1943</td>
   <td align=center>1.3</td>
   </tr>
   
   <tr>
   <td>Mt. Vesuvio, Italia</td>
   <td align=center>79 A.D.</td>
   <td align=center>3</td> 
   </tr>
   
   <tr>
   <td>Monte Sta. Elena,<br>Washington</td>
   <td align=center>1980</td>
   <td align=center>4</td> 
   </tr>
   
   <tr>
   <td>Krakatoa, Indonesia</td>
   <td align=center>1883</td>
   <td align=center>18</td>
   </tr>
   
   <tr>
   <td>Long Valley, California</td>
   <td align=center>prehistoria</td>
   <td align=center>>450 & <700</td>
   </tr> 
   
   <tr>
   <td>Yellowstone, Wyoming</td>
   <td align=center>prehistoria</td>
   <td align=center>400</td> 
   </tr>
   </table>
   

   NOTA: Observe el HTML de la primera fila. Las etiquetas de Encabezado de la Tabla <th>...</th> funcionan exactamente igual que las etiquetas <td>...</td> excepto que cualquier texto es resaltado automaticamente en negrita y todos los elementos se centran autom·ticamente.

4. Salve y Cargue en su web Browser. Puede comparar su "intento" con este ejemplo de cÛmo deberÌa verse su tabla ahora mismo.

   NOTA: La tabla puede no ser completamente distinta ya que tiene fondo negro.

5. Ahora, aÒadamos algunas cosas m·s a nuestra tabla.
6. Algunos Browsers permiten especificar otras cosas para las lÌneas que conforman la tabla. Estos atributos para la etiqueta de tabla son:

     <table border=X cellpadding=Y cellspacing=Z>

   donde X es la anchura (en pixeles) del borde externo de la tabla. El atributo cellpadding especifica cu·nto "espacio vacÌo" habr· entre el contenido y el borde de cada celda; valores altos de Y alargar·n la celda (del inglÈs, "padding"). El atributo cellspacing especifica (en pixeles) la anchura de las lineas interiores que dividen las celdas.

   Modifique su tabla de modo que quede asÌ:

     <table border=3 cellpadding=4 cellspacing=8>

7. La etiqueta <caption> coloca una cadena de texto (centrado respecto al ancho de la tabla) a modo de tÌtulo de la misma. Modifique las lÌneas de su tabla para que sea:

     <table border=3 cellpadding=4 cellspacing=8>
     <caption><b><font size=+1>
     Vol™menes de Algunas Erupciones Volc·nicas Conocidas
     </font></b></caption>

   Puede incluir cualquier HTML dentro de la etiqueta <caption>; sÛlo aseg™rese de que queda dentro de las etiquetas de la tabla.

8. Y ya por divertirnos, coloreemos el texto el las etiquetas <th>...</th> de naranja (para m·s informaciÛn sobre colores de texto vea la lecciÛn 19). Modifique el HTML de la primera lÌnea asÌ:

     <tr>
     <th><font color=#EE8844>ErupciÛn</font></th>                     
     <th><font color=#EE8844>Fecha</font></th>           
     <th><font color=#EE8844>Volumen en Km<sup>3</sup></font></th>
     </tr>

9. Y movamos la tabla al centro de la p·gina. Si su Browser soporta la etiqueta <center>...</center> entonces sÛlo "rodee" la tabla con estas etiquetas. Para saber m·s acerca de alineaciÛn vea la lecciÛn 20.

10. Salve y Actualice en su web Browser. Puede comprar su nuevo "intento" con este ejemplo de como deberÌa verse su tabla en este momento. Bonita, øeh?

11. Finalmente aÒadiremos una columna a la izquierda; queremos mostrar las erupciones volcanicas histÛricas agrupadas (las primeras cuatro) y las prehistÛricas (las ™ltimas dos). AÒadiremos una celda vacÌa aÒadiendo una <th></th> a la primera fila. La razÛn de esto se ver· m·s clara cuando construyamos esta nueva columna en los siguientes pasos.

    <tr>
    <th></th>
    <th><font color=#EE8844>ErupciÛn</font></th>                     
    <th><font color=#EE8844>Fecha</font></th>           
    <th><font color=#EE8844>Volumen en Km<sup>3</sup></font></th>
    </tr>

12. Vayamos a la primera fila y aÒadamos una celda que se expanda en 4 filas:

    
    <tr>
    <td rowspan=4>
    <font color=#EE8844>
    <i>erupciones<br>
    observadas<br>
    por los hombres</i>
    </font></td>
    <td>Paricutin, Mexico</td>
    <td align=center>1943</td>
    <td align=center>1.3</td>
    </tr>
    

    NOTA: Hemos aÒadido algunas etiquetas <br> para que esta primera columna no sea muy ancha. Quiz·s quiera investigar usted mismo el efecto de omitir estas etiquetas.

13. Y en la quinta lÌnea aÒadamos una celda que se expanda en las siguientes dos filas:

    
    <tr>
    <td rowspan=2>
    <font color=#EE8844>
    <i>inferidas<br>
    del estudio<br>
    de los depÛsitos</i>
    </font></td>
    <td>Long Valley, California</td>
    <td align=center>prehistoria</td>
    <td align=center>>450 & <700</td>
    </tr> 

14. Salve y Actualice de nuevo en su Browser. Puede comparar este nuevo "intento" con este ejemplo de cÛmo deberÌa verse su tabla en este momento. Esto es todo lo que aÒadiremos a la tabla.

Tablas Invisibles o Fantasmas

Una tabla fantasma se construye igual que una tabla excepto que la etiqueta <table> es asÌ:

  <table>

  <table border=0>

°Si mira la parte superior de la p·gina es realmente una tabla fantasma que contiene en una de sus celdas otra tabla con bordes!. No obstante esto es ir m·s alla. Para nuestro ejemplo daremos nuevamente formato al archivo usa.htm (Volcanes en USA) en dos columnas. Mejor que tener p·rrafos colocados verticalmente por la p·gina los pondremos "de lado" como en este ejemplo:

xxxxx xxxxx xxxx 
xxx xx xxxxx xx xx
 xxxx xxxxx xxxxx

  xxx xx x xxxx 
xxx xx x x xx xx
xxxx xxxxx xx
x xxxxx xxx xxxxx

_______
| img |
|     |
|_____|

Note que la columna de la derecha tiene una imagen adyacente que es un link a una imagen a tamaÒo real (vea la lecciÛn 8e).

1. Abra el archivo usa.htm en su editor de textos.
2. Vaya a la secciÛn que dice:

   
   <font size=+1><B>Monte Sta. Elena</B></font><br>
   El 18 de Mayo de 1980, despuÈs de un largo periodo de inactividad,
   esta tranquila montaÒa en Washington permitiÛ
   <a href="msh.htm">observar con detalle</a>
   la mec·nica de estas erupciones altamente explosivas.
   
   <p>
   <font size=+1><B>Long Valley</B></font><br>
   Este sismÛmetro de campo mide terremotos asociados con fuerzas volc·nicas subsuperficiales
   y puede ayudar a predecir eventos futuros. Est· ubicado sobre una plataforma conocida como
   "Volcanic Tableland" formada por una gran erupciÛn hace 600.000 aÒos.
   <p>
   <a href="../pictures/seismo.jpg">
   <img src="../pictures/stamp.gif"> 
   -- [Ver la imagen a tamaÒo real] --</a>

   y reemplace con lo siguiente:

   <table cellpadding=6>
   <tr>
   <td><font size=+1><B>Monte Sta. Elena</B></font></td>
   <td colspan=2><font size=+1><B>Long Valley</B></font></td>
   </tr>
   
   <tr>
   <td valign=top>
   El 18 de Mayo de 1980, despuÈs de un largo periodo de inactividad,
   esta tranquila montaÒa en Washington permitiÛ
   <a href="msh.htm">observar con detalle</a>
   la mec·nica de estas erupciones altamente explosivas.
   </td>
   
   <td valign=top>
   Este sismÛmetro de campo mide terremotos asociados con fuerzas volc·nicas subsuperficiales
   y puede ayudar a predecir eventos futuros. Est· ubicado sobre una plataforma conocida como
   "Volcanic Tableland" formada por una gran erupciÛn hace 600.000 aÒos.
   </td>
   <td valign=top><a href="../pictures/seismo.jpg">
   <img src="../pictures/stamp.gif"></a>
   </td>
   </tr>
   
   <tr>
   <td colspan=3 align=right>
   <a href="../pictures/seismo.jpg">
   -- [Ver la imagen a tamaÒo real] --</td>
   </tr>
   </table>

   NOTA: Estudie cuidadosamente el HTML. Estamos usando realmente una tabla de 3 columnas. El primer p·rrafo (Monte Sta. Elena) es la columna de la izqueirda; la de la derecha incluye una columnad e texto y otra columna para una pequeÒa imagen. Se usa una fila inferior, alineada a la derecha y expandida 3 columnas, para colocar el link que lleva a la imagen desde el thumbnail.

3. Salve y Actualice de nuevo en su Browser.

Dividiendo una Lista Larga

Lo que se busca es transformar una lista:

Larga Lista Lineal		Columna 1	Columna 2
<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xx x xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>	en:	<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx </ul>	<ul> <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>

Como ejemplo, "dividiremos" la lista de recursos en nuestro archivo Proyectos de InvestigaciÛn (archivo proj.htm).

1. Abra el archivo proj.htm en su editor de textos.
2. Vaya a la parte de la lista, <ul>...</ul>, bajo el encabezado de Referencias y transformelo en:

   
     <table>
     <tr>
     <td valign=top>
     <ul>
         <li><A HREF="http://www.avo.alaska.edu/">Alaska Volcano Observatory</A>
         <li><A HREF="http://vulcan.wr.usgs.gov/home.html">Cascades Volcano Observatory</A>
         <li><A HREF="http://www.dartmouth.edu/pages/rox/volcanoes/elecvolc.html">The Electronic Volcano</A>
         <li><A HREF="http://www.geo.mtu.edu/volcanoes/">Michigan Tech Volcanoes Page</a>
         <li><A HREF="http://www.geo.mtu.edu/eos/">NASA Earth Observing System (EOS) IDS Volcanology Team</A>
     </ul>
     </td>
     <td valign=top>
     <ul>
         <li><A HREF="http://vulcan.wr.usgs.gov/Servers/earth_servers.html">NASA Facts: Volcanoes and Global Climate Change</A>
         <li><A HREF="http://www.ngdc.noaa.gov/seg/hazard/hazards.html">NGDC Natural Hazards Data</a>
         <li><a href="gopher://hoshi.cic.sfu.ca:5555/11/epix/topics/volcano">Volcano Listserv</a>
         <li><a href= "http://www.soest.hawaii.edu/hvo">Volcano Watch Newsletter</a>
         <li><a href="http://seawifs.gsfc.nasa.gov/JASON/HTML/EXPEDITIONS_JASON_6_home.html">JASON Project VI: Island Earth</a>
         <li><A HREF="http://volcano.und.nodak.edu/">VolcanoWorld</A>
     </ul>
     </td>
     </tr>
     </table>

   NOTA: Simplemente hemos cogido una lista <ul>...</ul> y la hemos partido en dos listas indeoendientes, cada una en una celda de una tabla invisible con una fila y dos columnas.

3. Salve y Actualice en su web Browser. Puede comparar su "intento" con un ejemplo de como su tabla deberÌa parecer en este momento.

Coloreando Tablas

Quiz·s quiera ver la p·gina de prueba para ver si su Browser soporta tablas con colores.

Usaremos los cÛdigos de color hexadecimales que vimos en la lecciÛn 16 para dar color al fondo de nuestras p·ginas y en la lecciÛn 18 para dar color al texto.

Es tan simple como insertar bgcolor=#FF0000 como atributo a las diferentes etiquetas <table>:

<table bgcolor=#880000>

<tr bgcolor=#880000>

<td bgcolor=#880000>

Ahora aÒadiremos alg™n color a la tabla de datos que creÛ en la p·gina de la IntroducciÛn. No aÒadiremos grandes pegotes de color (pero siÈntase libre para experimentar en sus p·ginas). En nuestro caso simplemente aÒadiremos el HTML para hacer que las celdas que marcan los encabezados sean un poco m·s grises que el fondo tan negro.

1. Abra el archivo intro.htm en su editor de textos.
2. Localice todas las etiquetas <th> de los encabezados de columnas:

   
     <th><font color=#EE8844>ErupciÛn</font></th>                     
     <th><font color=#EE8844>Fecha</font></th>           
     <th><font color=#EE8844>Volumen en Km<sup>3</sup></font></th>
   

   y aÒada el atributo de color gris (#222222):

   
     <th bgcolor=#222222><font color=#EE8844>ErupciÛn</font></th>                     
     <th bgcolor=#222222><font color=#EE8844>Fecha</font></th>           
     <th bgcolor=#222222><font color=#EE8844>Volumen en Km<sup>3</sup></font></th>
   

3. Ahora busque las dos etiquetas <td> que hacen de etiquetas de fila y aÒada el mismo color:

   
     <td bgcolor=#222222 rowspan=4>
     <font color=#EE8844>
     <i>erupciones<br>
     observadas<br>
     por los hombres</i>
     </font></td>
   
        :
        :
        :
     <td bgcolor=#222222 rowspan=2>
     <font color=#EE8844>
     <i>inferidas<br>
     del estudio<br>
     de los depÛsitos</i>
     </font></td>
    
   

4. Salve y Actualice en su web Browser. Puede comparar su trabajo con este ejemplo de cÛmo deberÌa verse en este momento.

Compruebe Su Trabajo

RevisiÛn

1. øEn quÈ orden interpreta un Browser los elementos de una tabla?
2. øCu·l es la diferencia entre las etiquetas <td>...</td> y <th>...</th>?
3. øDÛnde se pone el atributo colspan=X? øPara quÈ sirve?
4. øCÛmo se crea una tabla sin bordes?
5. øCÛmo le darÌa color a una ™nica fila de una tabla?

Pr·ctica Independiente

A ContinuaciÛn....

IR A.... | Õndice de Lecciones | anterior: "Alineamiento Extra" | siguiente: "M·s acerca de Im·genes y Listas" |

URL: