Algo más sobre tablas

Existen bastantes atributos de las etiquetas que se utilizan para crear las tablas, pero una vez que sabemos crear la estructura básica es preferible que vayamos modificándolos mediante un editor gráfico en vez de introducirlos directamente por teclado. Las opciones que el editor de Netscape aplica por defecto suelen ser adecuadas para una finalidad general, pero en la siguiente práctica iremos comprobando como se modifica el resultado final dependiendo de las variaciones que se hagan. 
 

Práctica 8

  • En el editor de Netscape cargamos, si ya no lo teníamos en pantalla, el documento ej7c.htm 
  • Recordemos que para modificar las propiedades de la tabla basta con que pulsemos con el botón derecho estando en cualquier punto de la misma, lo cual nos desplegará un menú en el que podremos variar los atributos de toda la tabla, de una fila o de una celda en particular. 
  • Experimentamos libremente modificando parámetros de uno en uno y comprobando cuales son los efectos que se producen. Si el efecto no nos agrada restauramos el valor original antes de proceder a la siguiente modificación. 
  • Cuando encontremos algún resultado que nos parezca interesante escribimos bajo la tabla el parámetro que hemos modificado y los valores que hemos aplicado, de forma que tengamos una descripción de lo que hemos hecho para lograr el resultado final. 
  • Guardamos el trabajo con el nombre ej8.htm 
 

Anidar tablas

En ocasiones, especialmente cuando utilizamos las tablas como recurso de formato para distribuir la información dentro de la página, nos interesa introducir una tabla dentro de una celda pertenciente a una tabla creada anteriormente. Esto nos permitirá, por ejemplo, hacer que convivan tablas con borde junto a tablas sin borde.

Supongamos, por ejemplo, que estamos diseñando una página para introducir en ella los contenidos de una revista escolar. En la siguiente imagen podemos contemplar una posible estructura en la que vamos anidando sucesivas tablas. 

Cada color corresponde a una tabla que incluye en su interior a las que son de otro color diferente. 

Como ya conocemos los códigos básicos que constituyen una tabla entenderemos rápidamente la estructura general. Para facilitar la interpretación se han recogido las etiquetas correspondientes a cada tabla con el mismo color con el que se presentan en el gráfico y se han ido sangrando las etiquetas correspondientes a cada tabla, de forma que se pueda ver con facilidad en qué celda se encuentra insertada cada una de ellas.

Introduciendo el texto correspondiente a cada zona de la hipotética pantalla obtendríamos una presentación coincidente con el ejemplo gráfico. 

 <TABLE BORDER=0> 
<TR> 

    <TD> Enlaces a secciones </TD>
    <TD>  
      <TABLE BORDER=0>  
        <TR>  
          <TD> Logotipo </TD>
        </TR> 
      </TABLE> 
      <TABLE BORDER=0>  
        <TR>  
          <TD> Foto </TD> 
          <TD> Texto foto </TD> 
        </TR> 
      </TABLE> 
      <TABLE BORDER=0>  
        <TR>  
          <TD> Noticia 1 </TD> 
          <TD>  
            <TABLE BORDER=0>  
              <TR>  
                <TD> Noticia en columnas </TD> 
                <TD> Columna 2 </TD> 
                <TD> Columna 3 </TD> 
              </TR> 
            </TABLE> 
          </TD> 
        </TR> 
      </TABLE> 
    </TD> 
</TR> </TABLE>  

 

Práctica 8-b

  • ¿Nos atrevemos a intentar reproducir la estructura que se ha puesto como ejemplo? 
  • Como en este caso cada tabla individual es sencilla podemos crearlas directamente con el editor de Netscape, aunque si las queremos hacer con borde 0 es preferible que dejemos esta modificación para el final, cuando tengamos todo el trabajo hecho, de forma que mientras tanto tengamos una visión clara de la celda en la que estamos en cada momento. 
  • Cuando hayamos finalizado guardamos el documento como ej8b.htm 
 
 

© Raúl Luna '98