Tablas (y II)

Contenido del Capítulo:

• <table> y sus posibilidades
  • Border
  • Width
  • Align
  • Cellspacing
  • Cellpadding
  • Bgcolor
  • Background

[Arriba]

<table> y sus posibilidades

Ya hemos visto en el capítulo anterior cómo se crea una tabla. En este vamos a jugar con ellas; aprenderemos a cambiarlas de tamaño, de color y muchas otras cosas. Vamos a empezar por ver las opciones disponibles con <table>

Border (Ancho de los bordes)

Una tabla puede ir con un borde que lo enmarque. El grosor de este borde se establece con la opción Border:

Usando Border=1

Usando border=5

Si hubiésemos cogido el valor border=0 no se mostraría el marco (en algunos navegadores antiguos puede que sí).

Si sólo se poner border sin especificar ningún valor aparece un borde de tamaño 1.

Width

Si te has fijado, hasta ahora, la tabla tiene la anchura adecuada para acomodar el texto que contiene. Con el atributo width podemos especificar el ancho de la tabla que deseemos. El ancho se puede establecer de dos formas: en pixels o en tanto por ciento:

PIXEL: Si te acercas a la pantalla podrás apreciar que está compuesta de pequeños puntos, cada uno de esos pequeños puntos se llama pixel.

Si especificamos el ancho en pixels la anchura de la tabla será siempre la misma. Por ejemplo si usamos width=800 esto significa que la tabla debe tener una anchura de 800 puntos. Todos los navegadores intentarán dibujar una tabla de 800 puntos. Pero ¿qué sucede si uno tiene la pantalla de 640 puntos? la tabla no le cabrá y aparecerá una barra de desplazamiento en la parte inferior de la ventana. Esto puede hacer la visita a la página una experiencia muy incómoda. Comprueba en este ejemplo la incomodidad de una tabla de 2000 pixels de ancho (no creo que nadie tenga por ahora una configuración de pantalla tan grande): ejemplo12.html. Molesto ¿verdad?

Quiero destacar que no todo el mundo tiene en su ordenador la última tarjeta gráfica con una resolución bestial; hay mucha gente con una modesta tarjeta gráfica de 640x480 y se les debe tener en cuenta. Tengo entendido que hoy en dia la configuración más común son 800x600.

Por supuesto podríamos hacer tablas de menos de 640 pixels para que todos la vieran igual.

Una forma mejor de indicar la anchura de tabla deseada es usar tantos por ciento: width="50%" (con comillas). El 50% hace que la tabla ocupe el 50% del ancho de la página. De esta forma no importa la configuración de pantalla que se tenga, a todos les ocupará la tabla la mitad de la pantalla.

Sin especificar anchura: <table border=5>

Tabla que ocupa la mitad de la pantalla<table border=5 width="50%">

Align

Con esta opción podemos alinear la tabla a la izquierda (left, es la opción por defecto), centro (center), o a la derecha (right). En algunas viejas versiones de Netscape esta opción no funcionaba. La tabla queda centrada pero no su contenido:

Y su código es:

<table align=center border=1>
    <tr>
          <td>Tabla Centrada</td>
    </tr>
    <tr>
          <td>Los elementos de dentro no están centrados</td>
    </tr>
</table>

Cellspacing

Si queremos separar las celdas unas de otras podemos usar cellspacing. Con cellspacing podemos especificar cuántos pixels queremos que se separen. Para especificar esta distancia:

<table align=center border=1 cellspacing=10>

Y para que quede claro aquí tienes un ejemplo:

Cellpadding

Y con este último atributo podemos cambiar la distancia entre el contenido de las celdas y el borde.

<table align=center border=1 cellpadding=10>

Cellspacing y cellpadding a veces se confunden así que sería bueno que practicaras un poco con ellos para ver clara la diferencia.

bgcolor

En algunos navegadores se puede incluso establecer el color de fondo para todas las celdas. Esto se hace usando bgcolor:

<table align=center border=1 bgcolor=navy>

Los colores son los que ya hemos visto en capítulos anteriores.

background

También podemos establecer una imagen como fondo de las celdas. Si la imagen es más grande que la celda se recortará, si es más pequeña que la celda se repite tantas veces como sea necesario para llenarla. Es decir, la imagen se acomoda a la celda y no al revés.

Observa el siguiente ejemplo: la imagen completa es:

si la ponemos como fondo en la tabla:

En la primera fila y primera columna la imagen no cabe a lo ancho (sólo se ve Linu), pero a lo alto cabe de sobra y se repite una y otra vez. En la siguiente columna cabe en los dos sentidos: la imagen se repite tanto a lo ancho como a lo alto.

Si saltamos a la fila de abajo vemos que en la primera columna la imagen no cabe ni a lo alto ni a lo ancho.

Hemos visto en este capítulo las opciones de table, en el siguiente vamos a ver las opciones de td.