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

21. Usando Tablas

Veamos una tabla...
Una Vez Que

Hayacreado

una tabla
¡usted N U N C A

se

volverá

Atrás!
...y revolucionará
por completo
páginas web normalitas

Objetivos

Después de esta lección será capaz de:

Lección

NOTA: Si no tiene el documento de trabajo de la lección anterior, bájese una copia ahora. También puede echar un vistazo a la página de prueba para ver si su Browser soporta las etiquetas de esta 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

El HTML para la estructura básica de una tabla es:
HTML Resultado
<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>
Fila 1 Col 1 Fila 1 Col 2 Fila 1 Col 3
Fila 2 Col 1 Fila 2 Col 2 Fila 2 Col 3
Fila 3 Col 1 Fila 3 Col 2 Fila 3 Col 3
El atributo border=1 en la etiqueta <table> le dice al Browser que "pinte" una línea alrededor de la tabla con un espesor de 1 pixel. Note cómo cada fila se define con etiquetas Table Row <tr>...</tr> y las celdas en cada fila se definen con etiquetas Table Data <td>...</td>. Cada etiqueta <td>...</td> puede contener cualquier tipo de etiquetas HTML que hayamos usado en este tutorial; encabezados, estilos de texto, links hipertexto, gráficos inline, etc... Dentro de esta etiqueta puede usar diversos atributos para controlar la alineación de los elementos en cada celda por separado:

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>
Este HTML producirá una celda con sus elementos alineados a la izquierda y en la parte inferior de la celda.

Filas y Columnas

La tabla de antes es muy simple y cuadrada, tres filas por tres columnas. Mire lo que se puede hacer usando los atributos colspan y rowspan en las etiquetas <td>...</td>.
HTML Resultado
<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>

** Fíjese en el atributo de la segunda celda de la primera fila; se expande en 2 columnas. También hemos alineado el texto al centor de la celda.
Fila 1 Col 1 Fila 1 Col 2-3
Fila 2 Col 1 Fila 2 Col 2 Fila 2 Col 3
Fila 3 Col 1 Fila 3 Col 2 Fila 3 Col 3
Bien, acabamos de expandir una celda en dos columnas; hagamos lo mismo con dos filas. Recuerde seguir el HTML como se construye, arriba a la izquierda, primera fila, luego la segunda, etc...
HTML Resultado
<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>
Fila 1 Col 1 Fila 1 Col 2-3
Fila 2 Col 1 Fila 2 Col 2 Fila 2 Col 3
Fila 3 Col 1 Fila 3 Col 3

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

Nuestra página de Introducción contiene una tabla ("Volúmenes de Algunas Erupciones Volcánicas Conocidas") que habíamos creado en la lección 9 usando las etiquetas de preformato <pre>...</pre>. Ahora la mejoraremos usando etiquetas de tabla.

  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

Las tabla con bordes son útiles pero otras veces querremos crear diseños estilo tabla pero sin bordes. Les llamamos tablas "fantasmas" porque para el lector puede que no sea obvio que esté viendo una tabla.

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

  <table>
o
  <table border=0>
En algunos Browsers basta con omitir el atributo "border" para no mostrar las líneas que delimitan las celdas. En otros Browsers es preciso establecer el borde a 0 pixeles para obtener dicho efecto.

¡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
[título]
XXXXX
[título]
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 |
|     |
|_____|
[link
de imagen
a una
imagen
mayor]
xxx xx xx
[link hipertexto a una imagen mayor]

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

Otro gran uso de las tablas invisibles es transformar una larga lista de elementos (creados con las etiquetas list, vea la lección 6). Las listas crecen hacia abajo de la página y pueden desperdiciar un valioso espacio a su derecha.

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

Algunos Browsers soportan HTML para colorear tablas, filas y celdas individuales. De hecho lo hemos usado a lo largo de todo este tutorial; en la página de Acerca de este Tutorial, el índice de lecciones y las lecciones cuando mostrábamos los ejemplos.

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

Parte de la Tabla HTML
table
da color al área definida por la tabla
<table bgcolor=#880000>
row
da color al área definida por una única fila
<tr bgcolor=#880000>
cell
da color al área definida por una única celda
<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

Compare su trabajo con este ejemplo de cómo debería aparecer el documento. Si el suyo resulta ser diferente del del ejemplo o los links no funcionan correctamente, revise cómo introdujo el texto en el editor de textos. Las tablas rápidamente se complican así que compruebe otra vez que ha definido las filas y las columnas correctamente.

Revisión

Tópicos a recordar de esta lecció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

Mire sus propias páginas web y busque un sitio donde una tabla le de mejor apariencia. O añada una lista de datos a sus páginas y use una tabla para darle forma. Intente crar una tabla con celdas de colores o, como hemos hecho en este tutorial, use los colores en una tabla invisible para dar color a bloques de texto en sus páginas.

A Continuación....

Todavía hay más acerca de listas e imágenes...
IR A.... | Índice de Lecciones | anterior: "Alineamiento Extra" | siguiente: "Más acerca de Imágenes y Listas" |


Writing HTML Lección 21: Usando Tablas
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net

URL: