Ya hemos visto como pueden modificarse las dimensiones globales de una tabla, ahora vamos a ver como se puede cambiar de tamaño una celda.
Observemos las dos tablas que vienen a continuación:
Vemos que en una hay toda una fila de celdas más "altas", mientras que en la segunda es una columna la que es más "ancha" que las demás. Esto es lo primero que debemos tener en cuenta: no es posible modificar de forma independiente las dimensiones de una única celda, sino que debemos modificar toda una fila o columna.
Ahora vamos a cargar esta página en el EDITOR DE NETSCAPE, y estudiaremos los códigos con atención.
En este caso la disposición de los atributos no es tan evidente como en casos anteriores. Los dos atributos que buscamos son soportados por la etiqueta <TD>, y son WIDTH (que controla el ancho de las celdas filas, es decir, sus dimensiones en sentido vertical) y HEIGHT (que hace lo mismo con la altura de las celdas, es decir, con sus dimensiones en sentido horizontal).
WIDTH afecta siempre a toda una columna, mientras que HEIGHT afecta siempre a una fila. Veamos un par de ejemplos de códigos.
<P><TABLE WIDTH="450" BORDER="1" CELLSPACING="2"
CELLPADDING="0">
<TR>
<TD WIDTH="14%"> </TD>
<TD WIDTH="36%"> </TD>
<TD WIDTH="25%"> </TD>
<TD WIDTH="25%"> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
</TABLE>
Podemos observar que en las etiquetas que corresponden a celdas vacías, aparece un código ( ) que no habíamos visto hasta ahora, y que aparentemente no tiene representación en pantalla. Este código corresponde a lo que en inglés se llama "non-breaking space" (que corresponde a las iniciales nbsp).
En HTML este código se usa para varios fines. Generalmente se utiliza cuando queremos introducir varias etiquetas iguales y queremos que el navegador las tenga en cuenta (ya vimos en los primeros capítulos que los navegadores de HTML ignoran todos los caracteres o códigos repetidos consecutivamente excepto el primero); del mismo modo se usa cuando queremos forzar en pantalla mas de un espacio en blanco. En este caso lo introducimos para ampliar el espacio interior de las celdas vacías, y evitar que éstas se colapsen.
El primero corresponde a una tabla en la que se ha modificado el ancho de las celdas en dos columnas (primera y segunda). Debido a que, como hemos visto, en HTML las tablas se definen como número de filas (etiquetas <TR>) y número de celdas por fila (etiquetas <TD>), vemos que las cuatro etiquetas <TD> de la primera fila (primera etiqueta <TR></TR>) aparecen ahora soportando el atributo WIDTH, con valores expresados en forma de porcentaje (valores relativos).
<P><TABLE WIDTH="448" BORDER="1" CELLSPACING="2"
CELLPADDING="0" HEIGHT="143">
<TR>
<TD WIDTH="25%" HEIGHT="28"> </TD>
<TD WIDTH="25%"> </TD>
<TD WIDTH="25%"> </TD>
<TD WIDTH="25%"> </TD></TR>
<TR>
<TD HEIGHT="45"> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD HEIGHT="28"> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD HEIGHT="29"> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
</TABLE>
Este ejemplo corresponde a una tabla en la que se ha modificado la altura de las celdas de una fila. Ahora comprobamos que en las primeras etiquetas <TD> de cada fila aparece un atributo HEIGHT, también expresado en valores relativos.
ATENCIÓN:
Es importante tener clara la distinción entre el atributoWIDTH que es soportado por <TABLE> y que determina el ancho de la tabla, y el atributo WIDTH soportado por <TD> que determina el ancho de las celdas de una columna.
Como en el caso del ancho de una tabla, los atributos WIDTH y HEIGHT, cuando están soportados por <TD> admiten dos tipos de valores: absolutos y relativos, que se comportan del mismo modo que vimos anteriormente. Si buen en el caso de las dimensiones de celdas, se suelen utilizar valores relativos para evitar desajustes.
Por supuesto, las modificaciones de ancho y alto de las celdas pueden combinarse libremente en una misma tabla, e incluso en una misma celda, como en el ejemplo que viene a continuación.
|
| |