4. Ancho de tablas y celdas
Como vimos antes en este capítulo, el ancho de las tablas queda determinado por el tamaño necesario para mostrar el contenido de sus celdas. Sin embargo el lenguaje HTML nos permite especificar el tamaño que deseemos por medio de un nuevo atributo de la etiqueta TABLE: WIDTH (que traducido significa ancho). Este atributo se usa igual que los vistos hasta ahora, y su valor representará el ancho en pixeles de la tabla:
<TABLE WIDTH="500">
... Código de la tabla ...
</TABLE>
|
Es importante resaltar que si con ese tamaño no se pueden mostrar todos los elementos de la tabla, por ejemplo si en la tabla anterior hay una imagen de ancho 550 que no cabe en una tabla de 500 pixeles de ancho, el navegador ignorará el atributo WIDTH. Si la tabla únicamente contiene texto la etiqueta WIDTH tiene una mayor utilidad, ya que el texto se adaptará a ese ancho, ocupando más líneas si es necesario.
 | El tamaño del ancho de una tabla tambien se puede especificar en porcentaje respecto al ancho total de la ventana del navegador. Por ejemplo:
hace que la tabla sea la mitad de la ventana. Si el usuario hace más pequeña la ventana la tabla también se hará más pequeña. |
4.1. Tamaño de las celdas
Al igual que hemos modificado el ancho de la tabla completa también podremos modificar el tamaño de cada celda por separado. En este caso tendremos más posibilidades aún, ya que podremos modificar también la altura de la celda usando el atributo HEIGHT.
Al igual que antes, las dimensiones que especifiquemos con WIDTH y HEIGHT sólo serán respetadas si en ese espacio cabe su contenido. Por ejemplo en el siguiente caso:
<TABLE>
<TR>
<TD WIDTH="50"
HEIGHT="50">
<IMG SRC="img.gif"
WIDTH="100"
HEIGHT="100">
</TD>
</TR>
</TABLE>
|
la única celda de la tabla tendrá un tamaño de 100 por 100, que es el tamaño de la imagen que hemos insertado en ella. En este caso no pueden respetarse los atributos WIDTH y HEIGHT de la etiqueta TD ya que en una celda de las dimensiones indicadas en ellas no cabría la imagen. Si en su lugar hubiésemos usado < TD WIDTH="150" HEIGHT="150"> estas dimensiones SI se hubiesen respetado.
4.2. EJERCICIO 7-2
Como la mejor manera de aprender es practicar vamos a realizar un sencillo ejercicio pero que agrupa gran parte de los conocimientos adquiridos hasta ahora sobre tablas. El objetivo será crear una tabla con dos celdas y dos columnas de tamaño 100x100 todas ellas. Deberemos insertar en cada una de ellas la imagen spot.gif y alinearla de tal manera que consigamos el resultado de la figura 7.13.
Figura 7.13. Este será el objetivo del ejercicio 7.2. Una pista: debemos usar los atributos WIDTH, HEIGHT, ALIGN y VALIGN.
La tabla deberá estar centrada y tener un grosor de 5 pixeles. [En el archivo ej7-2.zip se ofrece la solución de este ejercicio]
4.3. El atributo NOWRAP
Para completar nuestro aprendizaje sobre el tamaño de tablas y celdas y como modificarlo nos queda por comentar un último atributo: NOWRAP. Este atributo no toma ningún valor, es decir, su forma de uso es:
<TABLE>
<TR>
<TD NOWRAP>
Texto
</TD>
</TR>
</TABLE>
|
Su efecto será que el texto de esa celda no puede ser partido en varias líneas, para adecuarse al tamaño de la celda. Cuando esto sucede se dice que la tabla ha envuelto (wrap en inglés) el texto. El significado de NOWRAP es por tanto no envolver el texto. Si es necesario para mantener el texto en una sola línea se ignorarán los atributos WIDTH y HEIGHT si fueron usados. En la figura 7.14 observamos una primera tabla con una única celda en la que no hemos usado el atributo NOWRAP, en la segunda tabla mostramos la misma tabla pero poniendo NOWRAP en dicha celda.
Figura 7.14. Usando el atributo NOWRAP evitamos que el texto sea partido en varias líneas, sin embargo no es recomendable usarlo en líneas muy largas como esta.
Como vemos en este segundo caso la línea de texto no cabe en el tamaño de la ventana y por tanto se extiende más allá de esta.
 | Hay que tener mucho cuidado usando el atributo NOWRAP, ya que si después escribimos un texto muy largo sin incluir ningún salto de linea (BR) todo él será mostrado en una única línea, que no cabrá en pantalla y por tanto obligará al visitante a usar las barras de desplazamiento. |