Veamos una tabla... |
|
|||||||||||||||||
...y revolucionará por completo páginas web normalitas |
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.
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> |
|
Alineación Horizontal | Alineación Vertical |
---|---|
|
|
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.
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. |
|||||||||
|
||||||||||
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> |
|
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...
<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.
NOTA: La tabla puede no ser completamente distinta ya que tiene fondo negro.
<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>
<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.
<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>
<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>
<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.
<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>
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).
<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.
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).
<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.
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.
<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>
<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>
El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net
URL: